
Get Started > Details
- Details
- Install
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. |
Makasih.
ReplyDeletesama-sama.
DeleteCan you put this is animedex?
DeleteAll themes can be installed, it depends on you. Before installing, you must master the basics of HTML and CSS because I will not explain them again.
Delete