CSS Açılır Liste (Dropdown)

CSS Açılır Liste (Dropdown) Nedir? CSS Açılır Liste (Dropdown) Nasıl Kullanılır?

CSS Şubat 24, 2022 0 3750 Okuma Listesine Ekle

CSS Açılır Liste (Dropdown)

Temel Açılır Liste

Bu örneğimizde, kullanıcı fareyi bir öğenin üzerine getirdiğinde görünen bir açılır kutu (alan) oluşturacağız.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<p>Açılır içeriği açmak için fareyi aşağıdaki metnin üzerine getirin.</p>

<div class="dropdown">
  <span>Üzerime Gel!</span>
  <div class="dropdown-content">
  <p>Merhaba Dünya!</p>
  </div>
</div>

</body>
</html>

Açılır içeriği açmak için herhangi bir öğeyi kullanınabilirsiniz (bir <span> veya bir <button> öğesi gibi).
Açılır içeriği oluşturmak ve içine istediğinizi eklemek için bir kapsayıcı öğesi (<div>) kullanabilirsiniz.
Açılır içeriği CSS ile doğru şekilde konumlandırmak için öğelerin etrafına bir <div> öğesi ile sarabilirsiniz.
CSS) .dropdown sınıfı, açılan içeriğin açılır düğmenin hemen altına yerleştirilmesini istediğimizde gerekli olan position:relative kullanır. (position:absolute kullanarak bu eylem gerçekleştirilir.)
.dropdown-content sınıfı, gerçek açılır içeriği tutar. Varsayılan olarak gizlidir ve üzerine gelindiğinde görüntülenecektir. Minimum genişliğin 160 piksel olarak ayarlandığını unutmayın. Bunu değiştirmekten çekinmeyin.
İpucu: Açılan içeriğin genişliğinin açılır düğme kadar geniş olmasını istiyorsanız, genişliği %100'e ayarlayın (ve küçük ekranlarda kaydırmayı etkinleştirmek için overflow:auto özelliğini de kullanabilirsiniz).
Bir kenarlık kullanmak yerine, açılır menüyü bir "kart" gibi göstermek için box-shadow özelliğini kullanabilirsiniz.
:hover seçicisi, kullanıcı fareyi açılır düğmenin üzerine getirdiğinde açılır menüyü göstermek için kullanılır.

Aşağıya Doğru Açılan Liste

Bu örneğimizde, kullanıcının listeden bir seçenek seçmesini sağlayan bir açılır liste oluşturacağız.

Örnek:

<style>
/* Açılır Düğmeye Stil Verir */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* <div> alanı - açılır içeriği konumlandırmak için gereklidir */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Açılır İçerik (Varsayılan Olarak Gizlidir) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Açılır listenin içindeki bağlantılar */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Fareyle üzerine gelindiğinde açılır bağlantıların rengini değiştirir */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Fareyle üzerine gelindiğinde açılır listeyi gösterir */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Açılır içerik gösterildiğinde açılır düğmenin arka plan rengini değiştirir */
.dropdown:hover .dropbtn {
  background-color: #f00;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Açılır Liste</button>
  <div class="dropdown-content">
    <a href="#">Bağlantı 1</a>
    <a href="#">Bağlantı 2</a>
    <a href="#">Bağlantı 3</a>
  </div>
</div>

Açılır Gezinti Çubuğu

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

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

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Ana Sayfa</a></li>
  <li><a href="#news">Haberler</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Açılır Liste</a>
    <div class="dropdown-content">
      <a href="#">Bağlantı 1</a>
      <a href="#">Bağlantı 2</a>
      <a href="#">Bağlantı 3</a>
    </div>
  </li>
</ul>

</body>
</html>