Css Dersleri – Dikey ve Yatay Menü Yapımı

Css derslerimize menü işlemleri ile devam ediyoruz bu dersimizde css ile dikey ve yatay menü yapımından bahsedeceğim. Oluşturacağımız menülerin ekran görüntüleri yukarıdaki gibi olacaktır. Fazla uzatmadan
Css ile dikey menü nasıl hazırlanır bakalım.
1-İlk olarak menüde yer alacak olan elemanları içeren bir liste hazırlayıp id’sini menu olarak belirliyoruz.

<ul id="menu">
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="iletisim.html">İletişim</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="urunlerimiz.html">Ürünlerimiz</a></li>
<li><a href="defter.html">Z.Defteri</a></li>
</ul>

Evet şimdi sıra geldi bu listeyi dikey menü haline getirmeye yapılacakları önce açıklayalım sonra açıkladıklarımızın css karşılıklarını yazalım.

• Listeleme işaretleri kaldırılacak ve listelemeden dolayı oluşan iç ve dış boşluklar sıfırlanacak

  #menu
  {
  list-style-type:none;
  margin:0;
  padding:0;
  }
  

• Linklerin altındaki çizgiler kaldırılacak,zemin rengi ayarlanacak, her link elementini ayrı ayrı göstermek için block özelliği verilecek, zeminleri aynı genişlikte olsun diye genişlik değeri verilecek, menü elemanlarını bir birinden ayırmak için alt dış boşluk verilecek ve son olarak iç boşluk verilecek. bu söylediklerimizin css meali..:

  #menu a
  {
  text-decoration:none;
  background-color:#00FFFF;
  display:block;
  width:100px;
  margin-bottom:3px;
  padding:5px 0px 5px 10px;
  }
  

• Evet son bir hamle kaldı oda fare ile nesnelerin üzerine gelince zemin rengini değiştirmek bunun için a:hover özelliğini kullanacağız.

  #menu a:hover
  {
  background-color:#0066FF;
  color:#FFFFFF;
  }
  

hayırlı olsun css dikey menümüz kullanıma hazır.. :)
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/tofk4mb3/” style=”width:100%; height:200px; border:solid #4173A0 1px;”]
Dikey menü bitti şimdi sıra geldi yatay menüye;
Css ile yatay menü içinde yukarıdaki kodları kullanacağız tek farkı

 #menu a içinde yer alan display:block; satırını silip float:left

ve

#menu li
{
display:inline;
}

eklemek
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/tkcb7wc9/” style=”width:100%; height:200px; border:solid #4173A0 1px;”]