How to Create Side Navigation Bar Using HTML, CSS, and JavaScript

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

A side navigation bar is a vertical menu that helps users navigate through different sections of a website. In this tutorial, we will create a functional, responsive side navigation bar that can be toggled open and closed using a button. We'll use HTML for structure, CSS for styling and responsiveness, and JavaScript for the toggle functionality.

Development Steps

Create the HTML Structure: Build the basic HTML structure for the sidebar and page content.
Style the Sidebar Using CSS: Use CSS to style the sidebar and its links.
Add Toggle Functionality Using JavaScript: Implement the JavaScript code to open and close the sidebar.
Make the Sidebar Responsive: Ensure the sidebar works well on smaller screens by making it collapsible.

Step 1: Create the HTML Structure

We will start with the basic HTML structure, including the sidebar and a button to toggle its visibility.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Navigation Bar</title>
</head>
<body>

    <!-- Step 1: Sidebar structure -->
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Button to open the sidebar -->
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Open Sidebar</span>

    <!-- Page content -->
    <div class="main-content">
        <h1>Page Content</h1>
        <p>This is the main content of the page.</p>
    </div>

</body>
</html>

Explanation:

The div with the sidenav class represents the sidebar.
The span element is a button the user can click to open the sidebar.
The main-content section holds the rest of the page’s content.

Now, let's apply some CSS to style the sidebar and make it hidden by default. We will also style the open and close buttons.

<style>
    /* Step 2: Basic styles for the sidebar */
    body {
        font-family: "Lato", sans-serif;
        margin: 0;
        padding: 0;
    }

    /* The sidebar - hidden by default */
    .sidenav {
        height: 100%;
        width: 0; /* Initially hidden */
        position: fixed; /* Stay fixed on the page */
        z-index: 1; /* On top of other content */
        top: 0;
        left: 0;
        background-color: #111; /* Sidebar background color */
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /* Smooth transition */
        padding-top: 60px; /* Padding at the top */
    }

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

    /* Hover effect for links */
    .sidenav a:hover {
        color: #f1f1f1;
    }

    /* Close button (top right of sidebar) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

    /* Style for the main content */
    .main-content {
        margin-left: 50px;
        font-size: 28px;
        padding: 15px;
    }
</style>

Explanation:

The sidebar is styled with .sidenav and hidden by default (width: 0).
The sidebar links have padding and hover effects.
The .closebtn allows users to close the sidebar with a click.

Step 3: Add Toggle Functionality Using JavaScript

To open and close the sidebar, we will use JavaScript. This code will change the sidebar's width when the user clicks the open or close button.

<script>
    /* Step 3: Open and close the sidebar using JavaScript */
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px"; // Open the sidebar
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0"; // Close the sidebar
    }
</script>

Explanation:

The openNav() function sets the sidebar’s width to 250px, making it visible.
The closeNav() function sets the sidebar’s width to 0, hiding it again.

We can make the sidebar work better on smaller screens by adjusting its width when the screen is small.

<style>
    /* Step 4: Responsive styling */
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }
        .sidenav a {
            font-size: 18px;
        }
    }
</style>

Explanation:

This media query adjusts the padding and font size of the sidebar for smaller screens.

Complete Code

Here is the complete, fully functional side navigation bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Navigation Bar</title>
    <style>
        /* Basic styles for the body */
        body {
            font-family: "Lato", sans-serif;
            margin: 0;
        }

        /* Sidebar styling */
        .sidenav {
            height: 100%;
            width: 0; /* Sidebar hidden by default */
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

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

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

        /* Close button */
        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

        /* Main content */
        .main-content {
            margin-left: 50px;
            font-size: 28px;
            padding: 15px;
        }

        /* Responsive styling */
        @media screen and (max-height: 450px) {
            .sidenav {
                padding-top: 15px;
            }
            .sidenav a {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>

    <!-- Sidebar -->
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Open sidebar button -->
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Open Sidebar</span>

    <!-- Main content -->
    <div class="main-content">
        <h1>Page Content</h1>
        <p>This is the main content of the page.</p>
    </div>

    <script>
        /* JavaScript to toggle the sidebar */
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px"; // Open the sidebar
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0"; // Close the sidebar
        }
    </script>

</body>
</html>

Conclusion

In this tutorial, we created a fully functional side navigation bar that can be toggled open and closed using JavaScript. The sidebar appears on the left side of the screen and can be hidden or shown by clicking a button. We also ensured that the sidebar is responsive so it adjusts well to different screen sizes.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog