Responsive Multi-level Sidebar Menu With JavaScript/CSS

Category: Javascript , Menu & Navigation , Recommended | March 3, 2021
Author:bedimcode
Views Total:3,498 views
Official Page:Go to website
Last Update:March 3, 2021
License:MIT

Preview:

Responsive Multi-level Sidebar Menu With JavaScript/CSS

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:

Responsive Multi-level Sidebar Menu Mobile View

Mobile View

Responsive Multi-level Sidebar Menu Compact Mode

Compact Mode

You Might Be Interested In:


Leave a Reply