Responsive Sidebar Menu With SubMenu HTML CSS and JavaScript

Beautiful sidebar menu with submenu, which is hidden and displayed, using HTML CSS and JavaScript.

This sidebar collapses in navigating off the panel on mobile, and visitors can unfold the menu by tapping the hamburger button.

How to make use of 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 needed 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);
}

Must Read – [Flyout] Pure CSS Responsive Off-canvas Hamburger Menu

4. The most important JavaScript to activate is 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))

Read More – 

Create a Hamburger Website Navigation With Menu Rotation
A Small Framework for Creating a Beautiful Mobile Navigation Header | mhead.js


See Demo And Download

Official Website(bedimcode): Click Here

This superior jQuery/javascript plugin is developed by bedimcode. For extra Advanced Usage, please go to the official website.

Share