A simple slideout menu tutorial using jQuery

It’s been years since my last tutorial, so I’m coming out of retirement for this one :) This tutorial is in response to a request to do a simple slideout menu so here goes.

In this demo, we’ll have a menu on the left side that is hidden at first with a button that will toggle the sliding effect.

Let’s start with the HTML. It’s just a button and a container that’s holding an unordered list of items. Nothing too exciting to see here.

Next is our CSS. The button is floated to the right so it doesn’t get in the way of our menu which is on the left side. The first 2 lines of CSS for the container sets the background color orange and width to 250 pixels. The rest of the CSS allows us to manually position the container exactly 250 pixels to the left of the document. Since it’s original position was on the left side and the width of the container is exactly 250 pixels, we basically hid it off the screen on the left side. This image explains better what the CSS positioning does.

Screen Shot 2015-10-23 at 10.21.35 PM

Now for some jQuery magic to tie all this together. The first line of the JavaScript caches or saves the container element because we refer to it more than once. It’s just good practice and it speed things up a bit although it’s negligible in this case. The 2nd line of code checks how far left we’ve moved the container so the function remembers where the container needs to go in order to hide it again when a user toggles the button. This number is saved into the leftVal variable. This could have been hardcoded to -250 but it makes it more difficult to maintain the code in case you decide to change the width of the container.

The rest of the script instructs the browser on what it should do when a user clicks on the button. In other words, it binds an event handler to the click JavaScript event. The button will sit there on the page and listen for a click event and execute a function that is passed into it. Here is what the function does. It creates a new variable called animateLeft which will be used to tell jQuery where the container should be. This variable is dynamic depending on what state the container is in. If the left position of the container is equal to 0, this means that it is visible and on the screen.

Screen Shot 2015-10-23 at 10.59.43 PM

In this case, the animateLeft variable is set to the value of leftVal because we want to move it back to it’s original position (which is hidden -250 pixels to the left side). If the left position of the container is not equal to 0, this means that it is in the hidden position. To make it visible, we’ll need to set the animateLeft variable equal to 0.

The last line of the JavaScript uses the jQuery animate() function which animates specific CSS properties. In our case, we want to animate the left position of our container which will give it a sliding effect. Do we know how far left we need to animate? Yes! We saved it in the animateLeft variable earlier in our if statement.

And that wraps it up for this tutorial! If you would like to see a demo for a menu on the right side, check it out here.

If you found that this code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!





Note: If you have an issue with your code and would like help, please create a JSFiddle and send me the link with your detailed issue.

Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

8 thoughts on “A simple slideout menu tutorial using jQuery”

  1. Hello Allen,
    This looks nice and simple. I was looking at the demo for the container on the right side, and for me in firefox (I haven’t checked other browsers) the container is visible to the right, adding a bottom scrollbar to the page; on your initial (left) version in your demo the code looks the same yet the page width is not altered by the container. What’s going on?
    Thanks, Neil

  2. Hello Allen,
    Thank you so much for this simple yet beautiful effect :) your site is so helpful in learning new things.

    I just had a question… is there a way of fading the body content when the slideout menu is active? Like an overlay effect?

    Thank you so much again :)
    Emma

    1. Hi Emma,

      Can you elaborate more on what you mean by fading of the body content? Do you mean to fade the body content in when the slider opens up and fade out when the slider closes? If you have an example that you can point to online that would be awesome.

      Allen

      1. Hi Allen,
        Thank you for the quick reply! Yes that’s exactly what I mean and am looking for, I just have the code you have in your sample above at the moment.

        So when you click “Open menu” the slider opens but the page behind it fades out, like opacity 0.5 or something?! I hope I make sense.

        Thank you again.

        1. Hi Emma,

          Here is a version that does the fade in of the content after the slide is completed:

          http://jsfiddle.net/axl163/Lmruty8w/

          Here is a version where it is happening simultaneously:

          http://jsfiddle.net/axl163/gc8chkqv/

          This is the jQuery documentation for animate() and fadeIn() if you would like to adjust some of the parameters such as the duration of the effect or if you would like to change the easing of the fade in:

          http://api.jquery.com/fadein/
          http://api.jquery.com/animate/

          I hope this helps.

          Allen

          1. Oh yes! This is what I wanted and was looking for!! )) Thank you so much Allen! Leant a lot from your code!

Leave a Reply

Your email address will not be published. Required fields are marked *