Author: | bedimcode |
---|---|
Views Total: | 14,942 views |
Official Page: | Go to website |
Last Update: | March 3, 2021 |
License: | MIT |
Preview:

Description:
A responsive sidebar menu with multi-level sub-menus written in plain JavaScript and CSS.
The sidebar menu is displayed in Compact mode on page load and will expand to Full mode when hovering over.
It collapses the sidebar into an off-canvas navigation on mobile, and your visitors are able to reveal the menu by clicking the hamburger button.
How to use it:
1. Create the HTML for the sidebar menu. By default, we use boxicons for the menu icons.
<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. Add the hamburger toggle button to your header.
<header class="header"> ... <div class="header__toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div> </div> </header>
3. The necessary CSS styles for the sidebar menu.
/*========== 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. The main JavaScript to activate the sidebar menu.
/*==================== 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))
More Previews:

Mobile View

Compact Mode