Membuat Menu Dropdown (Sub Menu) dengan Linklist dan Javascript - rasgane

Get Started > Details

• Details
• Install

Deskripsi.

Request Wernayasa dan semua.

Cara meng-install.

• Buat Tag ul dengan class menu. Seperti ini

  <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>

• Dan letakan dimana saja sesuai keinginan. Jika ingin mengabungkan dengan widget LinkList tinggal tambahkan class menu pada tag <ul>.
• Salin kode CSS ini dan sesuaikan dengan kebutuhan.

  /* 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 */
  }

• Salin kode Javascript ini.

  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=`${t.substr(2)}`,currentSubMenu&¤tSubMenu.querySelector("ul").appendChild(e);else if(t.startsWith("_")){var u=t.substr(1);if(e.innerHTML=`${u}`,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")})});

• Bungkus kode Javascript dengan ini jika menngunakan Blogger.

  <script>//<![CDATA[
    // Kode Javascript Is Here
  //]]></script>

• dan letakkan dibawah tag <ul> yang kalian buat tadi.

  <ul class="menu">
  ....
  </ul>
  <!-- kode javascript is here -->

Name	Deskripsi
_	Sebagai induk Sub Menu.
__	Sebagai list Sub Menu/Anak Sub menu.