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.
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
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
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
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.