Navigasyon çubuğundaki ‘Daha Fazla’ düğmesi nasıl oluşturulur:

‘Daha Fazla’ düğmesini nasıl oluşturacağınızı öğrenin.

Bir açılır menü geçici çubuğu oluşturun

Kullanıcı, geçici çubuğundaki bir elemente fareyi getirdiğinde bir açılır menü会出现出来。

İlk Adım - HTML Ekle:

<div class="navbar">
  <a href="#home">Ana Sayfa</a>
  <a href="#news">Haberler</a>
  <div class="dropdown">
    <button class="dropbtn">Daha Fazla
      <i class="fa fa-caret-down"></i>
    </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>
</div>

Örnek açıklaması:

Açılır menüyü açmak için herhangi bir element kullanın, örneğin <button>, <a> veya <p> elementi.

Açılır menü oluşturmak için konteyner elementi (örneğin <div>) kullanın ve içinde açılır menü bağlantıları ekleyin.

Düğmeyi ve bir diğer <div> elementini <div> elementi içinde sararak açılır menüyi doğru şekilde konumlamak için kullanın.

İkinci Adım - CSS Ekle:

/* Geçici çubuğu konteyneri */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Geçici çubuğundaki bağlantılar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Açılır menü konteyneri */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Açılır menü düğmesi */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* İPhone'da dikey hizalama için çok önemlidir */
  margin: 0; /* Cep telefonlarındaki dikey hizalama için önemlidir */
}
/* Fareni üzerine getirildiğinde navigasyon bağlantılarına kırmızı arka plan rengi eklenir */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Açılır menü içeriği (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 menü içindeki bağlantılar */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Fareni üzerine getirildiğinde açılır menü bağlantılarına gri arka plan rengi eklenir */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Fareni üzerine getirildiğinde açılır menüyü göster */
.dropdown:hover .dropdown-content {
  display: block;
}

Kişisel olarak deneyin

Örnek açıklaması:

Navigasyon çubuğu ve navigasyon bağlantıları için arka plan rengi, iç boşluk vb. stiller ayarladık.

Açılır menü düğmesi için arka plan rengi, iç boşluk vb. stiller ayarladık.

.dropdown sınıfı .dropdown-content kapısı. Bu bir <div> elementi, <a> elementi değil, bu yüzden bağlantı yanında kalmak için yüzeysel hale getirmemiz gerekiyor.

.dropdown-content sınıfı gerçek açılır menüyü içerir. Varsayılan olarak gizlidir ve fareni üzerine getirildiğinde gösterilir (aşağıda görülebilir). Dikkat edin, en küçük genişlik 160px olarak ayarlanmıştır. Bu ayarı rahatlıkla değiştirebilirsiniz.

Kullanmadık, bunun yerine box-shadow Özelliği, açılır menüyü bir 'kart' gibi görünmesini sağlar. Ayrıca z-index Açılır menüyü diğer elementlerin önüne yerleştirin.

:hover Açılır menüyü, kullanıcı fareyi açılır menü düğmesine götürdüğünde göstermek için kullanılan seçiciler.

İlgili sayfalar

Rehber:CSS 下拉菜单

Rehber:Tıklanabilir açılır menü nasıl oluşturulur

Rehber:CSS 导航栏

Rehber:Yanıt verici üst navigasyon çubuğu nasıl oluşturulur