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:

Sliding Side Navigation Menu

The Markup

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.

The onclick attribute of the icon and close button will trigger some JavaScript, which we will add next.

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

JavaScript

Next, let's add the JavaScript to make the openNav and closeNav functions.

CSS

Finally, we will need to style our page with some CSS for the side menu and our links:

Note: The body {overflow-x: hidden;} is required to ensure a horizontal scroll does not appear when using this with your existing CSS.

You can now take a look at your menu and give it a try in your browser. 

Using jQuery

If you want to create the side menu JavaScript using jQuery, you can do this by replacing the JavaScript I provided earlier with the following section:

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:

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 much resources. Also, if jQuery is already on the page for other tasks, the job can be made with slightly fewer lines of code and customised further.

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.

Tags:

Comments

Related Articles