<div class="notification">
<p>Open the menu and click on the underlined links to reveal the sliding submenus</p>
<p>See <a href="https://codepen.io/tutsplus/pen/zYaWXdM" target="_blank">Version 2 (with dynamic "Back" text)</a></p>
</div>
<header class="page-header">
<nav>
<div class="header-bar">
<button class="toggle-menu" type="button">
MENU
</button>
<a href="" class="brand">BRAND</a>
<a href="" class="social" target="_blank" title="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg>
</a>
</div>
<div class="menu-wrapper">
<div class="list-wrapper">
<ul class="menu level-1">
<li>
<a href="" class="nested">Categories </a>
<ul class="sub-menu level-2">
<li>
<a href="" class="nested">Living Room </a>
<ul class="sub-menu level-3">
<li>
<a href="">Oracle 1</a>
</li>
<li>
<a href="">Host 00</a>
</li>
<li>
<a href="">Tiny 12</a>
</li>
<li>
<a href="">Bright 39</a>
</li>
<li>
<a href="">Exclusion 229</a>
</li>
</ul>
</li>
<li>
<a href="">Dining Room</a>
</li>
<li>
<a href="">Bedroom</a>
</li>
<li>
<a href="">Lighting</a>
</li>
<li>
<a href="">Outdoor</a>
</li>
<li>
<a href="">Office</a>
</li>
</ul>
</li>
<li>
<a href="" class="nested">Featured Products</a>
<ul class="sub-menu level-2">
<li>
<a href="">Sofa 1</a>
</li>
<li>
<a href="">Chair 11</a>
</li>
<li>
<a href="">Train 21</a>
</li>
<li>
<a href="">Clumb 52</a>
</li>
<li>
<a href="">Geo 29</a>
</li>
<li>
<a href="">Star</a>
</li>
</ul>
</li>
<li>
<a href="" class="nested">Company</a>
<ul class="sub-menu level-2">
<li>
<a href="">History</a>
</li>
<li>
<a href="">Team</a>
</li>
<li>
<a href="" class="nested">Careers</a>
<ul class="sub-menu level-3">
<li>
<a href="">Sales Assistant</a>
</li>
<li>
<a href="">Graphic Designer</a>
</li>
<li>
<a href="">Marketing Specialist</a>
</li>
<li>
<a href="">Storekeeper</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Clients</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</div>
<div class="list-wrapper">
<button type="button" class="back-one-level">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
</svg>
<span>Back</span>
</button>
<div class="sub-menu-wrapper"></div>
</div>
<div class="list-wrapper">
<button type="button" class="back-one-level">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
</svg>
<span>Back</span>
</button>
<div class="sub-menu-wrapper"></div>
</div>
</div>
</nav>
</header>
<!-- CONTENT HERE -->
<main class="page-main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam harum libero, quod perspiciatis eos, excepturi rerum nostrum fugit incidunt beatae hic quos mollitia optio, consequatur corrupti nisi repudiandae doloribus ex.</p>
</main>
<footer class="page-footer">
<span>made by </span>
<a href="https://georgemartsoukos.com/" target="_blank">
<img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
</a>
</footer>/* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--white: #fff;
--yellow: #fffbbc;
--orange: #d1b39f;
--header-bar-bg: #333;
--menu-bg: #292929;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
button {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 100%;
}
a {
text-decoration: none;
}
button,
a {
color: inherit;
}
body {
font: 20px / 28px "Noto Sans Mono", monospace;
background: var(--orange);
}
.notification {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 5px 15px;
text-align: center;
z-index: 1;
background: var(--yellow);
}
.notification a {
text-decoration: underline;
}
@media (max-width: 700px) {
.notification {
display: none;
}
}
/* HEADER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 600px;
margin: 0 auto;
color: var(--white);
}
.page-header .header-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 0 20px;
background: var(--header-bar-bg);
}
.page-header .header-bar .brand {
font-weight: bold;
}
.page-header .header-bar .social {
display: flex;
}
.page-header .header-bar svg {
fill: var(--white);
}
.page-header .menu-wrapper {
display: none;
position: absolute;
top: 60px;
left: 0;
width: 100%;
height: calc(100vh - 60px);
overflow: hidden;
}
.page-header .menu-wrapper.is-visible {
display: block;
}
.page-header .list-wrapper {
height: 100%;
padding: 30px 20px;
overflow-y: auto;
background: var(--menu-bg);
}
.page-header .list-wrapper:nth-child(2),
.page-header .list-wrapper:nth-child(3) {
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translateX(100%);
backface-visibility: hidden;
transition: transform 0.5s;
}
.page-header .list-wrapper:nth-child(2).is-visible,
.page-header .list-wrapper:nth-child(3).is-visible {
transform: none;
}
.page-header .list-wrapper:nth-child(1) > ul > li > .sub-menu,
.page-header .list-wrapper:nth-child(2) .level-3 {
display: none;
}
.page-header .menu-wrapper li + li {
margin-top: 20px;
}
.page-header .menu-wrapper a {
display: inline-block;
position: relative;
padding: 5px 0;
}
.page-header .menu-wrapper a.nested {
text-decoration: underline;
}
.page-header .menu-wrapper a:hover,
.page-header .menu-wrapper a.is-active {
color: var(--orange);
}
.page-header .menu-wrapper a:hover::before,
.page-header .menu-wrapper a.is-active::before {
content: "✦";
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
color: var(--orange);
}
.page-header .back-one-level {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.page-header .back-one-level svg {
fill: var(--white);
margin-right: 10px;
}
/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-main {
max-width: 600px;
width: 100%;
padding: 0 15px;
margin: 100px auto 0;
}
/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
position: fixed;
right: 0;
bottom: 60px;
display: flex;
align-items: center;
font-size: 1rem;
padding: 5px;
background: rgba(255, 255, 255, 0.65);
}
.page-footer a {
display: flex;
margin-left: 9px;
}
const pageHeader = document.querySelector(".page-header");
const toggleMenu = pageHeader.querySelector(".toggle-menu");
const menuWrapper = pageHeader.querySelector(".menu-wrapper");
const level1Links = pageHeader.querySelectorAll(".level-1 > li > a");
const listWrapper2 = pageHeader.querySelector(".list-wrapper:nth-child(2)");
const listWrapper3 = pageHeader.querySelector(".list-wrapper:nth-child(3)");
const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
toggleMenu.addEventListener("click", function () {
menuWrapper.classList.toggle(isVisibleClass);
if (!this.classList.contains(isVisibleClass)) {
listWrapper2.classList.remove(isVisibleClass);
listWrapper3.classList.remove(isVisibleClass);
const menuLinks = menuWrapper.querySelectorAll("a");
for (const menuLink of menuLinks) {
menuLink.classList.remove(isActiveClass);
}
}
});
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
const siblingList = level1Link.nextElementSibling;
if (siblingList) {
e.preventDefault();
this.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper2.innerHTML = "";
subMenuWrapper2.append(cloneSiblingList);
listWrapper2.classList.add(isVisibleClass);
}
});
}
listWrapper2.addEventListener("click", function (e) {
const target = e.target;
if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
const siblingList = target.nextElementSibling;
e.preventDefault();
target.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}
});
for (const backOneLevelBtn of backOneLevelBtns) {
backOneLevelBtn.addEventListener("click", function () {
const parent = this.closest(".list-wrapper");
parent.classList.remove(isVisibleClass);
parent.previousElementSibling
.querySelector(".is-active")
.classList.remove(isActiveClass);
});
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.