HTML kullanarak açılır menü yapmak için aşağıdaki adımları izlemek gerekmektedir:
- HTML Yapısı: Açılır menü için temel yapı, bir
<button>
veya menü bağlantısı ile bir<div>
içinde yer alan bir liste elemanları (<ul>) setidir 2.
<div class="dropdown"> <button class="dropbtn">Menü</button> <div class="dropdown-content"> <a href="#">Anasayfa</a> <a href="#">Hakkımızda</a> <a href="#">Hizmetlerimiz</a> <a href="#">Galeri</a> <a href="#">İletişim</a> </div> </div>
- CSS ile Stilleme: Açılır menüyü CSS kullanarak stilize etmek mümkündür 23. Örneğin, menü öğelerini yatay veya dikey hizalayabilir, arka plan rengi ve yazı tipi gibi özellikleri özelleştirebilirsiniz 2.
/* Temel dropdown stilini tanımla */ .dropdown { position: relative; display: inline-block; } /* Dropdown içeriğini gizle */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); z-index: 1; } /* Dropdown içeriği görüntülendiğinde dropdown butonunun rengini değiştir */ .dropdown:hover .dropdown-content { display: block; } /* Dropdown içeriği için link stilleri */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Dropdown içeriği linklerinin üzerine gelindiğinde arka plan rengini değiştir */ .dropdown-content a:hover { background-color: #f1f1f1; }
- Responsive Yapma: Açılır menüyü tüm cihazlarla uyumlu hale
5 kaynaktan alınan bilgiyle göre: