How to Create a Side Navigation Bar Using HTML and CSS

Author:

Introduction

A side navigation bar (often called a sidebar) is a vertical menu that appears on the left or right side of a webpage. It is used to navigate through different sections of the website or application. In this tutorial, you will learn how to create a basic side navigation bar using HTML and CSS.

Development Steps

  1. Create the HTML Structure: Build the basic structure of the sidebar using HTML.
  2. Style the Sidebar Using CSS: Use CSS to style the sidebar and its links.
  3. Make the Sidebar Responsive: Ensure the sidebar works well on smaller screens by using media queries.
  4. Add JavaScript for Toggle Functionality (Optional): Implement a button to toggle the sidebar visibility.

Step 1: Create the HTML Structure

We will start by creating the basic structure for the sidebar with navigation links.

<!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 class="sidenav">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Page content -->
    <div class="main">
        <h1>Welcome to the Website</h1>
        <p>Here is the main content of the page.</p>
    </div>

</body>
</html>

Explanation:

  • The div with the class sidenav contains the links for navigation, which will be styled to appear as a sidebar.
  • The div with the class main holds the main content of the page, which will be positioned to the right of the sidebar.

Step 2: Style the Sidebar Using CSS

We’ll now apply CSS to style the sidebar, positioning it on the left side of the screen and styling the links inside it.

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

    .sidenav {
        height: 100%;              /* Full height */
        width: 250px;              /* Set the width of the sidebar */
        position: fixed;           /* Fix the sidebar in place */
        top: 0;
        left: 0;
        background-color: #111;    /* Sidebar background color */
        padding-top: 20px;
    }

    .sidenav a {
        padding: 10px 15px;        /* Padding for links */
        text-decoration: none;     /* Remove underline */
        font-size: 18px;           /* Increase font size */
        color: white;              /* Link color */
        display: block;            /* Make links block elements */
    }

    .sidenav a:hover {
        background-color: #575757; /* Darker color on hover */
    }

    /* Style for the main content */
    .main {
        margin-left: 260px;        /* Add margin to the left to accommodate the sidebar */
        padding: 20px;
    }
</style>

Explanation:

  • The .sidenav class styles the sidebar with a fixed position, full height, and a dark background.
  • The .sidenav a class styles the sidebar links with padding, white text, and a hover effect.
  • The .main class ensures the content is pushed to the right, so it doesn’t overlap with the sidebar.

Step 3: Make the Sidebar Responsive

To make the sidebar responsive, we’ll hide it on smaller screens and provide a way to toggle its visibility.

<style>
    /* Step 3: Responsive styling */
    @media screen and (max-width: 600px) {
        .sidenav {
            width: 100%;             /* Sidebar takes up the full width on small screens */
            height: auto;            /* Sidebar height adapts to the content */
            position: relative;      /* Make the sidebar relative */
        }

        .sidenav a {
            float: left;             /* Links will float on smaller screens */
            display: block;          /* Make sure links take up full width */
            text-align: left;        /* Align the text */
        }

        .main {
            margin-left: 0;          /* Remove the left margin */
        }
    }
</style>

Explanation:

  • The media query applies when the screen width is 600px or less.
  • The sidebar will expand to full width, and the links will float within the sidebar.

Step 4: Add JavaScript for Toggle Functionality (Optional)

We can add a button that allows the user to toggle the visibility of the sidebar on smaller screens.

<!-- Add this inside the <body> tag -->

<!-- Step 4: Toggle button -->
<button class="openbtn" onclick="toggleNav()">☰ Open Sidebar</button>

<script>
    // JavaScript to toggle the sidebar
    function toggleNav() {
        const sidebar = document.querySelector(".sidenav");
        if (sidebar.style.width === "250px") {
            sidebar.style.width = "0";  // Close the sidebar
        } else {
            sidebar.style.width = "250px";  // Open the sidebar
        }
    }
</script>

Explanation:

  • The button with the class openbtn allows users to open or close the sidebar.
  • The toggleNav() function adjusts the width of the sidebar between 0 (hidden) and 250px (visible).

Complete Code

Here is the complete code for the 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 styling */
        body {
            font-family: "Arial", sans-serif;
            margin: 0;
        }

        /* Sidebar styling */
        .sidenav {
            height: 100%;              /* Full height */
            width: 250px;              /* Set the width of the sidebar */
            position: fixed;           /* Fix the sidebar in place */
            top: 0;
            left: 0;
            background-color: #111;    /* Sidebar background color */
            padding-top: 20px;
            transition: 0.3s;          /* Smooth open/close transition */
        }

        .sidenav a {
            padding: 10px 15px;        /* Padding for links */
            text-decoration: none;     /* Remove underline */
            font-size: 18px;           /* Increase font size */
            color: white;              /* Link color */
            display: block;            /* Make links block elements */
        }

        .sidenav a:hover {
            background-color: #575757; /* Darker color on hover */
        }

        /* Main content styling */
        .main {
            margin-left: 260px;        /* Add margin to the left to accommodate the sidebar */
            padding: 20px;
        }

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

        /* Responsive styling */
        @media screen and (max-width: 600px) {
            .sidenav {
                width: 100%;             /* Sidebar takes up the full width on small screens */
                height: auto;            /* Sidebar height adapts to the content */
                position: relative;      /* Make the sidebar relative */
            }

            .sidenav a {
                float: left;             /* Links will float on smaller screens */
                display: block;          /* Make sure links take up full width */
                text-align: left;        /* Align the text */
            }

            .main {
                margin-left: 0;          /* Remove the left margin */
            }
        }
    </style>
</head>
<body>

    <!-- Sidebar navigation -->
    <div class="sidenav">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Main content -->
    <div class="main">
        <h1>Welcome to the Website</h1>
        <p>Here is the main content of the page.</p>
    </div>

    <!-- Toggle button for sidebar -->
    <button class="openbtn" onclick="toggleNav()">☰ Open Sidebar</button>

    <script>
        // JavaScript to toggle the sidebar
        function toggleNav() {
            const sidebar = document.querySelector(".sidenav");
            if (sidebar.style.width === "250px") {
                sidebar.style.width = "0";  // Close the sidebar
            } else {
                sidebar.style.width = "250px";  // Open the sidebar
            }
        }
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, we created a side navigation bar using HTML and CSS. We also made the sidebar responsive and added an optional toggle button for opening and closing it on smaller screens using JavaScript. This kind of navigation bar is useful for website menus, dashboards,

Comments

Post a Comment

Leave Comment