How to make a Left Sidebar in HTML CSS and JavaScript

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

Responsive sidebar menu HTML CSS, toggle sidebar using html and css, Open and close sidebar on button click javascript, Sidebar html CSS, Sidebar HTML CSS template, Simple sidebar HTML CSS

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

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad