Click on the image above to see a sample of the sliding menu we’re going to create.

Our tutorial will be divided into three sections:

1. Creating the HTML page containing our sliding menu.
2. Importing the MooTools JavaScript Framework.
3. Writing the JavaScript code required to create the sliding effect.

Creating the HTML Page

Our HTML page will contain our actual content of the sliding menu. To create one open your your HTML editor and create a simple HTML page, the contents of the body should be as follows:

We will have to assign an id to each of our div tags, the first div should have have its id assigned as menu_links, and the second one as menu. You can now start putting your menu links in the first div as well.

This concludes the HTML part of our tutorial. We will now import the MooTools JavaScript Framework and then start creating the effect using JavaScript.

Save this page anywhere on your hard drive.

Importing the MooTools JavaScript Framework

Start off by downloading the MooTools framework JavaScipt file from its official website, save the script in a folder named scripts to be located in the same directory as your HTML file. Back to your HTML page, you have to import our MooTools JS Framework into our HTML page header. You are required to type the code shown below to be able to do this.

Our preparations are all done now. We need to start scripting our sliding motion now.

Creating the Sliding Effect

The code for our sliding effect is pretty short. You can simply copy and paste this code to do the trick. We will explain in the following paragraphs how it works. Paste this code anywhere in the body of your HTML page.

We start off by creating a new instance of the Fx.Slide() class and assigned it to the variable called mySlide. As you can see, we passed the parameter menu_links to the Fx.Slide() object when we created it and that is the id or the div element we would like to slide.

We then created a click event for our div element that has the id menu so that when the user clicks on this div element a function attached to the click event is executed. It is necessary to pass the identifier of our event to this function.

Our function shall execute the o3dEvent as follows. We will examine it in detail now.

We create a variable called o3dEvent and assigned it to an event handler, which is a method to manage events happening on stage.

Our function will carry out this simply job using the toggle() method which slides in and out the element with the id menu_links as we have previously defined in our code.

We finally have to stop the event when sliding is finished.

Our actual code for creating the effect is done, but you might want to give it a proper graphical look by applying a style to it using CSS . This code is to be placed in the header of the HTML page.

That should do it, you can now test your HTML page to see your click-able menu that expands once clicked. You can download a working source file of this tutorial here. This concludes our tutorial, you can visit the official MooTools website to learn more about it