In this post you'll learn how to create a simple sidebar menu with HTML and CSS which open and close functionality. This tutorial guide you by step-by-step instructions, code examples, and screenshots. It's perfect for web developers of all levels who want to learn how to create a simple and effective sidebar menu with open and close functionality using only HTML and CSS.
This sidebar menu open and close with only menu icons. You can easily create sidebar menu that too close when click outside of it using JavaScript.
In this sidebar menu I have added show and hide functionality with only HTML and CSS with checkbox without use JavaScript. So, it's easy to make it. We just have to check the checkbox state, if it is checked or not. If it checked then show the menu and if it is unchecked then hide the menu.
We can check the checkbox is checked or not by CSS like this input:checked. So, let's start making sidebar menu using only HTML and CSS without using JavaScript.
Video Tutorial on Creating Sidebar Menu Using HTML and CSS.
Side Navigation.
File structure.
- Create one folder.
- Open it in your code editor.
- Create two files with named index.html and index.css.
Now let's create sidebar menu with show and hide functionality using HTML and CSS step by step.
Step 1: Create basic html structure and add menu icon.
So first we'll create a basic structure of html and create a top bar with logo text and menu icon. We'll connect that menu icon with the checkbox using the label tag.
So by clicking on it. Checkbox state changes. And based on its state we'll show and hide the sidebar menu.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="navbar">
<h1><a href="#">MakeTechStuff</a></h1>
<label for="checkbox">
<img src="image/menu.png" class="open_button">
</label>
</div>
<input type="checkbox" id="checkbox">
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #f2f2f2;
}
.container .navbar{
right: 0;
left: 0;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 40px;
}
.navbar h1 a{
font-size: 40px;
text-decoration: none;
color: #000;
}
.navbar .open_button{
width: 35px;
height: 35px;
cursor: pointer;
}
Output :
As you can see in the above image that the top bar is created and below the top bar checkbox also appears. We'll disappear later after creating functionality to open and hide the menu.
Step 2: Create a sidebar menu.
So now let's create a sidebar menu. So, to create sidebar menu we'll create div tag with class value box.
- Inside box class, we'll add img tag (to close sidebar menu) and bounded with checkbox created above with label tag. So, when user click on this image then also the checkbox state changes.
- Then after we'll add nav, ul, li, & a tag for menu items.
HTML
<div class="box">
<label for="checkbox">
<img src="image/cancel.png" class="close_button">
</label>
<nav>
<ul>
<li><a href="#">Home</a><span></span></li>
<li><a href="#">Services</a><span></span></li>
<li><a href="#">About</a><span></span></li>
<li><a href="#">Contact</a><span></span></li>
</ul>
</nav>
</div>
CSS
.container .box{
position: fixed;
top: 0px;
right: 0px;
width: 250px;
height: 100vh;
background-color: #fff;
box-shadow: -2px 0px 20px -12px rgb(0 0 0);
transition: 0.2s;
}
.box .close_button{
width: 30px;
height: 30px;
float: right;
margin: 20px;
cursor: pointer;
}
.box nav{
padding-top: 80px;
}
.box nav ul li{
list-style: none;
margin: 20px 10px;
position: relative;
}
.box nav ul li span{
position: absolute;
top: 100%;
left: 0px;
height: 4px;
width: 0%;
background-color: blue;
transition: 0.2s;
}
.box nav ul li:hover span{
width: 80%;
}
.box nav ul li a{
text-decoration: none;
color: #000;
font-size: 30px;
padding: 10px 15px;
display: block;
}
Output :
As you can see sidebar menu created. Now let's add show and hide the show and hide functionality with CSS.
Step 3: Adding functionality to open & close sidebar menu.
So, as you can see, we have added a checkbox and binds that checkbox with open and close images. So, when a user clicks on those images, the checkbox state will be changed. And based on state of checkbox we'll open and close this sidebar menu (class="box").
So, first of all let's hide the sidebar menu. We'll do it by moving it right side -500px; .
CSS
.container .box{
position: fixed;
top: 0px;
right: -500px;
width: 250px;
height: 100vh;
background-color: #fff;
box-shadow: -2px 0px 20px -12px rgb(0 0 0);
transition: 0.2s;
}
Output :
The sidebar is hidden.
Now to open or show and hide or close the sidebar menu we'll use checkbox state (checked or unchecked) to open and close the sidebar menu.
As we bind the checkbox with open and close images. So on clicking on those images the checkbox state changes. And based on the checkbox states we'll show and hide the sidebar menu with simple CSS.
When checkbox checked we'll make sidebar menu (class="box") position to right: 0px and if checkbox is unchecked we'll hide the sidebar menu by CSS property right: -500px;.
CSS
.container input[type="checkbox"]:checked + .box{
right: 0px;
}
Output :
As you can see the sidebar is working. Now let's make checkbox display: none.
CSS
.container input[type="checkbox"]{
display: none;
}
You can see demo in above YouTube video.
You may like:
- How to create responsive navigation menu using HTML, CSS & JavaScript.
- How to create custom animated dropdown selection menu using HTML, CSS & JavaScript.
- How to create sidebar menu that close when click outside of it.
- How to create pop up box that close when click outside of it.
- How to create toggle button using HTML and CSS.
- How to create animated menu item selection using HTML, CSS and JavaScript.
Final code:
So that's how you can create sidebar menu with show and hide functionality using only html and CSS. If you have any question and suggestion you can write in comment section.
Share your thoughts.