Cara membuat: Tombol "More" di navigasi

Belajar cara membuat tombol "More".

Buat navigasi menu turun

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

Langkah pertama - Tambahkan HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <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>

Pengertian contoh:

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

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

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

Langkah kedua - Tambahkan CSS:

/* Wadah 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;
}
/* 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-family: inherit; /* Penting untuk penjajaran vertikal di ponsel */
  margin: 0; /* penting untuk penjajaran vertikal di ponsel */
}
/* Menambahkan warna latar merah untuk tautan navigasi saat mouse diatas */
.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 untuk tautan menu tarik turun saat mouse diatas */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Menampilkan menu tarik turun saat mouse diatas */
.dropdown:hover .dropdown-content {
  display: block;
}

Coba sendiri

Pengertian contoh:

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

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

.dropdown Kelas adalah .dropdown-content kontainer. Karena ini adalah elemen <div>, bukan elemen <a>, 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 muncul saat mouse berada di atas (lihat di bawah). Perhatikan, lebar minimum diatur menjadi 160px. Cobalah mengubah pengaturan ini.

Kami tidak menggunakan garis batas, melainkan box-shadow Atribut, membuat 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 mouse ke tombol menu tarik turun.

Halaman yang berhubungan

Tutorial:Menu tarik turun CSS

Tutorial:Bagaimana membuat menu tarik turun yang dapat diklik

Tutorial:Navigasi bar CSS

Tutorial:Bagaimana membuat navigasi atas yang responsif