Design a Toggleable Sidebar using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023

In this article, we will create a toggleable sidebar navigation menu using HTML, CSS, and JavaScript. The navigation menu allows users to open and close a sidebar to access various sections of a website. When the user clicks on a navigation item, the corresponding content is displayed in the main content area. We’ll make the website responsive to different screen sizes for a seamless user experience.

Preview

Approach

First, we will make nav items with the help of anchor tags.
Now by using CSS properties like position fixed, left, and right properties, we will align the navbar to the sidebar.
Design the navbar including headings, and paragraphs by using CSS properties.
Change the content of the heading dynamically by using the showContent () function.
Lastly, make a button for closing the navbar by using the function name closeNav().

Example: In this example, we write a code to build a toggleable sidebar using HTML CSS and JavaScript.

Javascript

function openNav() {
    document.getElementById("sideMenu")
        .style.width = "300px";
    document.getElementById("contentArea")
        .style.marginLeft = "300px";
}
 
function closeNav() {
    document.getElementById("sideMenu")
        .style.width = "0";
    document.getElementById("contentArea")
        .style.marginLeft = "0";
}
 
function showContent(content) {
    document.getElementById("contentTitle")
        .textContent = content + " page";
         
    closeNav();
}

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>
        Toggleable Sidebar using 
        HTML CSS & JavaScript
    </title>
</head>
 
<body>
    <div id="sideMenu" class="sideMenu">
        <a href="javascript:void(0)"
            class="closeBtn"
            onclick="closeNav()">×</a>
        <div class="mainMenu">
            <h2>SideMenu</h2>
            <a href="javascript:void(0)"
                onclick="showContent('Home')">Home</a>
            <a href="javascript:void(0)"
                onclick="showContent('About')">About</a>
            <a href="javascript:void(0)"
                onclick="showContent('Portfolio')">Portfolio</a>
            <a href="javascript:void(0)"
                onclick="showContent('Services')">Services</a>
            <a href="javascript:void(0)"
                onclick="showContent('Contact')">Contact</a>
        </div>
    </div>
     
    <div id="contentArea">
        <span style="font-size: 30px; cursor: pointer"
            onclick="openNav()">☰</span>
        <div class="contentText">
            <h2 id="contentTitle">
                Toggle Sidebar Navigation</h2>
            <h3>HTML CSS JS</h3>
        </div>
    </div>
    <script src="script.js"></script>
</body>
 
</html>

CSS

/* style.css */
body {
    margin: 0;
    font-family: poppins;
}
 
.sideMenu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #478cff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
 
.mainMenu h2 {
    text-align: center;
    letter-spacing: 7px;
    color: #fff;
    background: #111;
    padding: 20px 0;
}
 
.sideMenu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: 0.3s;
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
 
.mainMenu a:hover {
    color: #fff;
    background: #111;
}
 
.sideMenu .closeBtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
 
#contentArea {
    transition: margin-left 0.5s;
    padding: 16px;
}
 
.contentText {
    padding: 100px 20px;
    text-align: center;
}
 
.contentText h2 {
    background: #478cff;
    display: inline-block;
    padding: 15px 10px;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
}
 
.contentText h3 {
    text-transform: uppercase;
    font-size: 18px;
    margin: 0;
    letter-spacing: 3px;
}
 
@media screen and (min-width: 768px) {
    .contentText {
        padding: 100px 180px;
    }
 
    .contentText h2 {
        padding: 15px 35px;
        font-size: 50px;
    }
 
    .contentText h3 {
        font-size: 45px;
    }
}

Output:

Design a Toggleable Sidebar using HTML CSS and JavaScript

Approach

Javascript

HTML

CSS

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?