Cara membuat: navigasi menu turun

Halaman sebelumnya 级联下拉菜单
下一页侧边导航栏中的下拉菜单

Belajar cara membuat navigasi menu turun.

Menu turun di navigasi

Buat navigasi menu turun

Ketika pengguna memindahkan tetikus ke atas elemen di dalam navigasi, menu turun akan muncul.

Kesempatan pertama - Tambahkan HTML:

<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">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

Contoh penjelasan:

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

Buat menu turun dengan elemen penampung (seperti <div>) dan tambahkan link menu turun didalamnya.

Gunakan elemen <div> untuk melengkapkan tombol dan elemen lainnya untuk menempatkan menu turun dengan benar.

Kesempatan kedua - Tambahkan CSS:

/* Penampung navigasi */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Link di bawah navigasi */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Penampung turun */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Tombol turun */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /*Untuk penarikan vertikal di ponsel penting*/
  margin: 0; /* penting untuk penarikan vertikal di ponsel */
}
/* Menambahkan warna latar belakang merah ke tautan navigasi saat tetikus diarahkan */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Konten menu tarik turun (dalam keadaan tersembunyi secara default) */
.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;
}
/* Tautan di dalam menu tarik turun */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Menambahkan warna latar belakang abu-abu ke tautan menu tarik turun saat tetikus diarahkan */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Menampilkan menu tarik turun saat tetikus diarahkan */
.dropdown:hover .dropdown-content {
  display: block;
}

Coba sendiri

Contoh penjelasan:

Kami telah mensetting gaya latar belakang, margin dalam, dan lainnya untuk navigasi dan tautan navigasi.

Kami telah mensetting gaya latar belakang, margin dalam, dan lainnya untuk tombol menu tarik turun.

.dropdown Kelas adalah .dropdown-content kontainer. Karena ini adalah elemen <div>, bukan elemen <a>, maka kami harus membuangnya untuk memastikan bahwa ia tetap berada di samping tautan.

.dropdown-content Kelas yang mengandung menu tarik turun yang sebenarnya. Ini secara default tersembunyi dan akan ditampilkan saat tetikus diarahkan (lihat di bawah). Perhatikan, lebar minimum diatur menjadi 160px. Andai saja ubah pengaturan ini.

Kami tidak menggunakan garis batas, melainkan box-shadow Atribut, sehingga menu tarik turun terlihat seperti kartu. z-index Letakkan menu tarik turun di depan elemen lain.

:hover Pemilih digunakan untuk menampilkan menu tarik turun saat pengguna memindahkan tetikus ke tombol menu tarik turun.