CSS Açılır Menü

CSS ile süzülen açılır listeleri oluşturun.

Gösteri: Açılır örnek

Örnek

Aşağıdaki örneğe farenizi taşıyın:

Açılır metin

Hello World!

Bağlantı 1 Bağlantı 2 Bağlantı 3
Görsel:kahve
kahve
Kahve

Temel açılır menü

Kullanıcının elemente fareniğini taşıdığında ortaya çıkan açılır kutuyu oluşturun.

Örnek

<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>
<div class="dropdown">
  <span>Üzerine gelin</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Kişisel Deneyim

Örnek açıklaması:

HTML

Açılır menü içeriğini açmak için herhangi bir element kullanabilirsiniz, örneğin <span> veya <button> elementi.

İndirme içeriğini oluşturmak için konteyner elementleri (örneğin <div>) kullanın ve içine herhangi bir içerik ekleyin.

<div> elementlerini kullanarak bu elementleri etrafına alıp, CSS ile doğru şekilde indirme içeriğini konumlandırın.

CSS

.dropdown sınıfı position:relativeve indirme içeriğini indirme düğmesinin altına yerleştirmek istediğimizde (kullanarak position:absolute) zamanı, bu sınıfın kullanılması gerekir.

.dropdown-content sınıfı gerçek indirme menüsü içeriğini saklar. Öntanımlı olarak gizlidir ve üzerine gelindiğinde görüntülenir (aşağıya bakın). Dikkat edin ki,min-width 160px olarak ayarlanmıştır. Bu ayarı her zaman değiştirebilirsiniz. İpucu: İndirme içeriğinin genişliğinin indirme düğmesinin genişliği ile aynı olmasını istiyorsanız, genişliği %100 olarak ayarlayın (ayarı overflow:auto Küçük ekranlarda kaydırma yapılabilir).

Kullandık CSS box-shadow öznitelik, kenarlık yerine, açılır menü, bir 'kart' gibi görünür.

Kullanıcı, açılır düğmeye fareyi taşıdığında,:hover Seçici, açılır menüyü göstermek için kullanılır.

Açılır menü

Bir açılır menü oluşturun ve kullanıcıların listeden bir seçenek seçmesine izin verin:

Bağlantı 1 Bağlantı 2 Bağlantı 3

Bu örnek, yukarıdaki örnekten benzer, ancak biz aşağı açılır kutusuna bağlantı ekledik ve onun stilini ayarladık:

Örnek

<style>
/* 设置下拉按钮的样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.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);
  z-index: 1;
}
/* 下拉链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 悬停时更改下拉链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 显示下拉内容时，更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<div class="dropdown">
  <button class="dropbtn">Dropdown</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>

Kişisel Deneyim

Sağda hiza olan açılır menü içeriği

Bağlantı 1 Bağlantı 2 Bağlantı 3
Bağlantı 1 Bağlantı 2 Bağlantı 3

Açılır menü soldan sağa değil sağdan sola gitmek istiyorsanız, ekleyin sağ: 0;：

Örnek

.dropdown-content {
  sağ: 0;
}

Kişisel Deneyim

Daha Fazla Örnek

1 - Açılır Görsel

Açılır kutuda görsel ve diğer içerikler nasıl eklenir.

Görsel üzerinde fare işaretini sürükleyin:

kahve
kahve
Kahve

Kişisel Deneyim

2 - Açılır Menü

Navigasyon Çubuğuna Açılır Menü Ekleme Nasıl Yapılır.

Kişisel Deneyim