Nasıl Oluşturulur: Büyük Menü

Büyük menü nasıl oluşturulur (navigasyon çubuğundaki tam genişlik açılır menü)?

Büyük Menü Oluşturma

Kullanıcı navigasyon çubuğundaki öğelere fareyi götürdüğünde menünün görüntülenmesini sağlayan bir açılır menü oluşturun.

Adım 1 - HTML Ekle:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Bağlantı 1</a>
          <a href="#">Bağlantı 2</a>
          <a href="#">Bağlantı 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Bağlantı 1</a>
          <a href="#">Bağlantı 2</a>
          <a href="#">Bağlantı 3</a>
        </div>
        <div class="column">
          <h3>Kategori 3</h3>
          <a href="#">Bağlantı 1</a>
          <a href="#">Bağlantı 2</a>
          <a href="#">Bağlantı 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Örnek açıklaması:

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

Açılır menüyü oluşturmak için konteyner elementlerini (örneğin <div class="dropdown-content">) kullanın, ardından grid (sütun) ekleyin ve grid içinde açılır menü bağlantılarını ekleyin.

Açılır menüyü doğru şekilde pozisyonlamak için düğme ve konteyner elementlerini (<div class="dropdown">) kullanarak kaplayın.

İkinci adım - CSS ekleyin:

/* Navigasyon konteyneri */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Navigasyon içindeki 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: inherit; /* Mobil cihazlarda dikey hizalama için çok önemlidir */
  margin: 0; /* Mobil cihazlarda dikey hizalama için çok önemlidir */
}
/* Fareyi üzerine getirdiğinizde navigasyon bağlantısına kırmızı arka plan rengi ekleyin */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Açılır liste içeriği (varsayılan olarak gizlenmiş) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Büyük menü başlığı (ihtiyaç duyulursa) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Fareniyken açılır menüyü gösterir */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Üç eş geniş sütun oluşturur ve yanyana yüzer */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Sütun içindeki bağlantılar için stiller ayarlar */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Fareniyken arka plan rengi ekler */
.column a:hover {
  background-color: #ddd;
}
/* Sütun sonrasını temizler */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Kişisel olarak deneyin

Örnek açıklaması:

Navigasyon panosu 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-content Sınıf gerçek açılır menüyü içerir. Varsayılan olarak gizlidir ve fareniyken gösterilir (aşağıda görülecektir). Açılır menü düğmesinin hemen altında konumlandırılır ve genişliği %100 olarak ayarlanır, böylece tüm ekranı kaplar.

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

:hover Seçici, kullanıcı açılır menü düğmesine fareniyken açılır menüyü gösterir.

.column Sınıf, açılır menü içinde üç yanyana kayan sütun oluşturmak için kullanılır (farklı kategorileri görmek için).

İlgili sayfalar

Tutorial:CSS Açılır Menü

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

Tutorial:CSS Gezinme çubuğu

Tutorial:Yanıt verici üst navigasyon panosu nasıl oluşturulur