Sadece CSS kodlarıyla acılabilir (dropdown) ve mobil uyumlu menu hazırlanabilir mi? Birkac sene oncesine kadar bu işi JavaScript desteği olmadan yapmak hayalden oteye gecemezdi. Ancak bugun, CSS3’un gelişen tanımlarıyla web tarafında neredeyse herşey mumkun! Ayrıca ac/kapa duğmesiyle bu menuyu taşınabilir cihazlara ozel stilize de edebiliyoruz. Evet, yanlış duymadınız. Ac/kapa işlemini bile sıradan bir checkbox oğesini selector gibi kullanarak CSS ile hazırlıyoruz. Bu makalemizde sadece CSS kodları yazarak responsive yapıda bir dropdown menu hazırlayacağız. Sadece kod tarafında değil, onyuzde de basitliğe yonelerek bu tasarımı yapacağız. Orneği goruntuleyerek derse başlayabilirsiniz. HTML tarafında ihtiyac duyacağımız kodları yazdıktan sonra menunun genel taslağını oluşturacağız. Klasik ul yapısı oyle bir stilize edilmeli ki mobil cihazlarda da sorunsuz calışmalı. Oyleyse bir ac/kapa duğmesine, yani jQuery kodlarına ihtiyac duymaz mıydık? Burada da sıradan bir checkbox oğesini, değerine gore selector ile yakalanabilir hale getirip ac/kapa duğmesi olarak kullanacağız. Ve en sonunda da butun bu yapıyı responsive, yani mobil uyumlu hale getireceğiz. HTML kodlarımız ile başlayalım. HTML Kodları İlk olarak mobil tarafta ac/kapa işlemini yapacak checkbox oğesini ekleyelim. HTML Code:
☰
Şimdi de menunun kendisini ekleyelim. Yapımız gayet basit. Klasik bir ul menusu oluşturalım. HTML Code:

• Anasayfa
• Web Tasarımı
  • HTML5
  • CSS3
  • jQuery
• İletişim

Şimdi butun fonksiyoneliteyi ve tasarımı CSS ile ekleyelim. CSS Kodları Başlangıc icin menuyu klasik ul yapısından cıkaralım. Renkler ve yazı tipleri atayalım. Kod:
ul.cssMenu ul.cssMenu li
Menu oğelerinin uzerine gelindiğinde nasıl bir aksiyon alınacak? Kod:
ul.cssMenu > li:hover
Aşağıya doğru acılan, sub menu barındıran oğelerin yanına koyacağımız oku tasarlayalım. Kod:
ul.cssMenu .downarrow
Alt menuleri detaylı bir şekilde elden gecirelim. Kod:
ul.cssMenu li ul ul.cssMenu li:hover ul ul.cssMenu li:hover ul li ul.cssMenu li:hover ul li:hover
Şimdi son olarak checkbox oğesini gorunmez yapalım ve mobil taraf icin menuyu goster hamburger ikonunu tasarlayalım. Kod:
input[type='checkbox']#hiddenInput .showMenu
Sırada responsive yapımız var. Kod:
@media (max-width: 992px) input[type='checkbox']#hiddenInput:checked ~ ul.cssMenu,.showMenu ul.cssMenu li ul.cssMenu li:hover ul.cssMenu li ul ul.cssMenu li ul li ul.cssMenu li:hover ul }
Bu kadar. Nasıl buldunuz? Sadece CSS kodları ile hazırlanmış bu responsive dropdown menu orneğini nasıl buldunuz? Yorumlarınızı bekliyoruz. kaynak : adobewordpress.com __________________