Animated Sidebar Menu using only HTML & CSS

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.

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 these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <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>

CSS FILE:

@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;
}

Thanks for visiting, Keep visiting.

9 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

GouthamSeptember 10, 2020 at 8:57 AM
I need Email validation code please
UnknownOctober 13, 2020 at 10:58 PM
Is the code free of copyright? Can it also be used for commercial purposes?
ahmadNovember 19, 2020 at 3:31 AM
Hi, thanks for everything. I have a hard time making a second page
ahmadNovember 19, 2020 at 3:31 AM
Hi, thanks for everything. I have a hard time making a second page
ahmadNovember 20, 2020 at 3:59 AM
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.
turkeyticklerJanuary 30, 2021 at 10:58 PM
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?

Video Tutorial of Animated Sidebar Menu

You might like this:

Side Navigation Menu [Source Codes]

Thanks for visiting, Keep visiting.

9 Comments

Post a Comment

About Us

Contact Form

Animated Sidebar Menu using only HTML & CSS | Side Navigation Menu

Video Tutorial of Animated Sidebar Menu

You might like this:

Side Navigation Menu [Source Codes]

Thanks for visiting, Keep visiting.

You might like

9 Comments

Post a Comment

Contact Form