Günümüzde bir çok site css ile tasarlanıyor, şeklini şemalini alıyor.. önceden bir sürü grafik kullanılarak yapılan menüler artık css ile yapılıyor.. ben de size bu makalemde css ile yatay menülerin nasıl yapılacağından bahsedeceğim.. hadi başlıyalım..

ilk olarak menümüzü oluşturacak html kodunu verelim

bu kod ile ne yaptığımıza gelince, 'nav' id'sine sahip bir div oluşturyoruz ve bu div'in içinde ul ve li gibi html taglarını kullanarak istediğimiz seçenekleri yazdırıyoruz(listeliyoruz).. siz isterseniz id olan kısmı class olarak değiştirebilirsiniz, eğer bu menüyü sayfada birden fazla yerde kullanacaksanız.. eğer "ne zaman div ne zaman id kullanıcaz?" diye soruyorsanız Cemshid'in yazdığı şu makaleye bakabilirsiniz..

Neyse, şimdi sırasıyla CSS kodlarımızı verelim ve açıklayalım..

bu kod (yukarıdaki) nav id'sine sahip layer'a 1px genişliğinde beyaz bir border yapmamızı sağlıyor..

bu kod ise ul ile başladığımız kısımın genişliğini(width), arkaplan rengini(background-color), sayfanın hangi tarafına yaslanacağını(float) ve kenarlardan ve içerden olan boşluklarını(margin ve padding-left) ayarlıyor..

bu kod ise belkide bu makale için en önemli olan kodlardan birisi.. display:inline yaparak ul ve li gibi varsayılan olarak listeleme işlemini alt alta yapan tagların bu işlemi yan yana yapmasını sağlıyor.. biraz karışık bir cümle oldu ama anlatabildim sanırım

bu kod bloğu ise li tagına ait olan link özelliklerini belirliyor.. hangi kodun ne işe yaradığını açıklama gereği duymuyorum çünkü zaten yukarıdaki kodlardan pek bi farkı yok..yinede anlamadıklarınızı yorum yaparak sorabilirsiniz..

son olarak bu kod ilede hover özelliği ile menüdeki itemlerin üzerine gelindiğinde küçük bir renk değişikliği olmasını sağlıyoruz... evet işte tüm yapmamız gereken bu kadar.. takıldığınız yada anlamadığınız yerleri burdan yorum yazmak suretiyle bana ve diğer okuyan arkadaşlara sorabilirsiniz.. umarım yararlı olmuştur.. unutmadan örneğin çalışan hali burada...
Not : kodlar bu adresten alınmıştır...