Slide menu using jQuery


jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add AJAX interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

In this article, I’ll build a sliding JavaScript menu using jQuery.

Using the code

First, you must reference the jQuery library which can be downloaded form here. Then, you can make the menu HTML page as in the following code:

<html xmlns="" >
    <title>JQuery Sample Menu</title>
    <link rel="Stylesheet" type="text/css" href="styles/navigation.css" />
    <script type="text/javascript" language="javascript" src="scripts/jquery-1.2.3.js"/>
    <script type="text/javascript" language="javascript" src="scripts/CustomMenu.js"/>
<h2>This is a sample menu using JQuery</h2>
<h4>Try to click on the clickable items in the menu to see the animation</h4>
<ul class="menu">
    <li>- Parent item with no children</li>
    - Item 1 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    - Item 2 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    <li>Nested item 4</li>
    - Item 3 with children
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li></ul>

Now, for the JavaScript magic! Just use the following JavaScript piece of code:

$(function() // Register the menu
// Add the click event handler on the list item with sub list
            if (this == {
               // Hide all the children of the other lists
               // Make the animation
                     return false;
            // Change the cusrsor.
           // Hide all the nested lists (on the first tinm only).

Now you can have the sliding effect without so much JavaScript coding.

Menu at start:


Menu in action:


Sample project

I hope that helped


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s