CSS Açılır Menü Yapımı

Açılır menü yapımı için gereki olan yöntem ve örnek HTML, CSS kodları ile birlikte yer alıyor.

Açılır menüyü istediğimiz HTML etiketinin üzerine gelindiğinde açabiliriz.

Öğreneceğimiz açılır menü yöntemini resimlere yazılara uygulayarak açılır resim, açılır yazı gibi uygulamalar yapabilirsiniz.

<div class="menu">
  <span>Açılır etiket</span>
  <div class="acilir-menu">
    <p>Burası bir paragraf burada çeşitli yazılar olabilir.</p>
  </div>
</div>

Etiketi açılır yapmak için açılacak olan etiketi, üzerine gelinecek olan etiketin içerisine yazıyoruz.

.menu {
    position: relative;
    display: inline-block;
}

.acilir-menu {
    display: none;
    position: absolute;
    min-width: 400px;
}

.menu:hover .acilir-menu {
    display: block;
}

position: relative; CSS özelliği ile üzerine geldiğimiz etiket açılacak olan etiketin başlangıç konumu yaptık,
display: inline-block; CSS özelliği ile üzerine geldiğimiz etiketi satır içi etiket yaptık,
display: none; CSS özelliği ile açılacak olan etiketin görünümünü görünmez yaptık,
position: absolute; CSS özelliği ile açılacak olan etiketin başlangıç konumunu, üzerine gelinen etiket yaptık,

.menu:hover .acilir-menu CSS kuralı ile .menu sınıfına sahip etiketin üzerine gelindiğinde .acilir-menu sınıfına sahip açılacak olan etiketin CSS kuralını display: block; ile görünür yapıyoruz.

Bu yöntemi kullanarak istediğimiz HTML etiketine açılır etiket özelliği verebiliriz.

Bu yöntemi CSS menü yapımı makalemdeki CSS yatay menü örneği üzerinde denersek;

<ul>
  <li><a class="aktif" href="index.html">Anasayfa</a></li>
  <li><a href="duyurular.html">Duyurular</a></li>
  <li><a href="hakkimizda.html">Hakkımızda</a></li>
  <li><a href="iletisim.html">İletişim</a></li>
  <li class="menu"><a href="#" >Açılır menü</a>
    <div class="acilir-menu">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

Açılır menü CSS kodları

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #111;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .menu:hover {
    background-color: #1a3680;
}

li.menu {
    display: inline-block;
}

.acilir-menu {
    display: none;
    position: absolute;
    background-color: #111;
    min-width: 160px;
}

.acilir-menu a {
    display: block;
    text-align: left;
}

.acilir-menu a:hover {
    color: white;
}

.menu:hover .acilir-menu {
    display: block;
}

.aktif {
    background-color: #1A3680;
    color: white;
}

Hayırlı günler dilerim.