CSS Menü Yapımı

Web siteniz için üzerine gelindiğinde açılan ağaç menü yapmak istiyorsanız, bu ders tam size göre. Bu derste javascript kullanmadan CSS ile Menü Yapımını göstereceğim. Öncelikle yapacağımız menü sitenizin ana menüsü olduğunu varsayalım. Ve bu menüde yer alan butonlar üzerine geldiğimizde o menüye ait alt menüler açılsın istiyoruz. Bunu yapmak için öncelikle menümüzün HTML yapısını oluşturalım.

HTML Kodları :

Yukarıdaki kodlar, CSS menü yapımı için gerekli html yapısını oluşturmaya yetecektir. Bu şekilde html yapısını oluşturduğumuzda, karşımıza bir liste gurubu gelecek. Şimdi bu listeyi, CSS ile süsleyerek, güzel bir menü haline getirmeliyiz.

CSS menü yapımı HTML görüntü

CSS menü yapımı HTML görüntü

CSS Kodları :

Tüm yukarıdaki CSS kodlarını uyguladıktan sonra menümüz, liste şeklindeki görünümünden, güzel bir açılır CSS Menü‘ye dönüşüyor.

CSS Menü Yapımı - CSS kodları uygulanınca menünün son hali

CSS Menü Yapımı – CSS kodları uygulanınca menünün son hali

 

Burada dikkat edilmesi gereken bir konu var, LI etiketleri arasında gereksiz boşlukların oluşmaması için, öncelikle font boyutunu sıfıra düşürdük. ve A etiketleri içinde yer alan metinlerimizin de görünür olması için, font boyutunu 14px’e ayarladık.

Böylelikle JS kullanmadan, menümüzü sadece CSS kodlarıyla oluşturmuş olduk. CSS Menü Yapımı‘nın çalışır haldeki JSFIDDLE linkine de buradan ulaşabilirsiniz.

 

 

Henüz hiç yorum yapılmamış,

İlk Yorumu Siz Yapın...


Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

En Komik Tv Facebook Sayfası Yok Artık Facebook Sayfası