HTML Multilevel Accordion Navigation Menu

HTML Multilevel Accordion Navigation Menu
Code Snippet:Multi-Level Accordion Menu (WIP)
Author: Russell
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 1,360
License: MIT
Edit Code online: View on CodePen
Read More

This HTML code snippet helps you to create a Multilevel Accordion Navigation Menu. It creates a collapsible menu with multiple levels of submenus. It uses Bootstrap icons and CSS to style the menu. This menu is designed to work both with and without JavaScript, making it versatile for different website setups.

You can use this code for website navigation menus, especially if your site has multiple sections or pages. It helps improve user experience by organizing content into collapsible levels.

How to Create Multilevel Accordion Navigation Menu Using HTML CSS & JS

1. First of all, load the Bootstrap Icons by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css'>

2. Copy and paste the following HTML code into your HTML document. Place it where you want the menu to appear. Replace the sample links with your website links:

<!-- Note works with or without JS -->
<nav id='accordion' class='dropdown'>
  <input
    type='checkbox'
    id='toggle-01'
    class='toggle burger-toggle'
    hidden
  >
  <label for='toggle-01' class='toggle-button'>
    <div class='burger'>
      <div class='line1'></div>
      <div class='line2'></div>
      <div class='line3'></div>
    </div>
  </label>
  <ul class='dropdown-menu lvl-1'>
    <li class='item'><a><i class='bi bi-house-fill'></i> Home</a></li>
    <li class='item'><a>About</a></li>
    <li class='dropdown'>
      <input type='checkbox' id='toggle-02' class='toggle' hidden>
      <label for='toggle-02' class='toggle-button caret'><i class='bi bi-image'></i> Gallery </label>
      <ul class='dropdown-menu lvl-2'>
        <li class='dropdown'>
          <input type='checkbox' id='toggle-03' class='toggle' hidden>
          <label for='toggle-03' class='toggle-button caret'>3D Graphics </label>
          <ul class='dropdown-menu lvl-3'>
            <li class='item'><a>Characters</a></li>
            <li class='item'><a>Landscapes</a></li>
          </ul>
        </li>
        <li class='item'><a>2D Illustration</a></li>
      </ul>
    </li>
    <li class='dropdown'>
      <input type='checkbox' id='toggle-04' class='toggle' hidden>
      <label for='toggle-04' class='toggle-button caret'><i class='bi bi-code-slash'></i> Web Development </label>
      <ul class='dropdown-menu lvl-2'>
        <li class='item'><a>Articles</a></li>
        <li class='dropdown'>
          <input type='checkbox' id='toggle-05' class='toggle' hidden>
          <label for='toggle-05' class='toggle-button caret'>Projects </label>
          <ul class='dropdown-menu lvl-3'>
            <li class='item'><a>JS</a></li>
            <li class='item'><a>CSS</a></li>
          </ul>
        </li>
        <li class='item'><a>Tutorials</a></li>
      </ul>
    </li>
    <li class='item'><a><i class='bi bi-envelope-fill'></i> Contact</a></li>
  </ul>
</nav>

3. Similarly, copy and paste the CSS code into your HTML document or include it in a separate CSS file. This code provides styling for the menu. You can modify the CSS variables to change the menu’s appearance.

@charset "UTF-8";
@import "https://assets.codepen.io/3351103/__reset.css";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");
:root {
  --nav-bg-color: rgb(21, 21, 21);
  --toggle-color: rgb(221, 221, 221);
  --toggle-bg-color: rgb(40 40 40);
  --nav-link-bg-color-01: rgb(50 50 50);
  --nav-link-bg-color-02: rgb(30 30 30);
  --nav-link-bg-color-03: rgb(15 15 15);
  --nav-link-color: hsl(0 0% 90%);
  --nav-secondary-color: rgb(255, 193, 7);
  --nav-caret-color: var(--nav-secondary-color);
  --nav-hover-color: hsl(0 0% 90%);
  --nav-bg-hover-color-01: rgb(209, 59, 45);
  --ff-body: "Poppins", sans-serif;
  --ff-nav: "Poppins", sans-serif;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fs-300: .9rem
  --fs-400: .95rem;
  --fs-500: 1.2rem;
  --calc-height: auto;
  --calc-transition-delay: 500ms;
  --dropdown-indent: 0px;
  --burger-width: 40px;
  --mobile-break: 480px;
}

body {
  display: grid;
  justify-items: center;
  height: 100vh;
  padding: 1rem;
  font-family: var(--ff-body);
  font-weight: var(--fw-300);
  font-size: var(--fs-400);
  background-color: var(--nav-bg-color);
}

ul {
  list-style: none;
  margin: 0;
}

a {
  cursor: pointer;
}

#accordion {
  width: 100%;
  max-width: var(--mobile-break);
  height: fit-content;
  color: var(--nav-link-color);
  font-size: var(--fs-300);
  /* dropdown links level 1 */
  /* dropdown links level 2 */
  /* dropdown links level 3 */
}
#accordion [hidden] {
  margin: 0;
}
#accordion a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--ff-nav);
  text-align: center;
  color: var(--nav-link-color);
  transition: color 150ms, background-color 150ms;
}
#accordion ul > li > a {
  background-color: var(--nav-link-bg-color-01);
}
#accordion ul ul > li > a {
  background-color: var(--nav-link-bg-color-02);
}
#accordion ul ul ul > li > a {
  background-color: var(--nav-link-bg-color-03);
}
#accordion ul > li > a:hover {
  color: var(--nav-hover-color);
  background-color: var(--nav-bg-hover-color-01);
}
#accordion .toggle-button {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--toggle-color);
  background-color: var(--toggle-bg-color);
  cursor: pointer;
  user-select: none;
}
#accordion .dropdown-menu {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-left: var(--dropdown-indent);
  transition: height var(--calc-transition-delay);
}
#accordion .toggle:checked ~ .dropdown-menu {
  height: var(--calc-height);
}
#accordion .caret:after {
  content: "▼";
  font-size: 0.9rem;
  line-height: 1;
  display: inline-block;
  color: var(--nav-caret-color);
  transform: rotatez(-90deg);
  transition: transform 150ms linear;
}
#accordion .toggle:checked + .caret:after {
  transform: rotatez(0deg);
}

/* ---- burger toggle ----- */
nav .burger {
  display: grid;
  place-content: center;
  width: var(--burger-width);
  height: calc(var(--burger-width) * .8);
  border: 2px solid var(--nav-secondary-color);
  border-radius: 4px;
  cursor: pointer;
}
nav .burger [class^=line] {
  width: 26px;
  height: 2px;
  margin-bottom: 5px;
  background-color: var(--nav-secondary-color);
  transition: transform 0.2s ease-out;
}
nav .burger .line3 {
  margin-bottom: 0px;
}
nav .burger:hover .line1 {
  transform: translate(0px, 2px);
}
nav .burger:hover .line3 {
  transform: translate(0px, -2px);
}
nav .burger-toggle:checked + .toggle-button .burger .line1 {
  transform: rotate(45deg) translate(5px, 5px);
}
nav .burger-toggle:checked + .toggle-button .burger .line2 {
  opacity: 0;
}
nav .burger-toggle:checked + .toggle-button .burger .line3 {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---- END burger toggle ----- */
/* ---- some custom styling ---- */
#accordion {
  --nav-link-bg-color-01: hsl(200 80% 13%);
  --nav-link-bg-color-02: hsl(200 80% 11%);
  --nav-link-bg-color-03: hsl(200 80% 9%);
  --nav-link-color: hsl(0 0% 90%);
  --nav-secondary-color: hsl(11 100% 65%);
  --nav-caret-color: hsl(11 100% 65%);
  --toggle-bg-color: hsl(200 80% 15%);
  --fs-300: .95rem;
  --burger-width: 36px;
  --mobile-break: 400px;
}
#accordion .burger {
  margin: 0.15rem 0;
}
#accordion a {
  text-align: left;
}
#accordion .bi {
  margin-right: 5px;
}
#accordion .toggle:checked + .toggle-button .bi {
  color: var(--nav-secondary-color);
}
#accordion .lvl-1 a, #accordion .lvl-1 .toggle-button {
  padding-left: 1.5rem;
}
#accordion .lvl-2 a, #accordion .lvl-2 .toggle-button {
  padding-left: 2.5rem;
}
#accordion .lvl-3 a {
  padding-left: 3.5rem;
}

4. The code includes JavaScript for handling menu interactions. If you want to enable this functionality, ensure that the JavaScript code is placed at the end of the <body> section of your HTML document.

window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;

// searches next siblings for a target element
const findNextSibling = (elem, selector) => {
  while (elem !== null) {
    elem = elem.nextElementSibling
    if (elem.matches(selector)) return elem
  }
  return elem
}

// if unable to toggle between a and b or b and a
// will return false
const toggleBetween = (elem, a, b) => {
  return elem.classList.replace(a, b) || elem.classList.replace(b, a)
}

// A recursive function to set the total height of an open dropdown
// based on the heights of its child elements
const calcHeights = function (elems) {
  let height = 0
  
  // argument for first call will be a single root element
  // recursive calls will be children
  if (elems instanceof Element) elems = [elems]

  for (const elem of elems) {
    
    // only include calculations for opened dropdowns
    if (elem.matches('.dropdown, .open')) {
      const parentHeight = calcHeights(elem.children)

      if (elem.matches('.open')) {
        elem.style.setProperty('--calc-height', parentHeight + 'px')
      }

      height += parentHeight     
    } else {
      // getBoundingClientRect gives a more accurate height
      const elemHeight = elem.getBoundingClientRect().height
      
      height += (elem.matches('.closed')) ? 0 : elemHeight
    }
  }
  return height
}

const toggleMenu = (dropdown, rootElem) => { 
  if (!toggleBetween(dropdown, 'open', 'closed')) {
    // first time clicking on this dropdown
    dropdown.classList.add('open')
  }
  calcHeights(rootElem)
}

window.addEventListener('DOMContentLoaded', () => {
  const rootElem = document.querySelector('#accordion .dropdown-menu')
  
  // change --calc-height from auto to 0 for initial transition
  document
    .documentElement
    .style.setProperty('--calc-height', '0px')
  
  document
    .querySelectorAll('#accordion .toggle')
    .forEach((toggle) => {
      const dropdown = findNextSibling(toggle, '.dropdown-menu')
      
      toggle.addEventListener('click', (event) => {
        toggleMenu(dropdown, rootElem)
      })
    })
  
    document.querySelector('#toggle-01').click()
})

That’s all! hopefully, you have successfully created the Multilevel Accordion Navigation Menu using HTML, CSS, and JavaScript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X