How To Create Sidepanel Menu Using Css and JavaScript

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

In Java script we can create collapsible Sidepanel menu and on clicking the hamburger menu/bar icon it will open the side panel bar. so today we are going to discuss how to create collapsible Sidepanel menu bar using java script.

How To Create Sidepanel Menu Using Css and JavaScript

Create a Collapsed Sidepanel

Step 1: Create index.html file and implement below code in it.
<div id="mySidepanel" class="sidepanel">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

<div class="text-center">
    <h1>How To Create Sidepanel Menu Using Css and JavaScript</h1>
</div>
<div class="well">
    <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>
    <h2>Collapsed Sidepanel</h2>
    <p>Click on the hamburger menu/bar icon to open the sidepanel.</p>
</div>
 

Step 2:Now we create css code to display side panel menu so implement below code in index.html file.

<style>
    h1{
        color: red;
    }
    body {
        font-family: "Lato", sans-serif;
    }

    .sidepanel  {
        width: 0;
        position: fixed;
        z-index: 1;
        height: 350px;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    .sidepanel a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .sidepanel a:hover {
        color: #f1f1f1;
    }

    .sidepanel .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
    }

    .openbtn {
        font-size: 20px;
        cursor: pointer;
        background-color: #111;
        color: white;
        padding: 10px 15px;
        border: none;
    }

    .openbtn:hover {
        background-color:#444;
    }
</style>


Step 3:Now we implement javascript to open side panel  menu.
<script>
    function openNav() {
        document.getElementById("mySidepanel").style.width = "250px";
    }

    function closeNav() {
        document.getElementById("mySidepanel").style.width = "0";
    }
</script>


Complete Code For Creating Sidepanel Menu Using Css and JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Sidepanel Menu Using Css and JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }

    body {
        font-family: "Lato", sans-serif;
    }

    .sidepanel {
        width: 0;
        position: fixed;
        z-index: 1;
        height: 350px;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    .sidepanel a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .sidepanel a:hover {
        color: #f1f1f1;
    }

    .sidepanel .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
    }

    .openbtn {
        font-size: 20px;
        cursor: pointer;
        background-color: #111;
        color: white;
        padding: 10px 15px;
        border: none;
    }

    .openbtn:hover {
        background-color: #444;
    }
</style>

<body>
<div class="container">
    <br>
    <br>
    <br>

    <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
    </div>

    <div class="text-center">
        <h1>How To Create Sidepanel Menu Using Css and JavaScript</h1>
    </div>
    <div class="well">
        <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>
        <h2>Collapsed Sidepanel</h2>
        <p>Click on the hamburger menu/bar icon to open the sidepanel.</p>
    </div>

    <script>
        function openNav() {
            document.getElementById("mySidepanel").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidepanel").style.width = "0";
        }
    </script>
    <div>
</body>
</html>

 

Related Post