Nuran Toka Kişisel Blog’u

Bizim zamanımızda table’lar vardı css div de neymiş ama artık yeni trende ayak uydurmak ve google amcada daha iyi sıralarda olmak için herkes kullandığı o eski yapıyı değiştirmeye ve geliştirmeye başladı.Şimdi vereceğim örnek ise görünüşü hoş ve kolay bir menu.Yapacağımız menu:

  Evet yanda görmüş olduğumuz menu arkaplanı beyaz ancak üzerine gelince arkaplanı yeşil olan bir menu hemen html ve css kodlarını veriyorum:

Css Kodları:

<style type=”text/css”>#anamenu {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 100%;   width: 160px;   padding: 0px;   margin: 0px;   border:1px;   border-color:#000000; } #anamenu h1 {   display: block;   background-color:#D2FFD2;   font-size: 90%;   padding: 3px 0 5px 3px;   border:none;   border-color:#FFFFFF;   color: #333333;   margin: 0px;   width:159px;   } #anamenu ul {   list-style: none;   margin: 0px;   padding: 0px;   border: none;   }   #anamenu ul li {   margin: 0px;   padding: 0px;   }   #anamenu ul li a {   font-size: 80%;   display: block;   border-bottom: 1px dashed #C39C4E;   padding: 5px 0px 2px 4px;   text-decoration: none;   color: #666666;   width:160px;   } #anamenu ul li a:hover, #anamenu ul li a:focus {   color: #000000;   background-color: #D2FFD2;   } </style>

Html kodları:

<div id=”anamenu”>  <h1 align=”center”>MENU</h1>  <ul>  <ul><li><a href=”#” mce_href=”#” tabindex=”1″>Ana Sayfa</a></li></ul> <li><a href=”#” mce_href=”#” tabindex=”2″>Hakkımda</a></li> <li><a href=”#” mce_href=”#” tabindex=”3″>Yazılım</a></li> <li><a href=”#” mce_href=”#” tabindex=”4″>Donanım</a></li> <li><a href=”#” mce_href=”#” tabindex=”5″>Web Programlama</a></li> <li><a href=”#” mce_href=”#” tabindex=”6″>Bağlantılar</a></li> </ul> </div>

Göründüğü üzere anamenu adında css in çatısını oluşturuyoruz.Daha sonrada alt özelliklerine ayrı ayrı stiller yazıyoruz #anamenu h1 {} gibi..Bütün stillerimizi yazdıktan sonra sıra html kodlarına geliyor.<div id=”anamenu”></div> aralığına oluşturmak istediğimiz yapının kodlarını yazıyoruz (li).Zaten linkler olsun başlık kısmı olsun bunlara uygulanacak stillerimizi yazmıştık.Ve bu şekilde menümüzü bitirmiş oluyoruz.Son olarak stil kısmında tanımlarken #anamenu dediğimiz için div’in class kısmına değilde id kısmına yazdık.

İyi kodlamalar..
 

Tarih: Nisan 7th, 2008 yapan nuran toka
Kategori: Tasarım