BilisiMerkez

Css ile Yatay Menu Yapmak

CSS ile Menü Yapmak II - Yatay Menüler

Yatay Menüler

Bir önceki makalede dikey menüye bir örnek yapmıştık. şimdi de yatay menülere bir örnek vereceğiz. Önceki makalede bahsettiğimiz gibi yatay ve dikey menüler belli bir yere kadar kodlaması aynıdır. Biz aynı olan kısmı geçip sonrasına devam ediyoruz.

Kaldığımız yerden devam edersek. Linkleri yatay olarak dizmek için display:inline özelliğini kullanıyoruz:

  1.   
  2. ul.menu {   
  3.     list-style-typenone;   
  4.     padding0;   
  5.     margin0;   
  6. }   
  7. ul.menu li {   
  8.     displayinline;   
  9. }  

Linklerin altındaki çizgileri kaldırıyoruz:

  1.   
  2. ul.menu {   
  3.     list-style-typenone;   
  4.     padding0;   
  5.     margin0;   
  6. }   
  7. ul.menu li {   
  8.     displayinline;   
  9. }   
  10. ul.menu li a {   
  11.     text-decorationnone;   
  12. }   

Linkler arasına biraz boşluk veriyoruz:

  1.   
  2. ul.menu {   
  3.     list-style-typenone;   
  4.     padding0;   
  5.     margin0;   
  6. }   
  7. ul.menu li {   
  8.     displayinline;   
  9. }   
  10. ul.menu li a {   
  11.     text-decorationnone;   
  12.     padding: .2em 1em;   
  13. }   

Menüyü biraz renklendiriyoruz:

  1. ul.menu {   
  2.     list-style-typenone;   
  3.     padding0;   
  4.     margin0;   
  5. }   
  6. ul.menu li {   
  7.     displayinline;   
  8. }   
  9. ul.menu li a {   
  10.   text-decorationnone;   
  11.   padding: .2em 1em;   
  12.   color#1B1B1B;   
  13.   background-color#E2E2E2;   
  14. }  

Son olarakta rollover efekti vermek için a:hover özelliğine renk atıyoruz:

  1.   
  2. ul.menu {   
  3.     list-style-typenone;   
  4.     padding0;   
  5.     margin0;   
  6. }   
  7. ul.menu li {   
  8.     displayinline;   
  9. }   
  10. ul.menu li a {   
  11.     text-decorationnone;   
  12.     padding: .2em 1em;   
  13.     color#1B1B1B;   
  14.     background-color#E2E2E2;   
  15. }   
  16. ul.menu li a:hover   
  17. {   
  18. background-color#999;   
  19. }  

Sonuç işte:

 

Biz burada temel menü örnekleri verdik. Mesele işin yapılışını öğrenmek. Daha ayrıntılı ve güzel örnekler internette bir çok yerde mevcut. Gerek aşağıda verdiğimiz Kaynaklar kısmında ve gerekse İnternette aratarak bir çok menüye ulaşabilrisiniz.

Kaynaklar

Facebook'ta Paylaş | Sayfanın Çıktısını Al | Foxit'le PDF Olarak Kaydet

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=