HTML, CSS, jQuery kullanarak resimde de görüldüğü gibi responsive menü yapacağız. Demo yu buradan görüntüleyebilirsiniz.

Menü kodlarına ve canlı örneğine buradan ulaşabilirsiniz.

 

HTML Kodları

  • Menünün genel yapısını oluşturuyoruz
  • nav etiketi altında liste etikletleri (ul li) ile menü elemanlarını oluşturalım
  • Menünün açılır olduğunu belirtmek için li etiketine “dropdown” sınıfını ekledim.
  • Açılır menü için li.dropdown etiketi içerisinde yeni bir ul li yapısı oluşturuyoruz.
  • “dropdown-menu” isimli div alt menümüz olacak.
  • Responsive olduğunda menüyü açıp kapatmak için bir buton,link eklememiz gerekiyor bunu da nav içerisine ul etiketinin üzerinde aşağıda görüldüğü gibi yeni bir div ekleyerek yaptık.

 

CSS Kodları

  • Nav etiketini biçimlendiriyoruz. Genişliğini %100 yaptık, gölge verdik, arkaplan rengi verdik. (No:9)
  • Normal menü mantığını uyguladık ul li elemanlarına float:left özelliğini vererek yan yana gelmesini sağladık. (No:29)
  • “dropdown-menu” sınıfına opacity, visibilty,top, gibi değerler vererek gizledik. Bu şekilde gizlememizin sebebi efektif bir şekilde açılması için. (no:73)
  • Gizlediğimiz menüyü “dropdown” classı verdiğimiz etiketin üzererine gelince açtırıyoruz. (No:61)
  • Media etiketleri ile max-width yani genişlik 991px olduğunda menünün nasıl bir şekilde olacağını belirliyoruz.

 

jQuery Kodları

  • menu-toggle a tıklandığında menüyü açıp kapatması için.