Bagaimana membuat: samping daftar pilihan

Halaman sebelumnya Tombol pilihan di bagian atas navigasi
Halaman berikutnya Breadcrumbs navigasi yang dapat berubah berdasarkan konten

Belajar bagaimana menambahkan daftar pilihan di navigasi samping.

Daftar pilihan di navigasi samping

Buat daftar pilihan samping

Langkah pertama - Tambahkan HTML：

<div class="sidenav">
  <a href="#about">Tentang</a>
  <a href="#services">Layanan</a>
  <a href="#clients">Klien</a>
  <a href="#contact">Kontak</a>
  <button class="dropdown-btn">Daftar Turun
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Tautan 1</a>
    <a href="#">Tautan 2</a>
    <a href="#">Tautan 3</a>
  </div>
  <a href="#contact">Cari</a>
</div>

Penjelasan contoh:

Buka menu menurun dengan menggunakan elemen seperti <button>, <a> atau elemen <p>.

Gunakan elemen wadah (seperti <div>) untuk membuat menu menurun, dan tambahkan tautan menu menurun didalamnya. Kita akan menggunakan gaya yang sama untuk semua tautan didalam samping.

Langkah kedua - Tambahkan CSS:

/* Navigasi samping yang tetap, penuh tinggi */
.sidenav {
  tinggi: 100%;
  lebar: 200px;
  posisi: tetap;
  indeks-z: 1;
  atas: 0;
  kiri: 0;
  warna-latar-belakang: #111;
  keluar-panjang: tak ada;
  tinggi-atas: 20px;
}
/* Atur gaya tautan samping dan tombol menurunkan */
.sidenav a, .dropdown-btn {
  isi: 6px 8px 6px 16px;
  dekorasi-tekst: tak ada;
  ukuran-font: 20px;
  warna: #818181;
  tampil: blok;
  batas: tak ada;
  latar-belakang: tak ada;
  lebar:100%;
  penyesuaian-tekst: kiri;
  penyangga: tangan;
  garis-tulisan: tak ada;
}
/* Sembunyikan outline saat mouse berada diatas */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
/* Konten utama */
.main {
  margin-left: 200px; /* Sama dengan lebar sidebar */
  font-size: 20px; /* Besar teks untuk mengaktifkan geser */
  padding: 0px 10px;
}
/* Tambahkan kelas aktif untuk tombol pilihan yang aktif */
.active {
  background-color: green;
  color: white;
}
/* Kontainer tombol pilihan (default tersembunyi). Pilihan: Tambahkan warna latar belakang yang lebih terang dan beberapa margin kiri untuk mengubah desain */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}
/* Pilihan: Tetapkan gaya ikon panah ke bawah */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

Coba sendiri

Tahap ketiga - Tambahkan JavaScript:

/* Melintasi semua tombol pilihan untuk mengantarkan dan menampilkan kandungan tombol pilihan - ini memungkinkan pengguna untuk memiliki beberapa tombol pilihan tanpa konflik apapun */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

Coba sendiri