CSS ile İleri Düzey Örnekler – Açılır Menü (Drop Down Menu) Yapımı

Merhaba arkadaşlar, önceki yazılarımda “CSS Nedir?”, “CSS Kullanımı” ve bazı basit “CSS Örnekleri” ile sizleri bilgilendirmeye çalıştım. Artık daha ileri düzey ve kullanacağınızı düşündüğüm örneklerle devam edeceğiz. Bu yazımda hepimizin kullandığı açılır menünün yapımını anlatacağım.

Aşağıdaki alanda “Result” bölümüne tıkladığınızda yaptığımız menüyü canlı olarak inceleyebilirsiniz. “HTML” bölümüne tıkladığınızda html kodlarına, “CSS” bölümüne tıkladığınızda CSS kodlarına, “JS” bölümüne tıkladığınızda Javascript kodlarına gözatabilirsiniz.

Açılır menü yapımına aşağıdaki HTML kodları ile başlıyoruz. Listelerimizi oluşturuyor ve class belirliyoruz.

<ul class="menubar">
  <li>
    <a href="#">Dosya</a>
    <ul>
      <li><a href="#">Aç</a></li>
      <li><a href="#">Kaydet</a></li>
      <li><a href="#">Farklı Kaydet&#8230;</a></li>
      <li><a href="#">Kapat</a></li>
      <li class="separator"></li>
      <li><a href="#">Çıkış</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Düzenle</a>
    <ul>
      <li><a href="#">Kes</a></li>
      <li><a href="#">Kopyala</a></li>
      <li><a href="#">Yapıştır</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Yardım</a>
    <ul>
      <li><a href="#">Hakkında</a></li>
    </ul>
  </li>
</ul>

HTML kodlarımızı oluşturduktan sonra, biçim ve şekillendirme için CSS kodlarımızı yazmamız gerekiyor. Oluşturduğumuz sınıfa ve sınıfın altındaki elementlere özel CSS kodlarımızı yazıyoruz.

ul.menubar {
  background: white;
  list-style: none;
  padding: 0 10px;

  > li {
    display: inline-block;
    position: relative;

    > a {
      color: black;
      display: block;
      padding: 10px 14px;
      text-decoration: none;

      &:hover { background: #29a7f5; color: white; }
    }

    > ul {
      display: none;
      position: absolute;
      top: 100%;
      background: white;
      padding: 10px 0;

      > li > a {
        color: black;
        display: block;
        padding: 8px 20px;
        text-decoration: none;

        &:hover { background: #29a7f5; color: white; }
      }
    }

    &.is-selected {
      > a { background: #29a7f5; color: white; }
      > ul { display: block; }
    }
  }
}

Evet arkadaşlar böylelikle menümüzü bitirmiş olduk. Yaptığımız işlemler oluşturduğumuz “menubar” sınıfını listemize referans olarak çağırmak ve daha sonra css dosyamızdaki “menubar” sınıfı ile altında bulunan elementleri biçimlendirmek için CSS kodlarımızı yazmak oldu.

Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler.