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.
Similar Code Snippets:
- Sticky Navigation Menu with Smooth Scrolling
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.