CSS

Mar 26, 2022

Egehan D.

2dk. Okuma Süresi

Basit CSS Açılır (Dropdown) Menü Yapımı

Basit CSS Açılır (Dropdown) Menü Yapımı

Web sitesinin kullanıcı deneyimi ve yükleme süresi kritik öneme sahiptir. Bu nedenle sitenizi ilave JavaScript veya büyük resimlerle yüklememelisiniz.

Peki ya güzel görünümlü bir CSS açılır menüye sahip olmak isterseniz? Bunun için JavaScript kullanmak zorunda değilsiniz, bugün açılma efekti sadece CSS kullanılarak oluşturulabilir.

Bu yazıda bir CSS açılır menüsü oluşturmanın ne kadar kolay olduğunu öğreneceksiniz.

Nelere ihtiyacınız olacak?

Bu rehbere başlamadan önce aşağıdakilere ihtiyacınız var:

  • Hosting kontrol panelinize erişim

Ayrıca şu rehberleri okuyabilirsiniz:

Adım 1 — HTML dosyasının oluşturulması

Öncelikle boş bir HTML dosyası oluşturmalısınız. Bu rehberde menu.html adından yeni bir dosya oluşturacağız. Bu işlem için Dosya Yöneticisi’ni kullanıyoruz. Ancak aynı işlem FTP istemcisi (menu.html dosyasını bilgisayarınızda oluşturun ve hosting hesabınıza yükleyin) ile de yapılabilir.

Hostinger Dosya Yöneticisi

Adım 2 — HTML menü kodunun eklenmesi

Menümüz Ana menü adı verilen bir ana öğeden ve beş alt öğeden yapılacaktır. Href özelliği içindeki URL’yi değiştirerek, her Çocuk Menüsünü web sitenizin farklı bir sayfasına bağlayabilirsiniz. Her bir öğenin farklı bir sınıfa sahip olduğunu görebilirsiniz – dropdown, mainmenubtn ve dropdown-child. Sınıflar, farklı CSS kuralları uygulamak için gereklidir.

<div class="dropdown">
  <button class="mainmenubtn">Ana Menü</button>
  <div class="dropdown-child">
    <a href="http://wwww.alanadiniz.com/sayfa1.html">Alt Sayfa 1</a>
    <a href="http://wwww.alanadiniz.com/sayfa2.html">Alt Sayfa 2</a>
    <a href="http://wwww.alanadiniz.com/sayfa3.html">Alt Sayfa 3</a>
    <a href="http://wwww.alanadiniz.com/sayfa4.html">Alt Sayfa 4</a>
    <a href="http://wwww.alanadiniz.com/sayfa5.html">Alt Sayfa 5</a>
  </div>
</div>

CSS kuralları olmadan HTML menüsü şu şekilde görünür:

pasted image 0 65

Görebileceğiniz gibi düz HTML menüsü optimize edilmemiştir ve güzel görünmez. Ancak, bir sonraki adımda CSS kurallarını uygulayarak bunu değiştireceğiz.

Adım 3 — CSS’in uygulanması ve açılır menü efektinin oluşturulması

HTML kodumuzu aşağıdaki CSS kuralları ile stillendireceğiz.

.mainmenubtn {
  background-color: red;
  color: white;
  border: none;
  cursor: pointer;
  padding:20px;
  margin-top:20px;
}
.mainmenubtn:hover {
  background-color: red;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-child {
  display: none;
  background-color: black;
  min-width: 200px;
}
.dropdown-child a {
  color: white;
  padding: 20px;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown-child {
  display: block;
}

Görebileceğiniz gibi .dropdown-child, display: none CSS kuralına sahip. Ancak, kullanıcı mouse’u üzerine getirirse (.dropdown:hover), CSS kuralı display: block olacak şekilde değişiyor. Bu da menümüz için açılma efektini yaratıyor.

Aşağıdaki menu.html dosyamızın son hali:

<html>
<head>
  <style>
    .mainmenubtn {
      background-color: red;
      color: white;
      border: none;
      cursor: pointer;
      padding:20px;
      margin-top:20px;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-child {
      display: none;
      background-color: black;
      min-width: 200px;
    }
    .dropdown-child a {
      color: white;
      padding: 20px;
      text-decoration: none;
      display: block;
    }
    .dropdown:hover .dropdown-child {
      display: block;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button class="mainmenubtn">Ana Menü</button>
    <div class="dropdown-child">
      <a href="http://wwww.alanadiniz.com/sayfa1.html">Alt Sayfa 1</a>
      <a href="http://wwww.alanadiniz.com/sayfa2.html">Alt Sayfa 2</a>
      <a href="http://wwww.alanadiniz.com/sayfa3.html">Alt Sayfa 3</a>
      <a href="http://wwww.alanadiniz.com/sayfa4.html">Alt Sayfa 4</a>
      <a href="http://wwww.alanadiniz.com/sayfa5.html">Alt Sayfa 5</a>
    </div>
  </div>
</body>
</html>

Bu örnekte dahili CSS stillerini kullandık. Bu da CSS kodlarının aynı HTML dosyasında olduğu anlamına gelir. Fakat, CSS dosyalarını HTML’e bağlamak için birkaç yöntem vardır.

Renkleri ve boyutları değiştirerek CSS kodlarında denemeler yapabilirsiniz. Bu butonu ihtiyaçlarınıza göre değiştirebilirsiniz.

Sonuç

Bu rehberi tamamlayarak yalnızca nasıl CSS açılır menü yapabileceğinizi öğrendiniz. Bu rehberdeki kod çok hafiftir ve sitenizin açılma süresini etkilemeyecektir.

Author
Yazar

Egehan D.

Egehan Hostinger'da ML ve NN ile denetimsiz öğrenme üzerinde çalışıyor. Veri analizi hakkında büyük bir tutkuya sahiptir. İşi her ne kadar hobi gibi olsa da, çeşitli aktivitelerde gönüllü olmaktan ve ormanda kamp yapmaktan da büyük oranda zevk alıyor.

Egehan D. adlı yazarın diğer rehber yazıları