Awesomely Easy Push/Slide Menus

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page

Awesomely Easy Push/Slide Menus

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.

And there was much rejoicing

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.

The HTML
  <!doctype html>
  <html class="no-js">
  <head>
    ... meta data omitted ...
    <link rel="stylesheet" href="stylesheets/main.css">
  </head>
  <body>
  <!-- start navigation -->
  <nav class="slideout-nav">
    <ul class='navigation margin-bottom-20'>
      <li><a href="#link">Home</a></li>
      <li><a href="#link">About</a></li>
      <li><a href="#link">Blog</a></li>
      <li><a href="#link">Contact</a></li>
    </ul>

    <div class="margin-bottom-20">
      <h3>Recent Blog Posts</h3>
      <ul class="recent-posts">
        <li><a href="http://sparkmasterflex.com/my-first-marketable-product/" rel='external'>My First Marketable Product</a></li>
        ... other links here ...
      </ul>
    </div>


    <form class="margin-bottom-20">
      <h3>Contact Me</h3>
      ... omitted form ...
    </form>
    <a href="#close" class="close">X</a>
    </nav> <!-- end navigation -->

    <div id="wrapper">
      <header>
        <section>
          ... markup omitted ...
          <a href="#open-menu" class="open-menu" title="Open Menu">
            <hr />
            <hr />
            <hr />
          </a>
        </section>
      </header>
      <div id="content">
        ... markup omitted ...
      </div>
    </div>
    <script src='javascripts/production.js'></script>
  </body>
  </html>

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.

The Stylus/CSS

For a slide out menu, your styles will be:

  nav.slideout-nav
    position fixed
    top 0
    left -390px
    z-index 300
    height 100%
    transition all 0.25s, ease-in-out
    //--  change the width, padding and bg as you see fit
    width 320px
    padding 30px
    background-color rgba(#7f7fff, 0.9)

    //-- styles for close button
    a.close
      position absolute
      top 15px
      right 15px
      font-size 32px
      color red
      text-decoration none

  body.navigation-open nav.slideout-nav 
    left 0

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.

  #wrapper
    position relative
    z-index 10
    top 0
    transition all 0.25s ease-in-out

  nav.slideout-nav
    position fixed
    top 0
    left -390px
    z-index 300
    height 100%
    transition all 0.25s, ease-in-out
    //--  change the width, padding and bg as you see fit
    width 320px
    padding 30px
    background-color #7f7fff

    a.close
      // same as above

  body.navigation-open
    #wrapper { right: -300px; }
    nav.slideout-nav { left: 0 }

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.

Finally, let’s look at our hamburger link that will fire our navigation to slide or push out.

  a.open-menu
    position absolute
    top 15px
    right 0
    display block
    width 32px
    height 32px
    &:hover hr:nth-child(odd) { margin-left: -5px } // this is completely optional
    hr
      width 100%
      height 3px
      margin 5px 0
      color black
      border 0
      background-color black
      transition all 0.15s ease-in-out // this is completely optional

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:

  $ ->
    $('a.open-menu').click (e) ->
      $('body').toggleClass 'navigation-open'
      false

    $('a.close').click (e) ->
      $('body').removeClass 'navigation-open'
      false

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.

Resources:

callmenick.com

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page