Create a responsive design with a sliding side navigation menu

In this tutorial, you will create an expandable side navigation menu using JavaScript and CSS. The final product is shown below:

1. Create tag

First, let’s add some markup to the 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 id="This-Side-Navigation-Menu-Looks-Good">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 using the sidenav class. Next, we added the actual top bar navigation via the <nav> tags, and we used SVG for the side menu icon.

Remember to put all the content of your website into a div id="main" container so that it slides to the right.

2.Writing JavaScript code

Next, let's add JavaScript that will use the ham-icon class to listen for click events on the hamburger icon, as well as the close button that appears after the side navigation menu slides onto 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";
});

Clicking on the hamburger icon should reveal the side navigation. We do this by setting the width of the navigation to 250px and also adding a left margin of 250px to the main site content.

Clicking the close button should hide the side navigation. To do this, we change the width of the navigation back to 0, while also setting the left margin of the main site content to 0.

3. Using CSS styles

Finally, we need to use some CSS to style the side menu and links on the page. CSS will place all web page elements exactly where we want them. We will also apply some simple animation with the help of transition properties. Let's look at 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 side navigation's height to 100% and its initial width to 0 to make it hide. However, the content of the side navigation will remain hidden only if the value of the overflow-x attribute is set to hidden.

The transition property ensures that changes in side navigation width don't happen suddenly, and the easing feature makes it a bit elastic.

For links within the side navigation, we set the value of the white-space attribute to nowrap so that the menu text does not overflow 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 styling above separates our close button from the other links in the side navigation. We applied absolute positioning to the close button and prevented its background from turning light gray on hover. It also increases in size by 20% when the user hovers over it.

The following CSS will now ensure that the main content position moves in sync with the navigation menu by using the same transition duration and the same easing function. Setting the value of the overflow-x property to hidden ensures that horizontal scroll bars do not appear as content moves.

#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 movement to the hamburger icon with the help of the following CSS. It rotates the hamburger icon 180 degrees in 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 size of the links using the following CSS. It ensures that the menu does not stretch out of scope on screens with less vertical space.

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

At this point your navigation menu should look similar to the following CodePen demo.

4. Remove slideshow

To make the menu appear without slide animation, simply change the CSS property transition, as shown in the abbreviated form below:

.sidenav {
    transition: 0s; 
}

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

This will make the changes appear immediately since there is no delay specified in transition. The default value we use is 0.5s.

in conclusion

Creating a side menu only requires a few lines of code and does not require the use of many resources. Make your code responsive to different device screen resolutions by modifying your CSS by adding media queries for your specific cases.

To take it a step further, you may want to use a CSS framework like Bootstrap or Bulma to style your menu.

This article has been updated with a contribution from Monty Shokeen. Monty is a full-stack developer who also enjoys writing tutorials and learning new JavaScript libraries.

The above is the detailed content of Create a responsive design with a sliding side navigation menu. For more information, please follow other related articles on the PHP Chinese website!