Cara membuat: Menu besar

Belajar cara membuat menu besar (dropdown menu penuh lebar di navigasi bar).

Buat menu besar

Buat sebuah menu dropdown, yang akan muncul saat pengguna menggerakkan mouse ke elemen di navigasi bar.

Langkah pertama - Tambahkan HTML：

<div class="navbar">
  <a href="#home">Beranda</a>
  <a href="#news">Berita</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Menu Mega</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Kategori 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Kategori 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Kategori 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Contoh penjelasan:

Dapat digunakan elemen apapun untuk membuka menu turun, seperti elemen <button>, <a>, atau <p>.

Gunakan elemen wadah (seperti <div class="dropdown-content">) untuk membuat menu turun, dan tambahkan grid (kolom), kemudian tambahkan tautan menu turun di dalam grid.

Gunakan elemen <div class="dropdown"> untuk meliputi tombol dan elemen wadah (<div class="dropdown-content">) untuk menempatkan menu turun dengan benar menggunakan CSS.

Langkah kedua - Tambahkan CSS:

/* Wadah navigasi */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Tautan dalam navigasi */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Wadah menu turun */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Tombol menu turun */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* penting untuk penjajaran vertikal untuk perangkat mobile */
  margin: 0; /* penting untuk penjajaran vertikal untuk perangkat mobile */
}
/* Menambah warna latar belakang merah bagi tautan navigasi saat dihover mouse */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Konten daftar turun (tersembunyi standar) */
.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;
}
/* Besut judul menu besar (jika perlu) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Menampilkan menu susun saat mouse hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Membuat tiga kolom yang sama lebar dan berlapis, serta berjejer */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Menata gaya untuk tautan di dalam kolom */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Menambahkan warna latar saat mouse hover */
.column a:hover {
  background-color: #ddd;
}
/* Menghapus floating setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Coba sendiri

Contoh penjelasan:

Kami sudah menata warna latar, margin dalam, dan gaya lainnya untuk navigasi dan tautan navigasi.

Kami menata warna latar, margin dalam, dan gaya lainnya untuk tombol menu susun.

.dropdown-content Kelas yang mengandung menu susun yang sebenarnya. Ini secara default disembunyikan dan akan muncul saat mouse hover (lihat di bawah). Ini ditempatkan di bawah tombol menu susun dan lebar disetel menjadi 100%, untuk menutupi seluruh layar.

Kami tidak menggunakan garis bawah, melainkan box-shadow Properti, membuat menu susun terlihat seperti 'kartu'. Kita juga menggunakan z-index Letakkan menu susun di depan elemen lainnya.

:hover Pemilih digunakan untuk menampilkan menu susun saat pengguna menempatkan mouse di atas tombol menu susun.

.column Kelas digunakan untuk membuat tiga kolom berlapis di dalam menu susun (untuk menampilkan kategori yang berbeda).

Halaman yang berhubungan

Tutorial:Menu tarik turun CSS

Tutorial:Bagaimana membuat menu susun yang dapat di klik

Tutorial:Navigasi bar CSS

Tutorial:Bagaimana membuat navigasi atas responsif