Making a Sliding Side Navigation Menu for Responsive Designs

In this tutorial, you will be creating an expandable side navigation menu with JavaScript and CSS. The final product will appear as shown below:

1. Create the Markup

To get started, let’s add some markup for our side menu:

<div id="sideNavigation" class="sidenav">
  <a href="#" class="close-btn">&times;</a>
  <a href="#">About</a>
  <a href="#">Features</a>
  <a href="#">Contact Us</a>
</div>
 
<nav class="topnav">
  <a href="#" class="ham-icon">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>
 
<section id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

Here you can see we created a side menu div with the class sidenav. Next, we added the actual top bar navigation via a <nav> tag, and we are using an SVG for our side menu icon.

Remember to put all of your website’s content inside the div id="main" container so that it will slide to the right.

2. Code the JavaScript

Next, let’s add the JavaScript which will listen for click events on the hamburger icon with class ham-icon and the close button that appears once the side navigation menu has slid on to the screen.

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

A click on the hamburger icon is supposed to show the side navigation. We do this by setting the width of our navigation to 250px and at the same time adding a left margin of 250px to the main website content.

A click on the close button is supposed to hide the side navigation. We do this by changing the width of our navigation back to 0 while setting the left margin of the main website content to 0.

3. Style With CSS

Finally, we will need to style our page with some CSS for the side menu and our links. The CSS will properly place all the webpage elements where we intend them to be. We will also apply some simple animations with the help of the transition property. Let’s take a look at the CSS one part at a time.

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 4rem;
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  font-family: "Bebas Neue";
}

.sidenav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #bdbdbd;
  display: block;
  transition: 0.4s;
  white-space: nowrap;
  font-size: 2rem;
}

.sidenav a:hover {
  color: white;
  background: #9e9e9e;
}

We set the height of the side navigation to 100% and its initial width to 0 to keep it hidden. However, the contents of the side navigation only stay hidden if the value of overflow-x property is set to hidden.

The transition property makes sure that change in the width of the side navigation isn’t sudden and the easing function makes it a little bouncy.

For the links inside the side navigation, we have set the value of white-space property to nowrap so that the menu text doesn’t spill over multiple lines.

.sidenav .close-btn {
  position: absolute;
  top: -1rem;
  right: 1rem;
  font-size: 5rem;
}

.sidenav .close-btn:hover {
  background: initial;
  transform: scale(1.2);
}

The CSS above styles our close button separately from other links in the side navigation. We have applied absolute positioning to the close button and prevent its background from turning light gray on hover. It also scale up 20% in size when users hover over it.

Now, the following CSS will make sure that the shift in position of the main content is synchronized with the navigation menu by using the same transition duration and the same easing function. Setting the value of overflow-x property to hidden makes sure that no horizontal scrollbar appears due to the content shift.

#main {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
 overflow-x: hidden; 
}

We can also add a little rotational motion to the hamburger icon with the help of following CSS. It applies a rotation of 180 degrees to the hamburger icon over a period of 0.5 seconds.

a svg {
  transition: all 0.5s ease;
}
a svg:hover {
  transform: rotate(180deg);
}

Finally, let’s make the navigation menu responsive by adjusting the spacing and the size of links with the following CSS. It makes sure that the menu doesn’t go out of bounds on screens with smaller vertical space.

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

Your navigation menu should be like the following CodePen demo at this point.

Removing the Slide

To make the menu appear with no slide animation, simply make changes to the CSS property transition, as shown in an abbreviated form below:

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

This will make the change appear instantly as there is no delay specified in the transition. The default we used is 0.5s.

Conclusion

Creating a side menu only takes a few lines of code and does not need to use many resources. Making the code responsive to work with different device screen resolutions is merely a case of modifying the CSS by adding media queries for the specific cases.

To take this further, you may wish to style your menu with a CSS framework such as Bootstrap or Bulma.

This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries.