Hey, developers welcome to Day 70 of our 90Days 90Projects challenge. And today, we are going to Create a Left Sidebar in HTML CSS, and JavaScript
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
index.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> Toggle Sidebar </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<body>
<nav class="navbar">
<h2> Geeks Help </h2>
<div class="hamburger" id="hamburger">
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
</div>
<ul class="lists" id="lists">
<li><a href="#"> Home </a></li>
<li><a href="#"> About Us </a></li>
<li><a href="#"> Contact Us </a></li>
<li><a href="#"> Services </a></li>
<li><a href="#"> Privacy Policy </a></li>
</ul>
</nav>
<main class="main-content">
<h2> Welcome to Geeks Help </h2>
</main>
</body>
<script src="script.js"></script>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
transition: all 0.3s;
}
.navbar {
width: 100%;
position: sticky;
top: 0;
padding: 30px;
height: 50px;
background-color: #e65b00;
border-bottom: 1px solid #e38e54;
}
.navbar h2 {
position: absolute;
top: 50%;
color: #fff;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger {
padding: 5px;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.hamburger.active .two {
opacity: 0;
}
.hamburger.active .one {
transform: rotate(45deg);
top: 8px;
position: absolute;
}
.hamburger.active .three {
transform: rotate(-45deg);
position: absolute;
top: 8px;
}
.line {
height: 3.2px;
margin: 3px 0;
width: 25px;
background-color: #fff;
}
.lists {
position: absolute;
background-color: #e65b00;
list-style: none;
padding: 30px 50px 20px 20px;
top: 50px;
left: -180px;
height: 100vh;
z-index: 200;
}
.lists li {
margin: 1px;
border-bottom: 1px solid #ffffff56;
width: 100%;
}
.lists li:hover {
transform: translateX(10px);
}
.lists.active {
left: 0;
}
.lists li a {
text-decoration: none;
color: #fff;
line-height: 40px;
}
.main-content {
display: grid;
height: 1000px;
}
.main-content h2 {
place-self: center;
font-size: 2rem;
}
JavaScript
script.js
const hamburger = document.getElementById('hamburger');
const lines = document.querySelectorAll('.line');
const lists = document.getElementById('lists');
hamburger.addEventListener('click', function () {
lists.classList.toggle('active');
hamburger.classList.toggle('active');
});
Learn HTML- Learn Now
Learn CSS- Learn Now
Visit our 90Days, 90Projects Page- Visit Now
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
