Membuat Menu Dropdown (Sub Menu) dengan Linklist dan Javascript

Membuat Menu Dropdown dengan Linklist dan Javascript
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.

Comments (4)

How to use
  • Masukan kode atau url dalam textarea.

  • Pilih salah satu button yang ingin digunakan.

  • Tinggal salin(ctrl + c) atau klik button salin.

  • Terakhir tempel kode yang disalin tadi dalam kolom komentar (hanya bisa komentar blogger saja).

Leave a comment in Indonesian or English.