Site tasarımı yaparken bazen iç içe geçmiş birçok kategori bulunabilir, böyle durumlarda açılır menü kullanmak kullanıcıların aradığını daha rahat bulmalarını sağlar. Bu dersimizde sadece html ve css kullanarak dikey bir açılır menü yapacağız.
Her ne kadar yeterli html ve css bilginiz olsa da, açılır menüler çok fazla kullanılmadığı için bir biri içerisine geçmiş ul, li ve a etiketlerini düzenlemek vakit kaybına neden olabiliyor. Bu nedenle yazımda kod karmaşası olmadan basit bir açılır menü yapmak istedim. Kodlar üzerinde küçük değişiklikler yaparak istediğiniz menüyü kolayca elde edebilirsiniz.
index.html
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 |
<html> <head> <title>Dikey Açılır Menü Yapımı</title> <link rel="stylesheet" href="stil.css"> </head> <body> <div class="acilirmenu"> <ul> <li><a href="index.html">Anasayfa</a></li> <li><a href="#">Elektronik</a> <ul> <li><a href="#">Televizyon</a></li> <li><a href="#">Beyaz Eşya</a></li> <li><a href="#">Klima</a></li> </ul> </li> <li><a href="#">Bilgisayar</a> <ul> <li><a href="#">Masaüstü</a></li> <li><a href="#">Notebook</a></li> <li><a href="#">Donanım Birimleri</a></li> <li><a href="#">Network Ürünleri</a></li> </ul> </li> <li><a href="#">Telefon</a></li> <li><a href="#">Kamera</a></li> <li><a href="#">İletişim</a></li> <li><a href="#">Hakkımızda</a></li> </ul> </div> </body> </html> |
stil.css
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 |
.acilirmenu{ width:180px; height:auto; } .acilirmenu ul{ width:180px; margin:0; padding:0; list-style-type:none; } .acilirmenu li{ position: relative; } .acilirmenu li ul{ position:absolute; list-style-type:none; left:179px; width:180px; display:none; top:0; } .acilirmenu li a{ height:30px; display: block; text-decoration: none; background-color: #3EA3AD; color:#FFF; font:500 15px Verdana; padding:5px; border:1px solid #FFF; border-bottom:0; text-align: center; line-height: 30px; } .acilirmenu li a:hover{ background-color:#52BEAA; color:#FF0; } .acilirmenu li:hover ul{ display:block; } |
Açılır menü yaparken en sık hata yapılan kısım açılan menü kısmında ki li etiketinin kapatıldığı yerdir. Ayrıca menünün genişliği değiştirildiğinde açılır menünün başlangıç noktası da değiştirilmelidir.