Side Navigation Menu Bar in HTML CSS

Hello readers, Today in this blog you'll learn how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it's time to create a Side Navigation Menu Bar that slides from the left or right side.

As you can see in the image, this is a Side Navigation Menu Bar that is based on only HTML and CSS. The <input> checkbox tag is used to show and hide the sidebar. That means when you click on that 'X' button the sidebar will be slide on the left side and the only menu button is shown (3 lines bar) and again when you click on that 3 lines bar the Sidebar will be slide-right side.

When you click on that three-line bars, the checkbox will be checked and the Side Menu Bar is shown and when you again click on that bars, the checkbox will be unchecked and that shown menu bar will be hidden. This process is only done by HTML <input type="checkbox"> tag and <label> tag.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Side Navigation Menu Bar).

Video Tutorial of Sidebar Menu using HTML and CSS

I hope you've understood the basic concept of this Sidebar Menu after watching this video tutorial. I think this video can help beginners to know CSS in depth. You can use this program or design on your website or project after a few changes according you want. Also, you can redesign this program to take this sidebar menu to the next level.

If you like this Login Form Design and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Side Navbar using HTML & CSS [Source Codes]

Before sharing the source codes of this program (Side Navigation Menu Bar). Let's a few talks about the main tags and codes of this program. To create this Side Navigation Menu Bar I had used HTML & CSS only which means this is a pure CSS program.

As you can see in the video, this program is a fully <ul> and <li> based program, that’s why we can create a menu easily. You can call this CSS Side Navigation Bar without the use of Javascript. I've used <input type="checkbox"> and <label for=""> tag to toggle Menu Bar for the mobile version. I also used the Fontawesome icon to show a 3-lines bar and the 'X' button. Generally, font-awesome is a website where we can get thousands of free icons for our projects.

To create this program (Side Navigation Menu Bar). 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. You can also download the source code files through the given link. In the source files, there you also get a background image of this program. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Sider Menu Bar CSS</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>
    <input type="checkbox" id="check">
    <label for="check">
      <i class="fas fa-bars" id="btn"></i>
      <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
    <header>My App</header>
  <ul>
<li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
<li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
<li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
<li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
<li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
<li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
</ul>
</div>
<section></section>
  </body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
body {
  font-family: 'Roboto', sans-serif;
}
.sidebar {
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #042331;
  transition: all .5s ease;
}
.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #063146;
  user-select: none;
}
.sidebar ul a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255,255,255,.1);
  transition: .4s;
}
ul li:hover a{
  padding-left: 50px;
}
.sidebar ul a i{
  margin-right: 16px;
}
#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  background: #042331;
  border-radius: 3px;
  cursor: pointer;
}
label #btn{
  left: 40px;
  top: 25px;
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all .5s;
}
label #cancel{
  z-index: 1111;
  left: -195px;
  top: 17px;
  font-size: 30px;
  color: #0a5275;
  padding: 4px 9px;
  transition: all .5s ease;
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #cancel{
  left: 195px;
}
#check:checked ~ section{
  margin-left: 250px;
}
section{
  background: url(bg.jpeg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}

Thanks for visiting, Keep visiting.

28 Comments

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

akkyApril 27, 2020 at 11:12 AM
which text editor do you use in this video....
IK SagorApril 30, 2020 at 7:50 PM
You are doing very well...keep it up.
UnknownMay 4, 2020 at 9:40 AM
Can u pls use ur voice for better understanding bcoz there is no more videos in nepali language so pls
Blogger MSMay 18, 2020 at 6:37 AM
plz make videos some slow motion. for better understanding !
nattawut xpJune 3, 2020 at 12:27 PM
very good
AHMED SOBIRJune 4, 2020 at 12:39 PM
tnx bro
SamyJuly 9, 2020 at 3:05 AM
How can I keep menu showing all the time rather than clicking on three lines? I don't want to hide the menu. Thanks
UnknownJuly 25, 2020 at 7:55 PM
how can your make a commenting input using css codes?
UnknownSeptember 20, 2020 at 6:25 PM
hi, rather thank a link when you click a button how would i open an iframe with content inside then click again to vanish or click another link to display content for that link in the iframe.
UnknownOctober 5, 2020 at 12:09 AM
Issue I am facing if a image is coming then the sidebar is overlapping with the image. How to revolve it?
AnonymousDecember 16, 2020 at 11:00 PM
i make everything as shown in video but this not working what to do
David MüllerJanuary 26, 2021 at 3:18 AM
Hi,
Thanks for sharing your codes!
How do I have to change the code for a sidebar on the left side?
David MüllerJanuary 26, 2021 at 3:24 AM
Hi,
Thanks for sharing your codes!
How do I have to change the code for a sidebar on the right side?
ZFebruary 5, 2021 at 10:54 PM
How do i make sidebar overlap main page

Video Tutorial of Sidebar Menu using HTML and CSS

You might like this:

Side Navbar using HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

28 Comments

Post a Comment

About Us

Contact Form