How to make a responsive sidebar navigation menu with HTML, CSS, and JS

A responsive sidebar navigation menu is a common element in many websites, as it allows users to easily navigate through different pages and sections of the website. In this tutorial, we will show you how to create a responsive sidebar navigation menu with HTML, CSS, and JS.

Step 1: Set up the HTML structure

The first step is to create the HTML structure for our sidebar navigation menu. We will use a standard unordered list (ul) with nested list items (li) for each menu item. Here's an example:

<div class="sidebar">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

In this example, we have created a div element with the class "sidebar" to contain the menu, and a ul element with the class "menu" to represent the menu items. Each menu item is represented by a li element with an anchor tag (a) inside, which contains the menu item text and a "#" symbol as a placeholder for the link URL.

Step 2: Style the sidebar with CSS

The next step is to style the sidebar with CSS. We will use CSS to position the sidebar on the left side of the screen and add some styling to make it look visually appealing. Here's an example:

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  background-color: #f2f2f2;
  padding: 20px;
  overflow-y: auto;
  z-index: 999;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  margin-bottom: 10px;
}

.menu a {
  display: block;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
}

.menu a:hover {
  background-color: #333;
  color: #fff;
}

In this example, we have set the position of the sidebar to fixed, which means it will stay in place even when the user scrolls the page. We have also set the width of the sidebar to 250px and added some padding to create some space between the menu items and the edges of the sidebar.

We have also styled the menu items with some basic styling, including adding some margin between each menu item, setting the list style to none to remove the bullet points, and making the anchor tags display as blocks with padding and border radius to create a clickable area for the user.

Step 3: Add JavaScript for responsiveness

The final step is to add JavaScript to make the sidebar responsive. We will use JavaScript to detect when the user clicks on the menu icon and toggle the sidebar accordingly. Here's an example:

const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

menuToggle.addEventListener('click', () => {
  sidebar.classList.toggle('open');
});

In this example, we have created a menuToggle variable that selects the menu toggle button, which we will create in the HTML. We have also created a sidebar variable that selects the sidebar div.

We then add an event listener to the menuToggle button that listens for a click event. When the user clicks on the button, we use the classList.toggle method to toggle the "open" class on the sidebar div. The "open" class will contain some CSS that will slide the sidebar into view.

Step 4: Create the menu toggle button

Before we can test our responsive sidebar navigation menu, we need to create the menu toggle button that will trigger the opening and closing of the sidebar. Here's an example:

<div class="menu-toggle">
  <span></span>
  <span></span>
  <span></span>
</div>

In this example, we have created a div element with the class "menu-toggle" and added three span elements inside. These span elements will create the menu icon, which will consist of three horizontal lines stacked on top of each other.

Step 5: Add CSS for the menu toggle button

To make the menu toggle button look visually appealing and easy to use, we will add some CSS to style it. Here's an example:

.menu-toggle {
  display: block;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 1000;
}

.menu-toggle span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: transform 0.3s ease-in-out;
}

.menu-toggle span:nth-child(1) {
  top: 0;
}

.menu-toggle span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.menu-toggle span:nth-child(3) {
  bottom: 0;
}

.sidebar.open ~ .menu-toggle span:nth-child(1),
.sidebar.open ~ .menu-toggle span:nth-child(3) {
  transform: rotate(45deg);
  top: 50%;
}

.sidebar.open ~ .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.sidebar.open ~ .menu-toggle span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 50%;
}

In this example, we have set the position of the menu toggle button to fixed, which means it will stay in place even when the user scrolls the page. We have also positioned it in the top right corner of the screen and added some basic styling to create the menu icon using the span elements.

We have also added some CSS that will change the appearance of the menu icon when the sidebar is opened. This is achieved using the CSS sibling selector (~) and the transform and rotate properties to create an animated effect.

Step 6: Test the responsive sidebar navigation menu

Now that we have completed all the necessary steps, we can test our responsive sidebar navigation menu. When the user clicks on the menu toggle button, the sidebar should slide into view from the left side of the screen. When the user clicks on the menu toggle button again, the sidebar should slide out of view.

Congratulations, you have successfully created a responsive sidebar navigation menu using HTML, CSS, and JS! You can customize this menu to fit the design and functionality of your website, such as adding more menu items, changing the color scheme, or adding submenus.

---

That's a wrap. Thanks for reading.

If you enjoyed reading this article, then like, share, and follow me for more such cool & interesting tips and resources about similar topics like this one.

Socials:

Twitter : https://twitter.com/Hy_piyush

LinkedIn : https://www.linkedin.com/in/piyush-kesarwani-809a30219/

Instagram: https://www.instagram.com/piyush_kesarwani22/

Github Profile Link - https://github.com/piyushkesarwani