Hello readers, Today in this blog you’ll learn how to create an Animated Sidebar Menu or Side Navigation Menu using only HTML & CSS. Earlier I have shared a blog on how to create an Animated Navigation Menu Bar and now it’s time to create a sidebar menu.
A website sidebar is a unique, creative, and useful component placed to the right or left of a webpage’s primary content area. They’re commonly used to display several types of additional information for users, such as navigational links to key pages. A sidebar can be used to encourage your visitors and content viewers to read the more detailed main article.
In this program [Side Navigation Menu], at first, on the webpage, there is only a menu button on the top left corner and when you click on that button, then the sidebar appears with sliding from the left side. In this sidebar, there are some navigation links with their icons, and when you hover on the particular link there is shown a box-shadow effect on the background which makes it more attractive. There are also some social media icons on the bottom of the sidebar.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Animated Sidebar Menu].
Video Tutorial of Animated Sidebar Menu
In the video, you have seen the side navigation menu with icons and I hope you’ve understood the basic codes behind creating this program. As you know, this is a pure CSS program that means I used only HTML & CSS to create this sidebar. So if you’re a beginner, then you can easily understand the codes of this program and able to create this type of sidebar.
To create a toggle button and show or hide the sidebar on button click, I have used HTML <input type=”checkbox”> and control this checkbox with label tag [menu icon]. If you like this program [Side Navigation Menu] and want to get source codes. You can easily get the source codes of this program.
You might like this:
Side Navigation Menu [Source Codes]
To create this program [Side Navigation Menu]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Sidebar Menu | CodingLab</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<input type="checkbox" id="btn" hidden>
<label for="btn" class="menu-btn">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</label>
<nav id="sidebar">
<div class="title">
Side Menu
</div>
<ul class="list-items">
<li><a href="#"><i class="fas fa-home"></i>Home</a></li>
<li><a href="#"><i class="fas fa-sliders-h"></i>Clients</a></li>
<li><a href="#"><i class="fas fa-address-book"></i>Services</a></li>
<li><a href="#"><i class="fas fa-cog"></i>Settings</a></li>
<li><a href="#"><i class="fas fa-stream"></i>Features</a></li>
<li><a href="#"><i class="fas fa-user"></i>About us</a></li>
<li><a href="#"><i class="fas fa-globe-asia"></i>Languages</a></li>
<li><a href="#"><i class="fas fa-envelope"></i>Contact us</a></li>
<div class="icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</ul>
</nav>
</div>
<div class="content">
<div class="header">
Animated Side Navigation Menu
</div>
<p>
using only HTML and CSS
</p>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.wrapper{
height: 100%;
width: 300px;
position: relative;
}
.wrapper .menu-btn{
position: absolute;
left: 20px;
top: 10px;
background: #4a4a4a;
color: #fff;
height: 45px;
width: 45px;
z-index: 9999;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
#btn:checked ~ .menu-btn{
left: 247px;
}
.wrapper .menu-btn i{
position: absolute;
transform: ;
font-size: 23px;
transition: all 0.3s ease;
}
.wrapper .menu-btn i.fa-times{
opacity: 0;
}
#btn:checked ~ .menu-btn i.fa-times{
opacity: 1;
transform: rotate(-180deg);
}
#btn:checked ~ .menu-btn i.fa-bars{
opacity: 0;
transform: rotate(180deg);
}
#sidebar{
position: fixed;
background: #404040;
height: 100%;
width: 270px;
overflow: hidden;
left: -270px;
transition: all 0.3s ease;
}
#btn:checked ~ #sidebar{
left: 0;
}
#sidebar .title{
line-height: 65px;
text-align: center;
background: #333;
font-size: 25px;
font-weight: 600;
color: #f2f2f2;
border-bottom: 1px solid #222;
}
#sidebar .list-items{
position: relative;
background: #404040;
width: 100%;
height: 100%;
list-style: none;
}
#sidebar .list-items li{
padding-left: 40px;
line-height: 50px;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid #333;
transition: all 0.3s ease;
}
#sidebar .list-items li:hover{
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-shadow: 0 0px 10px 3px #222;
}
#sidebar .list-items li:first-child{
border-top: none;
}
#sidebar .list-items li a{
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
height: 100%;
width: 100%;
display: block;
}
#sidebar .list-items li a i{
margin-right: 20px;
}
#sidebar .list-items .icons{
width: 100%;
height: 40px;
text-align: center;
position: absolute;
bottom: 100px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#sidebar .list-items .icons a{
height: 100%;
width: 40px;
display: block;
margin: 0 5px;
font-size: 18px;
color: #f2f2f2;
background: #4a4a4a;
border-radius: 5px;
border: 1px solid #383838;
transition: all 0.3s ease;
}
#sidebar .list-items .icons a:hover{
background: #404040;
}
.list-items .icons a:first-child{
margin-left: 0px;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #202020;
z-index: -1;
width: 100%;
text-align: center;
}
.content .header{
font-size: 45px;
font-weight: 700;
}
.content p{
font-size: 40px;
font-weight: 700;
}
That’s all, now you’ve successfully created an Animated Sidebar Menu using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
I need Email validation code please
Is the code free of copyright? Can it also be used for commercial purposes?
It's free without any copyright issues.
Hi, thanks for everything. I have a hard time making a second page
Second page means??
Hi, thanks for everything. I have a hard time making a second page
I made a ul list and tried it on my browser, but when I made my browser smaller to mobile size, the list disappeared. I did it with the class and the same thing happened.
This is great – one question, how do you actually make use of it? I have added links to other pages in the A tags e.g; clients.html
if clients.html is a fresh page, this gets rendered and the menu disappears, if I replicate the menu code in clients.html, when the page loads, the menu is back in its default (collapsed) state.
How do i get it to keep its expanded state and show a content page?
your lecture is very best and easy
Thank you so much.