rasgane

Membuat Menu Dropdown (Sub Menu) dengan Linklist dan Javascript

Membuat Menu Dropdown dengan Linklist dan Javascript

Request Wernayasa dan semua.

  • Results
  • Code
<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Anime List</a></li>
  <li><a href="#">_Sub Menu 1</a></li>
  <li><a href="#">__Isi Sub Menu 1</a></li>
  <li><a href="#">__Isi Sub Menu 2</a></li>
  <li><a href="#">__Isi Sub Menu 3</a></li>
  <li><a href="#">Report 1</a></li>
  <li><a href="#">_Sub Menu 2</a></li>
  <li><a href="#">__Isi Sub Menu 4</a></li>
  <li><a href="#">_Sub Menu 3</a></li>
  <li><a href="#">__Isi Sub Menu 5</a></li>
  <li><a href="#">__Isi Sub Menu 6</a></li>
  <li><a href="#">__Isi Sub Menu 7</a></li>
  <li><a href="#">__Isi Sub Menu 8</a></li>
  <li><a href="#">Report 3</a></li>
</ul>

Tinggal gabungkan saja dengan Widget Linklist atau juga bisa tambahkan class menu pada tag <ul>.

/* Gaya dasar untuk menu utama */
.menu {
  list-style: none;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 20px; /* Jarak antara item menu */
}

.menu a {
  text-decoration: none;
  color: #333; /* Warna teks */
}

/* Gaya untuk submenu */
.sub_menu ul {
  display: none; /* Sembunyikan submenu secara default */
  position: absolute;
  background-color: #fff; /* Warna latar belakang submenu */
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}

.sub_menu:hover ul {
  display: block; /* Tampilkan submenu saat mengarahkan kursor ke submenu */
}

.sub_menu_main {
  margin: 10px 0; /* Jarak antara item submenu */
}

.sub_menu_main a {
  color: #666; /* Warna teks submenu */
  text-decoration: none;
}

.sub_menu_main a:hover {
  color: #000; /* Warna teks saat mengarahkan kursor ke submenu */
}

Untuk bagian Css bisa di sesuaikan lagi sesuai kebutuhan.

const menuItems=document.querySelectorAll(".menu li");let currentSubMenu=null;menuItems.forEach(e=>{let t=e.querySelector("a").textContent;if(t.startsWith("__"))e.classList.add("sub_menu_main"),e.querySelector("a").innerHTML=`<span>${t.substr(2)}</span>`,currentSubMenu&&currentSubMenu.querySelector("ul").appendChild(e);else if(t.startsWith("_")){var u=t.substr(1);if(e.innerHTML=`<span>${u}</span>`,e.classList.add("sub_menu"),currentSubMenu===e)e.querySelector("ul").remove();else{var r=document.createElement("ul");e.appendChild(r),currentSubMenu=e}}});var subMenuItems=document.querySelectorAll("li.sub_menu");document.addEventListener("click",function(e){subMenuItems.forEach(function(t){var u=t.querySelector("span");e.target===u||e.target===t?t.classList.toggle("active"):t.classList.remove("active")})});

Supaya tidak terjadi delay load saya sarankan letakkan javascript dibawah tag <ul> yang kalian buat tadi.

<ul class="menu">
</ul>
<!-- kode javascript is here -->
pin
Comment Yukine
Yukine Juni 04, 2023
Test Pin Comment Blogger

Komentar

Untuk Tutorial Pemasangan License bisa gunakan <i rel='Tutor1'>Tutor</i>
Untuk Cek Member bisa gunakan <i rel='CekMember'>Cek Member</i>
Untuk Menyisipkan Gambar bisa gunakan <i rel='img'>URL_IMAGE</i>
Untuk Menyisipkan Video/Iframe bisa gunakan <i rel='video'>URL_video</i>
Untuk Menyisipkan syntax highlighter bisa gunakan <i rel='kode'>Kode yang sudah di parse</i>