Açılır menüler, web sitelerinde kullanıcıların menü öğelerine daha hızlı erişmesini sağlayan yaygın bir navigasyon yöntemidir. Hem HTML hem de CSS kullanarak bir açılır menü oluşturmak oldukça kolaydır. Hemen hemen tüm web sitelerinde açılır menü kullanılmaktadır. Şimdi bunu kod örneği üzerinden işleyelim.
HTML'de açılır menü oluşturmanın temel yapısı genellikle bir <button>
veya bir menü bağlantısı ile bir <div>
içinde yer alan bir liste elemanları (<ul>
) setidir.
Örneğin:
<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 açılır menüyü istediğiniz gibi stilize edebilirsiniz. Örneğin, menü öğelerini yatay veya dikey hizalayabilir, arka plan rengi ve yazı tipi gibi özelliklerini özelleştirebilirsiniz.
/* 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; }
Şimdi de Açılır Menüyü tüm cihazlarla uyumlu hale getirmek için responsive yapalım;
/* Ekran genişliği 600 piksel veya daha küçük olduğunda */ @media screen and (max-width: 600px) { .dropdown-content { display: block; position: relative; } /* Dikey olarak düzenle */ .dropdown-content a { float: none; display: block; text-align: left; } }
Responsive menü yapmak bu kadar basit. Eğer iyi bir yazılımcı olursanız şirinleri görebilirsiniz. Saygılarımla :)