CSS and jQuery Responsive Mobile Navigation Menu

I wrote a tutorial on a CSS Only Responsive Mobile Navigation Menu technique last year that was fairly well received. However, the problem with it is that it took too long to implement. There was too much code and it was kind of confusing.

I have been implementing different techniques in different websites for quite some time now. Really, whatever fits the effect the designer is going for and the size of the menu. Recently, a simple and slick slide in/out (or drawer) mobile navigation menu technique has been very popular and desired for many sites.

This CSS and jQuery slide mobile navigation menu is small, easy, simple, and effective. Click To Tweet

A Usable, Responsive Mobile Navigation Menu Is Important

Mobile internet usage is clearly here to stay and is only going to grow. If you’re not optimizing your website for your mobile users, you’re losing sales. More than 50% of visitors will abandon your site if you don’t deliver an experience optimized for the size of their device.

If you are delivering a good mobile website, odds are that you are creating better brand engagement and increasing customer conversions. Part of that mobile experience is having an easy to use and understandable mobile navigation menu.

View Demo

The Markup

The markup is quite simple and can really be however you want. The menu can be in the header, footer, or any anywhere you want on the page. Lay it out and style it however you’d like. We take care of the responsive part with media queries in our CSS.

For the sake of this tutorial, I have used a nav element using an unordered list. If you do it a different way, make sure to change the selectors in the CSS.

The CSS

Here is where some of the magic comes into play. Read through the CSS. It’s fairly simple and should make sense. The responsive part comes when we hit a browser width of 960px or below. Notice the slide-in selector on the nav element.

The couple of lines of jQuery we use below says to add a class of slide-in to the nav element when the user clicks on the hamburger menu.  If we click on the overlay or on the close icon, we then remove the slide-in class. Let’s add some animation.

The jQuery

The benefit of using this method as opposed to others is that we only have a few lines of jQuery. There are a lot of plugins that use a ton of code to generate the same effect. They are pretty slick. In fact, they are a little more animation friendly, but this is a really clean technique.

Note that we are adding the responsive menu icon, close icon, and overlay elements in using jQuery. You should be adding this directly to your markup if you have access to it. Simply add icons where you wish and the overlay below the footer.

Other Mobile Navigation Menu Techniques

There are a few different options that I like for creating a responsive mobile navigation menu. If you have any, feel free to share in the comments below!

Trunk.js is on of my favorites. You have to have your markup a certain way though, so if you’re in a position where you can’t alter your code, you might be out of luck.

slicknav is another good solution that gives you the ability to have custom markup. It’s easy to implement and works pretty good.

---