Raja Kode - Sebuah menu sidebar responsif dengan sub-menu multi-level yang dibuat hanya menggunakan JavaScript dan CSS biasa.
Menu sidebar ini ditampilkan dalam mode Compact saat halaman dimuat dan akan meng-expand ke mode Penuh saat mengarahkan kursor ke menu.
Menu ini akan menciut ketika di tampilan mobile, dan pengunjung harus mengklik memunculkan menu tersebut dengan mengklik tombol hamburger.
Cara Memasang
1. Buat HTML untuk menu sidebar. Secara default, saya menggunakan boxicons untuk ikon menu.
<div class="nav" id="navbar">
<nav class="nav__container">
<div>
<a href="#" class="nav__link nav__logo">
<i class='bx bxs-disc nav__icon' ></i>
<span class="nav__logo-name">Bedimcode</span>
</a>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">Profile</h3>
<a href="#" class="nav__link active">
<i class='bx bx-home nav__icon' ></i>
<span class="nav__name">Home</span>
</a>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon' ></i>
<span class="nav__name">Profile</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Passwords</a>
<a href="#" class="nav__dropdown-item">Mail</a>
<a href="#" class="nav__dropdown-item">Accounts</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-message-rounded nav__icon' ></i>
<span class="nav__name">Messages</span>
</a>
</div>
<div class="nav__items">
<h3 class="nav__subtitle">Menu</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-bell nav__icon' ></i>
<span class="nav__name">Notifications</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Blocked</a>
<a href="#" class="nav__dropdown-item">Silenced</a>
<a href="#" class="nav__dropdown-item">Publish</a>
<a href="#" class="nav__dropdown-item">Program</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-compass nav__icon' ></i>
<span class="nav__name">Explore</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon' ></i>
<span class="nav__name">Saved</span>
</a>
</div>
</div>
</div>
<a href="#" class="nav__link nav__logout">
<i class='bx bx-log-out nav__icon' ></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
2. Tambahkan tombol hamburger ke header blog Kamu
<header class="header">
...
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
</div>
</header>
.3. CSS yang diperlukan untuk menu sidebar.
/*========== VARIABLES CSS ==========*/
:root {
--header-height: 3.5rem;
--nav-width: 219px;
/*========== Colors ==========*/
--first-color: #6923D0;
--first-color-light: #F4F0FA;
--title-color: #19181B;
--text-color: #58555E;
--text-color-light: #A5A1AA;
--body-color: #F9F6FD;
--container-color: #FAFAFA;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-fixed: 100;
}
.nav {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: var(--container-color);
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
z-index: var(--z-fixed);
transition: .4s;
}
.nav__container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem;
overflow: auto;
scrollbar-width: none; /* For mozilla */
}
/* For Google Chrome and others */
.nav__container::-webkit-scrollbar {
display: none;
}
.nav__logo {
font-weight: var(--font-semi-bold);
margin-bottom: 2.5rem;
}
.nav__list,
.nav__items {
display: grid;
}
.nav__list {
row-gap: 2.5rem;
}
.nav__items {
row-gap: 1.5rem;
}
.nav__subtitle {
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
.nav__link {
display: flex;
align-items: center;
color: var(--text-color);
}
.nav__link:hover {
color: var(--first-color);
}
.nav__icon {
font-size: 1.2rem;
margin-right: .5rem;
}
.nav__name {
font-size: var(--small-font-size);
font-weight: var(--font-medium);
white-space: nowrap;
}
.nav__logout {
margin-top: 5rem;
}
/* Dropdown */
.nav__dropdown {
overflow: hidden;
max-height: 21px;
transition: .4s ease-in-out;
}
.nav__dropdown-collapse {
background-color: var(--first-color-light);
border-radius: .25rem;
margin-top: 1rem;
}
.nav__dropdown-content {
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
}
.nav__dropdown-item {
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
}
.nav__dropdown-item:hover {
color: var(--first-color);
}
.nav__dropdown-icon {
margin-left: auto;
transition: .4s;
}
/* Show dropdown collapse */
.nav__dropdown:hover {
max-height: 100rem;
}
/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
/*===== Show menu =====*/
.show-menu {
left: 0;
}
/*===== Active link =====*/
.active {
color: var(--first-color);
}
4. JavaScript untuk mengaktifkan menu sidebar.
/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
const toggleBtn = document.getElementById(headerToggle),
nav = document.getElementById(navbarId)
// Validate that variables exist
if(headerToggle && navbarId){
toggleBtn.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
// change icon
toggleBtn.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','navbar')
/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))