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 Side Navigation Menu Bar
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.
You might like this:
Side Navigation Menu Bar [Source Codes]
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. 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>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>
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=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;
}
That’s all, now you’ve successfully created a Side Navigation Menu Bar in 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.
Thank you, both your channel and your website I have learned a lot more, even being an apprentice of web design, thank you very much for your content
How can I get matter in body of the page? when I am using h1 or pre tag in section tag I am get the matter beside hamburger. If I am using them outside section tag I am not getting the matter
Superb coding bro.
Realy like your clean approch.
I want to have a new html shown to the right of the bar(removed the .siebar{left:-250px;}) How can I do that. Showing av new html local page from each meny item.
Best regards
Jon Helge
Awesome work man! Kudos to your work. Keep it up
Thank you very much…Keep visiting!
Your coding is awesome bro,
I m very big fan of your coding and I waited from last 1 week for coding due to your site is in maintenance Now I got source codes,
It very helpful and easy to use.
One more suggestions can you pls start a coding class or coding courses videos.
Thank you so much
Sure bro, I’ll think about it.
Just use z-index CSS property to overlap an element of other elements
How do i make sidebar overlap main page
Just change the left property of .sidebar to right
It's already on the left side
Hi,
Thanks for sharing your codes!
How do I have to change the code for a sidebar on the left side?
Hi,
Thanks for sharing your codes!
How do I have to change the code for a sidebar on the right side?
Download code files from the above link
i make everything as shown in video but this not working what to do
use JavaScript for that!
use this
.sidebar{
z-index: 999;
}
Issue I am facing if a image is coming then the sidebar is overlapping with the image. How to revolve it?
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.
You need JavaScript also. Contact me on Instagram for further information.
how can your make a commenting input using css codes?
Welcome bro…Keep visiting.
Thanks…Keep visiting.
Remove this line left: -250px from .sidebar…Contact me on Instagram for further help.
How can I keep menu showing all the time rather than clicking on three lines? I don't want to hide the menu. Thanks
very good
tnx bro
ok bro.. Keep visiting
plz make videos some slow motion. for better understanding !
Nepali ma views nai auunw..tesaile video banunw sakkinw.
Can u pls use ur voice for better understanding bcoz there is no more videos in nepali language so pls
Thank you.keep visiting.
You are doing very well…keep it up.
Atom
which text editor do you use in this video….