Hello everyone, you can learn how to create a Sidebar Menu using HTML CSS & JavaScript in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Sidebar Menu
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Sidebar Menu</title>
</head>
<body>
<div class="content">
<h2>Sidebar Menu <br> Using HTML and CSS</h2>
</div>
<div class="open">
<span class="fa fa-bars" onclick="openbar()"></span>
</div>
<div class="sidebar" id="sidebar">
<div class="close">
<span class="fa fa-times" onclick="closebar()"></span>
</div>
<div class="title">
SideBar
</div>
<ul class="links">
<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fa fa-user"></i>Profile</a></li>
<li><a href="#"><i class="fa fa-bell"></i>Notification</a></li>
<li><a href="#"><i class="fa fa-envelope"></i>Contact US</a></li>
<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
</ul>
<div class="social">
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
<script src="main.js"></script>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
width: 100%;
height: 100vh;
position: relative;
}
.content{
position: absolute;
top: 40%;
left: 40%;
}
.content h2{
text-align: center;
font-size: 40px;
}
.open{
position: absolute;
left: 0;
}
.open span{
position: absolute;
top: 20px;
left: 35px;
font-size: 30px;
line-height: 35px;
padding: 6px 10px;
color: white;
background: #333;
border-radius: 4px;
cursor: pointer;
}
.sidebar{
width: 250px;
position: absolute;
left: -250px;
top: 0;
height: 100%;
background: #222;
transition: 0.5s;
}
.sidebar .close span{
position: absolute;
top: 5px;
right: 10px;
padding: 7px;
color: white;
background: #444;
border-radius: 4px;
cursor: pointer;
}
.sidebar .title{
padding-left: 60px;
font-size: 25px;
line-height: 60px;
color: white;
border-bottom: 2px solid gray;
}
.sidebar .links li{
list-style: none;
display: block;
width: 100%;
line-height: 60px;
border-left: 5px solid transparent;
border-bottom: 2px solid gray;
cursor: pointer;
}
.sidebar .links li:hover{
background: #333;
border-left: 5px solid cornflowerblue;
}
.sidebar .links li a{
text-decoration: none;
color: white;
font-size: 20px;
padding-left: 40px;
transition: 0.5s;
}
.sidebar .links li:hover a{
color: cornflowerblue;
letter-spacing: 1.2px;
}
.sidebar .links li a i{
margin-right: 5px;
}
.sidebar .social{
width: 100%;
position: absolute;
bottom: 30px;
left: 20px;
}
.sidebar .social i{
width: 45px;
font-size: 25px;
color: white;
background: #444;
padding: 10px;
text-align: center;
margin-right: 5px;
cursor: pointer;
border-radius: 5px;
transition: 0.5s;
}
.sidebar .social i:hover{
background: cornflowerblue;
transform: translateY(-10px);
}Step 3: Create main.js File
Create one file with the name main.js and paste the below code in this file.
function openbar(){
let sidebar = document.getElementById("sidebar");
sidebar.style.left = "0";
}
function closebar(){
let sidebar = document.getElementById("sidebar");
sidebar.style.left = "-250px";
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
