Creating a Responsive Side Navigation Bar with HTML, CSS, and JavaScript

#javascript #web #html #css

In this tutorial, we will build a responsive sidebar navigation menu using only HTML, CSS, and a little JavaScript. The sidebar will have the following features:

A toggle button to open and close the sidenav on mobile devices.
A collapsible menu on desktop that switches between an expanded and icon-only view.

Let's break this down into three main steps: structuring the HTML to create the foundation of the sidebar, styling with CSS to ensure a visually appealing and responsive layout, and adding interactivity with JavaScript to enable dynamic toggling between views.

1. HTML Structure

First, we define the basic structure of our page, including the sidenav, a toggle button, and a content area.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive SideNav</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <button class="toggle" onclick="toggleSidenav()">
        <i class="fa fa-bars"></i>
    </button>

    <nav id="sidenav">
        <ul>
            <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li>
            <li><a href="#"><i class="fa fa-envelope"></i><span>Messages</span></a></li>
            <li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a></li>
        </ul>
    </nav>

    <main>
        <header>
            <h1>Welcome</h1>
        </header>
        <article>
            <section>Lorem ipsum dolor sit amet...</section>
            <section>Lorem ipsum dolor sit amet...</section>
        </article>
    </main>

    <script src="sidenav.js"></script>
</body>
</html>

Explanation:

The <nav> element contains the sidebar menu.
The toggle button (<button class="toggle">) is used to show/hide the sidebar.
The <main> section represents the main content area.

2. Styling with CSS

Now, let's style the sidenav, main content, and make it responsive.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  overflow: hidden;
}

button.toggle {
  z-index: 10;
  position: fixed;
  left: 12px;
  top: 10px;
  background-color: #575757;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

nav {
  width: 250px;
  height: 100vh;
  background-color: #333;
  transition: all 0.3s;
  padding-top: 60px;

  &.min {
    width: 60px;

    span {
      opacity: 0;
    }
  }

  ul {
    color: white;

    a {
      display: flex;
      gap: 10px;
      padding: 10px 20px;
      color: white;
      text-decoration: none;
      &:hover {
        background-color: gray;
      }

      span {
        transition: opacity 0.3s ease-in-out;
      }

    }
  }
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

article {
  padding: 20px;
}

@media (max-width: 768px) {
  header {
    padding-left: 55px;
  }
  nav {
    position: fixed;
    left: -250px;
    top: 0;
  }

  nav.active {
    left: 0;
  }
}

Explanation:

The sidebar starts with a width of 250px and collapses to 60px when minimized.
On mobile (max-width: 768px), the sidebar is hidden (left: -250px) and slides in when active.
The toggle button is fixed in the top-left corner.

3. JavaScript for Interactivity

Finally, we add JavaScript to handle sidebar toggling.

function toggleSidenav() {
  const sidenav = document.querySelector("#sidenav");

  if (window.innerWidth <= 768) {
    sidenav.classList.remove("min");
    sidenav.classList.toggle("active");
  } else {
    sidenav.classList.remove("active");
    sidenav.classList.toggle("min");
  }
}