How to create eye-catching sidebar menu with HTML, CSS, and JS
In this article, you will learn how to create step-by-step a sidebar menu with eye-catching animation using only HTML, CSS, and Javascript.
Subscribe to our Weekly Newsletter
Get the latest frontend development resources delivered straight to your inbox for free.
Explore our latest issue for a sample.
🚀 The Complete Web Developer in 2024
📺 40 hours of video
📚 401+ lessons
💻 10 projects
🎉 Code FRIENDS10 for 10% off
The final result of the Sidebar navigation
See the Pen Untitled by FrontendPlanet (@FrontendPlanet) on CodePen.
Step-by-step guide on how to create a sidebar navigation
Step 1: Create Sidebar HTML container
<div class="sidebar"></div>
Step 2: Add the hamburger menu HTML markup
<div class="sidebar">
<div class="hamburger-menu__container">
<div class="hamburger-menu">
<div class="hamburger-menu__line"></div>
<div class="hamburger-menu__line"></div>
<div class="hamburger-menu__line"></div>
</div>
</div>
</div>
Step 3: Add global and hamburger menu CSS styles
:root {
--light-purple: #eef2ff;
--dark-purple: #4f46e5;
--darker-purple: #3730A3;
}
body {
background-color: var(--light-purple);
font-family: -apple-system, sans-serif;
margin: 0;
}
.hamburger-menu__container {
--size: 60px;
background-color: var(--dark-purple);
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.hamburger-menu {
width: 50%;
position: relative;
}
.hamburger-menu__line {
background-color: var(--light-purple);
height: 3px;
border-radius: 2px;
}
.hamburger-menu__line:first-child, .hamburger-menu__line:last-child {
width: 100%;
position: absolute;
}
Step 4: Add hamburger menu CSS animation styles
.hamburger-menu__container {
transition: all 0.2s ease-in;
}
.hamburger-menu__container:hover {
background-color: var(--darker-purple);
}
.hamburger-menu__line:first-child,
.hamburger-menu__line:last-child {
transition: all 0.1s ease-out;
}
.hamburger-menu__line:not(:first-child):not(:last-child) {
animation-name: hamburger;
animation-duration: 0.15s;
animation-delay: 0.15s;
transform: scaleX(0);
}
.hamburger-menu__line,
.hamburger-menu__line:first-child, .hamburger-menu__line:last-child {
animation-fill-mode: forwards;
}
.hamburger-menu__line:first-child, .hamburger-menu__line:last-child {
transform-origin: 50%;
animation-duration: 0.3s;
}
.hamburger-menu__line:first-child {
top: 0;
animation-name: hamburgerFirst;
transform: rotate(45deg);
}
.hamburger-menu__line:last-child {
top: 0;
animation-name: hamburgerLast;
transform: rotate(-45deg);
}
.hamburger-menu--open .hamburger-menu__line:not(:first-child):not(:last-child) {
animation-name: hamburgerOpen;
transform: scaleX(100%);
}
.hamburger-menu--open .hamburger-menu__line:first-child {
top: -10px;
transform: rotate(0);
animation-name: hamburgerFirstOpen;
}
.hamburger-menu--open .hamburger-menu__line:last-child {
top: 10px;
transform: rotate(0);
animation-name: hamburgerLastOpen;
}
@keyframes hamburger {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
@keyframes hamburgerOpen {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes hamburgerFirst {
0% {
top: 0;
transform: rotate(45deg);
}
50% {
top: 0;
transform: rotate(0);
}
100% {
top: 10px;
transform: rotate(0);
}
}
@keyframes hamburgerLast {
0% {
top: 0;
transform: rotate(-45deg);
}
50% {
top: 0;
transform: rotate(0);
}
100% {
top: -10px;
transform: rotate(0);
}
}
@keyframes hamburgerFirstOpen {
0% {
top: 10px;
transform: rotate(0);
}
50% {
top: 0;
transform: rotate(0);
}
100% {
top: 0;
transform: rotate(45deg);
}
}
@keyframes hamburgerLastOpen {
0% {
top: -12px;
transform: rotate(0);
}
50% {
top: 0;
transform: rotate(0);
}
100% {
top: 0;
transform: rotate(-45deg);
}
}
Step 5: Add the navigation menu HTML markup
<div class="sidebar">
<div class="hamburger-menu__container">
<div class="hamburger-menu">
<div class="hamburger-menu__line"></div>
<div class="hamburger-menu__line"></div>
<div class="hamburger-menu__line"></div>
</div>
</div>
<!--Add this HTML code after the hamburger menu:-->
<nav class="nav">
<nav class="nav__item">
<i data-feather="user" class="nav__item-icon"></i>
<span class="nav__item-text">Account</span>
</nav>
<nav class="nav__item">
<i data-feather="bookmark" class="nav__item-icon"></i>
<span class="nav__item-text">Bookmarks</span>
</nav>
<nav class="nav__item">
<i data-feather="bar-chart-2" class="nav__item-icon"></i>
<span class="nav__item-text">Data history</span>
</nav>
<nav class="nav__item">
<i data-feather="arrow-down-circle" class="nav__item-icon"></i>
<span class="nav__item-text">Download</span>
</nav>
</nav>
</div>
Step 6: Include the feather icon library
Add the required Feather icon library script tags at the end of the body tag
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace();
</script>
Step 7: Add the CSS styles for the navigation menu
.feather {
color: var(--light-purple);
stroke-width: 2.5;
width: 26px;
height: 26px;
}
.nav__item {
--size: 60px;
background-color: var(--dark-purple);
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav__item {
top: 0;
position: absolute;
z-index: -1;
}
.nav--open .nav__item:first-child {
top: 60px;
z-index: -1;
}
.nav--open .nav__item:nth-child(2) {
top: calc(60px * 2);
z-index: -2;
}
.nav--open .nav__item:nth-child(3) {
top: calc(60px * 3);
z-index: -3;
}
.nav--open .nav__item:last-child {
top: calc(60px * 4);
z-index: -4;
}
.nav__item-text {
color: var(--dark-purple);
position: absolute;
font-weight: 600;
left: 105%;
opacity: 0;
font-size: 18px;
white-space: nowrap;
}
Step 8: Add the navigation menu CSS animation styles
.nav__item {
transition: all 0.2s ease-in;
}
.nav__item:hover {
background-color: var(--darker-purple);
}
.nav__item {
transition-property: all;
transition-timing-function: ease-in-out;
}
.nav__item:hover .nav__item-text {
left: 120%;
opacity: 1;
}
.nav--open .nav__item:first-child {
transition-duration: 0.15s;
}
.nav--open .nav__item:nth-child(2) {
transition-duration: 0.3s;
}
.nav--open .nav__item:nth-child(3) {
transition-duration: 0.45s;
}
.nav--open .nav__item:last-child {
transition-duration: 0.6s;
}
.nav__item-text {
transition: all 0.3s ease-in-out;
}
Step 9: Add the required Javascript code to open/close the sidebar navigation menu
const sidebar = document.querySelector(".sidebar");
if (sidebar) {
const init = () => {
attachEvents();
};
const hamburgerMenu = document.querySelector(".hamburger-menu");
const hamburgerMenuContainer = document.querySelector(
".hamburger-menu__container"
);
const nav = document.querySelector(".nav");
const attachEvents = () => {
hamburgerMenuContainer.addEventListener("click", toggleMenu);
};
const toggleMenu = () => {
hamburgerMenu.classList.toggle("hamburger-menu--open");
nav.classList.toggle("nav--open");
};
init();
}
CSS sidebar menu design examples
Need some sidebar menu design examples?
At Frontend planet we have a list of cool sidebar navigation examples to inspire you, check it out!.