Bagaimana membuat: tombol "Lebih Banyak" dalam navigasi

Belajar cara membuat tombol "Lebih Banyak".

Buat navigasi menu jatuh

Ketika pengguna memindahkan tetikus ke dalam elemen navigasi, menu jatuh akan muncul.

Kesempatan pertama - Tambahkan HTML:

<div class="navbar">
  <a href="#home">Rumah</a>
  <a href="#news">Berita</a>
  <div class="dropdown">
    <button class="dropbtn">Lebih Banyak
      <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 jatuh, seperti elemen <button>, <a> atau <p>.

Buat menu jatuh dengan elemen kontainer (seperti <div>) dan tambahkan tautan menu jatuh didalamnya.

Gandahkan tombol dan elemen lain dengan elemen <div> untuk memastikan penempatan menu jatuh CSS yang benar.

Kesempatan kedua - Tambahkan CSS:

/* Kontainer 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;
}
/* Kontainer menu jatuh */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Tombol menu jatuh */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Untuk penjeringan vertikal di ponsel sangat penting */
  margin: 0; /* penting untuk penjajaran vertikal di ponsel */
}
/* Menambahkan warna latar belakang merah untuk tautan navigasi saat kursor diarahkan */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Konten menu susun (tersembunyi secara lalai) */
.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 dalam menu susun */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Menambahkan warna latar belakang abu-abu untuk tautan menu susun saat kursor diarahkan */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Menunjukkan menu susun saat kursor diarahkan */
.dropdown:hover .dropdown-content {
  display: block;
}

Coba sendiri

Pengertian contoh:

Kami sudah menetapkan gaya latar belakang warna, margin dalam, dan sebagainya untuk navigasi dan tautan navigasi.

Kami sudah menetapkan gaya latar belakang warna, margin dalam, dan sebagainya untuk tombol menu susun.

.dropdown kelas adalah .dropdown-content wajah. Sebab ini adalah elemen <div>, bukannya elemen <a>, jadi kami mesti membuangnya untuk memastikan ia tetap berada di samping tautan.

.dropdown-content kelas yang mengandungi menu susun sebenarnya. Ini adalah tersembunyi secara lalai dan akan muncul saat kursor diarahkan (lihat di bawah). Perhatikan, lebar minimum diatur menjadi 160px. Silakan ubah pengaturan ini.

Kami tidak menggunakan garisan pinggir, melainkan box-shadow aturan, supaya menu susun kelihatan seperti kartu. z-index Letakkan menu susun di hadapan elemen lain.

:hover Pemilih digunakan untuk menunjukkan menu susun ketika pengguna memindahkan kursor ke tombol menu susun.

Halaman yang berkenaan

Tutorial:CSS 下拉菜单

Tutorial:Bagaimana untuk membuat menu susun yang boleh d klik

Tutorial:CSS 导航栏

Tutorial:Bagaimana untuk membuat navigasi atas yang responsif