Create A Fancy Sliding Menu With jQuery

Why jQuery?

When creating any kind of Web application, especially one that contains animation effects and various elements that are implemented differently in various browsers, using a framework that takes care of low-level implementation and lets you focus on the high-level code logic is always a good idea.

So, while a JavaScript framework can save you time by simplifying specific commands and letting you type less, the real benefit comes from guaranteed cross-browser compatibility, ensuring that your application works the same everywhere without any additional effort on your part.

We chose jQuery, because it’s one of the most popular frameworks out there, with a fairly extensive and easy-to-use (not to mention well-documented) API. However, you could very likely implement the same techniques demonstrated here in any framework of your choice.

Before We Start

Before writing a single line of code, always consider how you’re going to integrate the JavaScript code into your HTML, how users will interact with the interface and how the overall solution will affect the user experience. With a menu, for example, you have to consider whether your content is dynamically generated or static. With dynamic content, a menu that animates on mouse click would work perfectly fine; but it wouldn’t look so fancy for static content, where the page has to reload every time the user clicks on a menu item. When should you play the animation then? Before or after the page reloads? The quality and speed of the effect depends on many factors, including the user’s computer, whether the website’s content has been cached, how much content you want to display and so on.

You have to consider every possibility of your specific situation to get the best out of it. There’s no golden rule here. For the sake of a simpler demonstration, we’ve decided to focus mainly on the JavaScript code, but we’ll offer some possible solutions at the end of the article.

The Basics: HTML And CSS

Let’s get started already! We have to build a solid foundation for our JavaScript code first. Never forget that although JavaScript is used almost everywhere nowadays, some users (and search engines, of course) still do not have it enabled. So we have to make sure that everything works fine and looks good even without the fancy effects.

<div class="menu">

    <div class="menu_button"><img src="button_1.png" alt="" /></div>
    <div class="menu_slider"><img src="img_1.png" alt="" /></div>

    <div class="menu_button"><img src="button_2.png" alt="" /></div>
    <div class="menu_slider"><img src="img_2.png" alt="" /></div>


  




    <div class="menu_button"><img src="button_3.png" alt="" /></div>
    <div class="menu_slider"><img src="img_3.png" alt="" /></div>

    <div class="menu_button"><img src="button_4.png" alt="" /></div>
    <div class="menu_slider"><img src="img_4.png" alt="" /></div>

    <div class="menu_button"><img src="button_5.png" alt="" /></div>
    <div class="menu_slider"><img src="img_5.png" alt="" /></div>
</div>

.menu {
    width : 100%;
}

.menu .menu_button, .menu .menu_slider {
    margin : 0;
    float : left;
    height : 158px;
}

.menu .menu_button {
    width : 33px;
    cursor : pointer;
}

.menu .menu_slider { /* Hide the contents by default */
    width : 0px;
    overflow : hidden;
}

.menu .menu_button:hover {
    background : #ddd;
}

The above code generates a simple menu bar that consists of 12 container (div) elements, each containing a single image, alternating the menu button and the menu slider images. We could have used only img elements and simply put them one after another, but valid XHTML requires that we wrap them in another element, so we did that using the div containers. This also allows you to substitute the images with any other element later (see an example near the end of this tutorial), because we’ll be concerned only with the containers. We set the menu_slider class container width to 0px, so they will be invisible by default: and we’ll hide and reveal them dynamically with JavaScript.

We use float: left here to keep the div elements on the same line.

Also, note that I omitted the width, height, and alt attributes in the img tags for readability (well, they’re there, but empty), but you should always include at least the alt attribute on your website for valid HTML/XHTML.

The last line might not be so obvious. We set the background color for hover to #ddd. This ensures that a different color for button titles appears whenever the user mouses over one. If our menu were vertical, we would simply type color: #ddd, but because it’s horizontal and our letters are on a 90°-degree angle, we have to get a little tricky. So, we use transparent PNGs as menu buttons, and we sort of cut out the text from the button by leaving the letters fully transparent. With this method, we can control the color of the text simply by changing the background, which will show through the transparent area.

The overflow: hidden line is not necessary when working with images, but it will come in handy if we want to use other slide effects instead (see later in the tutorial).

Here’s what our menu currently looks like. (Hover over the items to see the gray background behind the buttons.)

jQuery Magic

Now for the fun part. Let’s start by binding a slide function to the mouse-click event on each menu button.

Remember that each menu_slider’s width is currently 0px. What slide() does is animate the width of the container right next to the clicked button to make it go from 0px to a specified width, thus creating a slide effect.

We use the $(this) expression to convert the clicked button to a jQuery object right away; so we can use jQuery’s next() method to get the div right next to the button. This will be the corresponding menu_slider, which we can now pass on to the slide() function to animate it.

From now on, whenever we post a code snippet, the green comments will indicate new or important parts or provide additional explanation.

function slide ( menu_slider ) // Function to render the animation.
{
    menu_slider.animate (
        { 'width' : '253' }, // The first parameter is a list of CSS attributes that we want to change during the animation.
        1000 // The next parameter is the duration of the animation.
    );
}

$(".menu .menu_button").bind ( "click", function ( event ) // We're binding the effect to the click event on any menu_button container.
{
    // Get the item next to the button
    var menu_slider = $(this).next(); // We convert it to a jQuery object: $(HTMLElement)
    // Do the animation
    slide ( menu_slider );
}

As you can see, a click event starts the whole process. First, we store the element next to the button (i.e. the corresponding image) in the variable menu_slider. Then we pass it to the slide function.

Finally, the slide function uses jQuery’s animate method to create the effect. Its first parameter is a list of CSS attributes that we want to change (in this case, only the width of the image, to 253px). The second parameter is the duration of the animation in milliseconds. We’ve set it to 1 second.

You can see that it’s working, though far from perfect. Specifying the height of the images beforehand (as we did in the CSS) is very important, otherwise the height will grow proportionally to the width, resulting in a different effect.

Currently, you can still click on each menu item and slide out the corresponding image, which is not what we want, so we’ll fix that now. We just need to introduce a new variable called active_menu that stores the currently active menu_button object, and we’ll also modify the slide function to accept another parameter, which will specify the direction of the slide or, to be more precise, the width property of the animation. So if we pass a parameter greater than 0, it will slide out, and if we pass 0, it will slide back in.

// Global variables
var active_menu; // We introduce this variable to hold the currently active (i.e. open) element.
function slide ( menu_slider, width )
{
    menu_slider.animate (
        { 'width' : width }, // We replaced the specific value with the second parameter.
        1000
    );
}

$(".menu .menu_button").bind ( "click", function ( event )
{
    // Get the item next to the button.
    var menu_slider = $(this).next();
    // First slide in the active_menu.
    slide ( active_menu, 0 );
    // Then slide out the clicked menu.
    slide ( menu_slider, 253 );
}

// We also slide out the first panel by default and thus set the active_menu variable.
active_menu = $($( ".menu_slider" )[0]); // Notice we've converted it to a jQuery object again.
slide ( active_menu, 253 );

One thing to keep in mind is that every jQuery object behaves kind of like an array, even if it contains only one element. So to get the DOM object it’s referring to (in our case, the img element), we have to access the array and get the first element from it. We did that with the ($( “.menu_slider” )[0] expression, which selects the very first DOM element of the “menu_slider” class, but you can use the alternative get method as well: $(“.menu_slider”).get(0).

If you refresh the page here, and if you have a browser that automatically jumps to the last read section (or if you scroll fast enough), you can see this menu unfold after the page loads.

A Few Fixes

All right, finally, our script is working the way we want, except for some glitches, which we’ll address now. They’re not fatal errors. In fact, you may even want to leave them as they are; but if you don’t, here’s a way to resolve them.

Forbidding Multiple Open Panels

If you’ve played around with the demo above, you probably noticed that if you click more than one panel within 1 second, more than one animation can run at the same time, sometimes making the menu wider than it is supposed to be.

To resolve this issue, we can simply introduce another variable that determines whether an animation is playing or not. We’ll call it is_animation_running. We set this variable to true as soon as the slide effect begins, and we set it back to false when the animation finishes. To accomplish this, we use the animation function’s another parameter, which specifies another function to run right after the animation finishes. This is important, because if you just set is_animation_running to false after the animation function, nothing would happen, because it would execute almost instantly, when the sliding has just begun. By using this third parameter, we ensure that the variable will be set to false at exactly the right time, regardless of the effect’s duration. Then we simply allow our application to run only if is_animation_running is false (i.e. when no other panel is sliding at the moment).

var active_menu; var is_animation_running = false; // New variable. function slide ( menu_slider, width ) { is_animation_running = true; // Indicates that an animation has started. menu_slider.animate ( { ‘width’ : width }, 1000, // <- Notice the column! function () // This third parameter is the key here. { is_animation_running = false; // We set is_animation_running to false after the animation finishes. } ); } $(“.menu .menu_button”).bind ( “click”, function ( event ) { // First check if animation is running. If it is, we don’t do anything. if ( is_animation_running ) { return; // Interrupt execution. } var menu_slider = $(this).next(); slide ( active_menu, 0 ); slide ( menu_slider, 253 ); } active_menu = $($( “.menu .menu_slider” )[0]); slide ( active_menu, 253 );

Now, if you click multiple buttons, only one animation will run at a time.

The Self-Collapse Glitch

You may have also noticed what happens when you click on the currently active button. It slides in and then out again. If that’s cool with you, then fine, but perhaps you want to fix the active item’s width.

To do this, we just add a little check. Whenever a menu button is clicked, we check if the container right next to it is the active_menu or not. (Remember, the active_menu variable stores the div container that is currently slid out.) If it is, we do nothing; otherwise, we play the animation. Easy as pie!

But remember we said that every jQuery object behaves like an array? In fact, because it’s just a collection of DOM elements, there’s really no good way to compare two such objects. Thus, we’ll access the DOM elements directly to see if they’re the same or not (i.e. active_menu[0] and $(this).next()[0]).

var active_menu;
var is_animation_running = false;

function slide ( menu_slider, width )
{
    is_animation_running = true;
    menu_slider.animate (
        { 'width' : width },
        1000,
        function ()
        {
          is_animation_running = false;
        }
    );
}

$(".menu .menu_button").bind ( "click", function ( event )
{
    // First, check if the active_menu button was clicked. If so, we do nothing ( return ).
    if ( $(this).next()[0] == active_menu[0] )  // Here we make the check.
    {
        return;
    }
    if ( is_animation_running )
    {
        return;
    }
    var menu_slider = $(this).next();
    slide ( active_menu, 0 );
    active_menu = menu_slider; // Set active menu for next check.
    slide ( active_menu, 253 ); // Now we can pass active_menu if we want.
}

active_menu = $($( ".menu .menu_slider" )[0]);
slide ( active_menu, 253 );

Our menu works perfectly now. Try it: click on a button twice. Nothing should happen on your second click.

Cleaning Up

All right, we’re almost there. If you put the code on a website right now, it will most likely work just fine. But to make sure everything runs smoothly, let’s get rid of those global variables. Hiding these inside a class is always a good idea, so that they don’t collide with other JavaScript code. This is especially important if you’ve added other JavaScript snippets to your page from different sources. Imagine two coders gave the same name to one of their global variables. Whenever you interacted with one, you’d automatically affect the other. It would be a mess!

So now we’ll create a SlidingMenu class and use active_menu and is_animation_running as its variables. This approach also allows you to use the sliding menu more than once on the page. All you need to do is create a new instance of SlidingMenu for every animated menu. And while we’re at it, we may as well make the slider function belong to SlidingMenu, so that it can access and directly modify its variables if needed.

function SlidingMenu ()
{
    // Let's make these class variables so that other functions (i.e. slide) can access them.
    this.is_animation_running = false;
    this.active_menu = $($( ".menu .menu_slider" )[0]);

    // We do the bindings on object creation.
    var self = this;
    $( ".menu .menu_button" ).bind( "click", self, on_click ); // Menu button click binding.

    // Do the slide.
    this.slide ( 253 );
}

SlidingMenu.prototype.slide = slide;

function slide ( width )
{
    this.is_animation_running = true;
    var self = this;
    this.active_menu.animate (
        { 'width' : width }, // We replaced the specific value with the second parameter.
        1000,
        function ()
            {
             self.is_animation_running = false; // We set is_animation_running false after the animation finishes.
        }
    );
}

function on_click ( event )
{
    // Notice we access the SlidingMenu instance through event.data!
    if ( $(this).next()[0] == event.data.active_menu[0] )
    {
        return;
    }
    if ( event.data.is_animation_running )
    {
        return;
    }
    // Get the item next to the button.
    var menu_slider = $(this).next();
    // First slide in the active_menu.
    event.data.slide ( 0 );
    // Set the active menu to the current image.
    event.data.active_menu = menu_slider;
    // Then slide out the clicked menu.
    event.data.slide ( 253 );
}

var sl = new SlidingMenu(); // We pass the three parameters when creating an instance of the menu.

The code above needs some explanation. There are three important blocks, so let’s look at them one by one.

The SlidingMenu Class

function SlidingMenu ()  // Our new class.
{
    // Let's make these class variables so that other functions (i.e. slide) can access them.
    this.is_animation_running = false;
    this.active_menu = $($( ".menu .menu_slider" )[0]);

    // We do the bindings on object creation.
    var self = this;
    $( ".menu .menu_button" ).bind( "click", self, on_click ); // Menu button click binding.

    // Do the slide.
    this.slide ( 253 );

}

JavaScript, unlike many other programming languages, doesn’t have a class keyword for creating classes. But we can simply create objects that have their own variables and methods by creating a regular JavaScript object. So, we basically define a function here, SlidingMenu, and put inside this function all of the stuff that we would put in a regular class constructor in other languages.

We first define the same two variables that we used earlier, is_animation_running and active_menu. With the this keyword, we ensure that they belong to the particular class instance.

The next part may not be obvious at first:

var self = this;
$( ".menu .menu_button" ).bind( "click", self, on_click );

To understand this, we have to talk a bit about how jQuery handles events.

jQuery Event Handling 101 (at Least What We Need to Know Here)

In short, jQuery uses the bind method to add event listeners to DOM elements. (You could alternatively use the live method, which would update event listeners if new DOM elements are added to the document.)

The basic usage of bind requires two parameters: an event type (e.g. click, mouseover) and a function (i.e. callback function) that executes when the given event type occurs on the DOM element. And this is where the this keyword comes into play, because in the callback function we often want to reference the DOM object on which the event happened. And jQuery makes it very convenient to do so; we just need to use this.

For example, let’s say we want to change an image element to another image when the user clicks on it. To do so, we can write something like this:

$("#example_img").bind ( "click", change_image );

function change_image ( event )
{
    this.src = "images/another_img.png";
}

In the example above, we use the this keyword to reference the DOM object. It’s very convenient for simple applications, but for more complicated ones, you may run into problems.

As in the example, we want to access the SlidingMenu instance’s variables somehow. But because the this keyword is already used to reference the DOM object, we have to find another way.

Fortunately, jQuery allows us to do this fairly easily. To do it, we can pass another parameter to the bind function, which will be placed right between the event type and the callback function, and this parameter has to be an object. You probably noticed the event parameter in the change_image function above. To every callback function is automatically passed an event parameter that contains a handful of useful information, including which element was clicked. And with the extended call of the bind function, we can pass the SlidingMenu instance object through the event parameter as well. We can then access this object through event.data. Here’s a basic example:

function ImageData () // This will be an object that contains information about an image, much like our SlidingMenu class contains information about the sliding menu.
{
    this.width = "500";
    this.height = "200";
    this.src = "images/example_image.png";
}

// We create an instance of ImageData.
var image_instance = new ImageData();

// We bind the change_image function to the click event, passing along the image_instance data object as well.
$("#example_image").bind ( "click", image_instance, change_image );

// The callback function.
function change_image ( event )
{
    this.src = event.data.width; // event.data refers to the image_instance object
    this.src = event.data.height;
    this.src = event.data.src;
}

This example illustrates well how we can access both the DOM element on which the event occurred and the data object we passed through. We access the former through the this keyword, and we access the latter through event.data.

Now it finally makes sense why we used this extended version of the function call when binding the click event to the buttons. And because this will always refer to the DOM element in this context, we used the self variable as a substitute, to pass the SlidingMenu instance to the callback function.

Here it is again:

var self = this;
$( ".menu .menu_button" ).bind( "click", self, on_click );

Moving Along

The last part in our class definition simply slides out the first panel using its slide method. But because we haven’t defined such a function yet, the line below the class definition also becomes important:

SlidingMenu.prototype.slide = slide;

We use JavaScript’s prototype mechanism to extend our SlidingMenu object with the slide method.

This approach has two main benefits. First, the slider function can now access the variables of any class instance directly using the this keyword. (Because no event handling is involved directly in this function, this now refers to the SlidingMenu instance. You’ll see with on_click that we will need to access it through event.data).

Secondly, using prototype instead of directly writing this method inside the class improves memory usage if we make more than one instance of SlidingMenu, because we don’t have to create the slide functions every time we create a new instance: they’ll always use the external function.

The Slide Function

As we’ve discussed, slide is responsible for sliding the panels in and out. It will be called from the on_click function (see below) and uses the same parameters as before.

function slide ( width )
{
    this.is_animation_running = true;
    var self = this;
    this.active_menu.animate (
    { 'width' : width },
    this.effect_duration,
    function ()
    {
        self.is_animation_running = false;
    }
    );
}

You can see we put this before every variable, and it now refers to the class instance’s variables. This way, we don’t have to pass the variables as function parameters to access or even modify them, and no matter how many instances we create of SlidingMenu, they’ll always refer to the correct variables.

You may have noticed that we introduced a variable called self. We basically did this for the same reason we did it in our class definition: because jQuery handles this last parameter similar to event handling. If we used this instead, it would refer to the DOM object. Try it out: it won’t work properly. By introducing the self variable, the animations run as expected.

The last thing worth mentioning is that we replaced the menu_slider parameter with the class instance’s active_menu variable. So from now on, we can just set this variable from anywhere and it will animate the current active_menu automatically. It’s just for convenience: one less parameter to pass.

The on_click Function

Finally, let’s look at the on_click function. Here we put all the code that describes what happens after the user clicks a menu_button. It performs the same checks as before and uses the slide function to hide and reveal menu objects. This method accesses the class variables through the event.data that we passed along in our class definition.

You can also see that we pass only one parameter to our modified slide function (the desired width of the element), so it knows whether to slide it in or out; but the element that needs to be animated will be accessed directly through the active_menu variable.

function on_click ( event )
{
// First check if the active_menu button was clicked. If so, we do nothing. ( return )
if ( $(this).next()[0] == event.data.active_menu[0] ) // Remember, active_menu refers to the image ( thus next() ).
{
    return;
}
// Check if animation is running. If it is, we interrupt.
if ( event.data.is_animation_running )
{
    return;
}
// Get the item next to the button.
var menu_slider = $(this).next();
// First slide in the active_menu.
event.data.slide ( 0 );
// Set the active menu to the current image.
event.data.active_menu = menu_slider;
// Then slide out the clicked menu.
event.data.slide ( 253 );
}

Customization

By now, our sliding menu should work exactly as we want, and we don’t have to worry about it interfering with other JavaScript code.

One last thing to do before we wrap it up is to make the SlidingMenu class a bit more flexible, because it’s way too rigid. As it is now:

• It works only with a container with the class name menu;
• It works only with menu images that are 253 pixels long;
• It works only when the animation duration is set to 1 second.

To fix these, we’ll pass three more variables to the SlidingMenu constructor: container_name will contain the class (or id, see below) of the menu container div; menu_slider_length will specify the width of the images we slide out; and duration will set the animation’s length in milliseconds.

function SlidingMenu ( container_name, menu_slider_width, duration ) // Note the new parameters.
{
        var self = this;
    $( container_name + " .menu_button" ).bind ( "click", self, on_click ); // We bind to the specified element.

    this.effect_duration = duration; // New variable 1.
    this.menu_slider_width = menu_slider_width; // New variable 2.
    this.is_animation_running = false;
    this.active_menu = $($( container_name + " .menu_slider" )[0]);

    this.slide ( this.menu_slider_width ); // We replaced 253 with the arbitrary variable.

}

SlidingMenu.prototype.slide = slide;

// Function to render the animation.
function slide ( width )
{
    this.is_animation_running = true;
    this.active_menu.animate (
    { 'width' : width },
    this.effect_duration, // Replace 1000 with the duration variable.
    function ()
    {
        this.is_animation_running = false;
    }
    );
}

function on_click ( event )
{
    if ( $(this).next()[0] == active_menu[0] )
    {
        return;
    }
    if ( event.data.is_animation_running )
    {
        return;
    }

    var menu_slider = $(this).next();
    event.data.slide ( 0 );
    this.active_menu = menu_slider;
    event.data.slide ( event.data.effect_duration ); // Slide with the specified amount.
}

var sl = new SlidingMenu( ".menu", 253, 1000 ); // We pass the three new parameters when creating an instance.

We simply replaced the variables with the three new ones where needed. You can see that we could do a lot more customization here; for example, replacing not just the main container name (.menu) but the ones we’ve been calling .menu_button and menu_slider all along. But we’ll leave that up to you.

You could even specify an id for the main container (i.e. #menu) if you’d like. Everything has become a bit friendlier and more flexible all of a sudden.

In the demo below you can specify an arbitrary number for the duration of the animation (in milliseconds) and the width of the images. Play around with it.

Of course, changing the width of the images makes more sense when you use images on your website that are not exactly 253 pixels wide. Then you can simply call the SlidingMenu constructor with the correct width, and you’re set.

Getting a Bit More Complex

Another thing I mentioned at the beginning of this tutorial is that because we’re concerned only about the containers of the elements, menu_slider can be any element that has the class menu_slider. So, as a more complex example, menu_slider could be a div containing a list of sub-menu items:

Looking much better, right? Of course, when using it for real, you would add a link to each of those list items, so that when the user clicks on it, it loads the corresponding page.

By the way, if you don’t want the text to shrink with the width of the container (as in the example above), then add width: 253px; to your CSS file, where you substitute 253px with the desired width. Here is all of the additional CSS that I used for the demo above:

.menu .menu_slider ul {
    position : relative;
    top : -100px;
    left : -35px;
    font-size : 12px;
}

.menu .menu_slider img {
    width : 253px;
    height : 158px;
}

.menu .menu_slider ul li {
    list-style : none;
    background : #fff;
    color : #333;
    cursor : pointer;
}

.menu .menu_slider p {
    width : 253px;
    margin-left : 5px;
}

The only thing worth mentioning here is the font size. Because we defined the menu’s width, height and pretty much everything else in pixels, also setting the font size to a particular number is better, so that it looks consistent across different browsers.

In addition, you can see that on mouse-over the menu items become clearer and more defined. This is achieved by changing the opacity of the list elements on hover. Instead of using various CSS hacks for cross-browser compatibility, we’ll trust jQuery on this one: simply use the fadeTo method to fade in and out:

$(".menu .menu_slider ul li").bind ( "mouseover", function () {
    $(this).fadeTo ( "fast", "1.0" );
    } );
$(".menu .menu_slider ul li").bind ( "mouseout", function () {
    $(this).fadeTo ( "fast", "0.8" );
     } );

// This line is used to make them fade out by default.
$(".menu .menu_slider li").fadeTo ( "fast", 0.8 );

Wrapping Up

Congratulations! You made it! By now you should have a working JavaScript sliding menu. More importantly, you should have some understanding of how it works and how to incorporate your own ideas into this model. Hopefully you’ve learned something useful in this tutorial. Now, to reap the rewards, all you have to do is grab all of this code we’ve written and load it on page load, jQuery-style:

$(document).ready( function() {
    // All code goes here.
});

To make it even easier, here are all the source files for both the simple and complex examples you saw above:

• jQuery sliding menu, simple;
• jQuery sliding menu with sub-categories.

Remember we talked about integrating your code in your website at the beginning of this tutorial? Well, now you can experiment all you want, see how it works and make the necessary adjustments. For example, if you have static content, you might want to change the trigger from click to mouseover, so that the menu begins sliding as soon as you mouse over it. This way the pages can be loaded when the user clicks on the images or buttons. Or you can play around with various highlighting solutions: maybe put a nice border around the images on mouse-over. It’s totally up to you. Have fun!

What Next?

Well, we can still do a lot here. We still haven’t covered optimization and customization. And of course, the animation is still just a simple slide; as I mentioned, you could achieve the same effect with the jQuery accordion plug-in.

But this is where it gets interesting. Now that we have a solid foundation, we can think about some advanced effects and make our little application even easier to use. We’ll cover some of these and the aforementioned topics in the next part.