Html Ve Css Kullanarak Dikey Açılır Menü Yapımı | Kodlama Merkezi

Trang chủ » Html Açılır Liste örnekleri » Html Ve Css Kullanarak Dikey Açılır Menü Yapımı | Kodlama Merkezi

Có thể bạn quan tâm

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

123456789101112131415161718192021222324252627282930313233 <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

1234567891011121314151617181920212223242526272829303132333435363738394041 .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:50015pxVerdana;padding:5px;border:1pxsolid#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.

Từ khóa » Html Açılır Liste örnekleri