Html ve Css Kullanarak Responsive Açılır Menü Örneği

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 ile Açılır Menü Oluşturmak

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üye Şekil Vermek

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 :)

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi