Categories

Awesomely Easy Push/Slide Menus

12/31

Spread the word

I recently added a push menu to an application at my day job and I was amazed at how easy it was to implement. So I thought I would write a quick post on how to build such a menu. I’m also going to throw in a slide over top menu for no additional cost. That’s just the kind of nice guy I am.

You’re welcome.

If you’re not sure what I’m talking about, I guarantee that you’ve seen them and just didn’t know what they were called. Just so we’re all on the same page, you can see my demo here.

Why Push/Slide Menus?

Back in the day, all of 5 years ago, it had been decreed that navigation needed to be always visible and often as flat as possible. This led to some extremely large, clunky and even, in many cases, multiple navigations. On some, well done sites, this was not a problem, but on other not-so-well-done sites, they tried to imitate the sites handling multiple navigations well and failed horribly. It even got to a point where sites would have their entire navigation laid out in the footer, almost as an index in the back of a text book.

Things were getting out of hand.

We all probably noticed the push or slide menus being used in native iOS or Android apps long before anyone had the nerve to put one on a website. I know I did, and I sat there day-dreaming about a world where such a menu would be possible on the web. Then that wonderful day happened when Google+’s website implemented this type of menu to mimic the slew of native apps they had for mobile devices.

Do not misunderstand me, this solution is not right for all or even many websites, but in the realm of web applications this was liberating. When it comes to a user’s dashboard, where we are trying to give that user a lot of information and functionality on the front page, a medium to large navigation, taking up part of that valuable screen real estate, is not something we want. So why not give the user a hamburger icon/link that expands out a menu when they are ready for it?

Nothing Fancy… OK, a Bit Fancy

This menu is done using HTML, CSS and a tiny bit of JavaScript. There really isn’t much in the way of bells and whistles, in hopes of keeping it simple enough to throw into any website or application.

To start with you can get the code on my gitHub, if you wish to follow along.

Fair warning: I’m using Stylus, CoffeeScript and Grunt.js for my assets, but you can use anything you want here. Also you can easily convert the Stylus to CSS and the CoffeeScript to JavaScript if you choose to. If you’re used to Sass rather than Stylus, don’t worry, they are extremely similar. It’s just that Stylus allows you to ignore the curly-braces, semicolons and even colons. It is able to do so, because it is white-space sensitive much like CoffeeScript.

This is assuming you want the navigation to be on and slide out from the left. Simply change the left properties to right to reverse it.

What else is going on here? Well firstly we fixed position the whole navigation and set the height to 100%. We set the transition property to animate our position change when we’re ready. Then we style our actual navigation a bit, setting width, padding, and background-color. You may change these values however you wish. Please note that if you change the width or padding of the navigation you will also have to adjust the left/right properties for the difference. We also style our close link a bit, positioning it at the top-right of the navigation.

Lastly we set the left property to 0 when the <body> tag has the class of navigation-open. This will trigger our slide in animation. Before I move on to the JavaScript, let’s look at how a push menu would be styled.

The HTML we have above is set to allow the push menu already. Actually if you are just doing a slide out menu, you can go ahead and remove the <div id="wrapper"><div> that wraps around nearly all the markup.

The differences here are rather simple. Firstly, we style the #wrapper div, setting position and transition. The base nav.slideout-nav is basically the same as well. The minor difference is that I made the background-color solid because it will not be over top of any of your page. This time when the <body> tag has the class of navigation-open, we not only set the left on the nav, but also right on our #wrapper.

In our HTML we have a link with three <hr /> tags. Here in our CSS we set the dimensions of the link and position it on our page. You can see the styles for our <hr />s with a little bit of CSS3 transition fluff. With these optional lines, on hover the top and bottom <hr /> will shift to the left slightly, just to give the user some a cue that they can interact with it.

The CoffeeScript/JavaScript

This is the easiest part, where usually JavaScript is where things can get a bit murky. Let’s take a look:

That’s it! All we’re doing here is listening for our two links to be clicked after the document is ready. On $('a.open-menu') being clicked we run .toggleClass() on the <body> tag and with $('a.close'), we run .removeClass().

Conclusion

Well there you have it, a fully functioning push or slide out menu for your web project. Pretty simple, right? Hit me up on Twitter and let me know how you like it or anything cool you’ve done with this.