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ı :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<nav id="myMainNavigation"> <ul> <li><a href="#">Anasayfa</a></li> <li> <a href="#">Kurumsal</a> <ul> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Marka Kimliği</a></li> <li><a href="#">Son Haberler</a></li> </ul> </li> <li> <a href="#">Ürünler</a> <ul> <li> <a href="#">Ürün Grubu 1</a> <ul> <li><a href="#">Ürün 1.1</a></li> <li><a href="#">Ürün 1.2</a></li> <li><a href="#">Ürün 1.3</a></li> </ul> </li> <li> <a href="#">Ürün Grubu 2</a> <ul> <li><a href="#">Ürün 2.1</a></li> <li><a href="#">Ürün 2.2</a></li> <li><a href="#">Ürün 2.3</a></li> <li><a href="#">Ürün 2.4</a></li> </ul> </li> <li> <a href="#">Ürün Grubu 3</a> <ul> <li><a href="#">Ürün 3.1</a></li> <li><a href="#">Ürün 3.2</a></li> </ul> </li> </ul> </li> <li><a href="#">İnsan Kaynakları</a></li> <li><a href="#">İletişim</a></li> </ul> </nav> |
Yukarıdaki kodlar, [&hellip