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

Author:

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

  1. Create the HTML Structure: Build the basic HTML structure for the sidebar and page content.
  2. Style the Sidebar Using CSS: Use CSS to style the sidebar and its links.
  3. Add Toggle Functionality Using JavaScript: Implement the JavaScript code to open and close the sidebar.
  4. 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.

Step 2: Style the Sidebar Using CSS

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.

Step 4: Make the Sidebar Responsive

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.

Comments

Post a Comment

Leave Comment