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.