Cara membuat: navigasi menu tarik turun

Belajar cara membuat navigasi menu tarik turun.

Buat navigasi menu tarik turun

Ketika pengguna memindahkan mouse ke elemen di dalam navigasi, menu tarik turun akan muncul.

Kステップ 1 - 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 tarik turun, seperti elemen <button>, <a>, atau <p>.

Buat menu tarik turun dengan menggunakan elemen pengelompokan (seperti <div>) dan tambahkan tautan menu tarik turun didalamnya.

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

Kステップ 2 - Tambahkan CSS:

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

Coba sendiri

Contoh penjelasan:

Kami telah menetapkan gaya seperti warna latar, margin dalam untuk navigasi dan tautan navigasi.

Kami telah menetapkan gaya seperti warna latar, margin dalam untuk tombol menu tarik turun.

.dropdown Kelas adalah .dropdown-content wajah. Karena ini adalah elemen <div>, bukan elemen <a>, kita 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 muncul saat mouse hover (lihat di bawah). Perhatikan, lebar minimum diatur menjadi 160px. Andai saja merubah pengaturan ini.

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

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

Menu tarik turun yang dapat di klik di dalam navigasi

Coba sendiri

Halaman yang berhubungan

Tutorial:Daftar tarik turun CSS

Tutorial:Bagaimana membuat menu tarik turun yang dapat di klik

Tutorial:Navigasi bar CSS

Tutorial:Bagaimana membuat navigasi atas yang responsif