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

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

Giriş

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

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-childdisplay: 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 CSS ile nasıl basit bir açılır menü yapabileceğinizi öğrendiniz. Bu rehberdeki kod çok hafiftir ve sitenizin açılma süresini etkilemeyecektir.

Yazar

Author

Egehan D. / @egehandulger

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.

İlgili Rehberler

Author

Kerim Potuk Yanıt

Ekim 01 2018

Hocam merhabalar. Ben kodunuzu kullanarak bir açılır menü yapmaya çalıştım ancak açılır menünün açılan kısmı menünü geri kalanını aşağı itiyor. Bunu nasıl engelleyebilirim. Ben menü açıldığında herhangi bir yeri etkilemeden direk olarak objelerin üstüne açılsın istiyorum. yardımcı olabilirseniz sevinirim.

Author

Bulut Yanıt

Mayıs 10 2019

.dropdown-child { display: none; background-color: black; min-width: 200px; position:absolute; z-index:2 } .dropdown-child içerisine bu iki css kodunu ekliyoruz. position:absolute menünün açılan kısmını aşağı itmez. z-index:2 Buda açılan kısmın en üstte olmasını sağlar.

Bir yanıt bırakın

Yorum*

İsim*

Eposta*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Şimdi Hostinger'ın bir parçası olun!