In this tutorial, you will be creating an expandable side navigation menu with JavaScript and CSS. The final product will appear as shown below:
To get started, let’s add some markup for our side menu:
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.
Next, let’s add the JavaScript which will listen for click events on the hamburger icon with the class ham-icon and the close button that appears once the side navigation menu has slid onto the screen.
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.
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.
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 the 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 the white-space property to nowrap so that the menu text doesn’t spill over multiple lines.
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 scales 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.
We can also add a little rotational motion to the hamburger icon with the help of the following CSS. It applies a rotation of 180 degrees to the hamburger icon over a period of 0.5 seconds.
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.
Your navigation menu should be like the following CodePen demo at this point.
To make the menu appear with no slide animation, simply make changes to the CSS property transition, as shown in an abbreviated form below:
This will make the change appear instantly as there is no delay specified in the transition. The default we used is 0.5s.
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 specific cases.
