Slide menu using JQuery

Ahmed Shokr

3.67/5 (12 votes)

10 Jul 2008CPOL

1.7K

JavaScript slide menu with JQuery.

Download sample menu - 30.2 KB

Introduction

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <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>
    <script type="text/javascript" language="javascript" 
            src="scripts/CustomMenu.js"></script>
</head>
<body>
<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>
    <li>
    - Item 1 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    </ul>
    </li>
    <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>
    </ul>
    </li>
    <li>
    - Item 3 with children
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li></ul>
    </li>
    </ul>
</body>
</html>

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

JavaScript

$(function() // Register the menu
      {
// Add the click event handler on the list item with sub list
$('li:has(ul)') 
           .click(function(event){
            if (this == event.target) {
               // Hide all the children of the other lists
               $('li:has(ul)').children().hide('slow'); 
               // Make the animation
               $(this).children().animate({opacity:'toggle',height:'toggle'},'slow'); 
                                      }
                     return false;
                                 }
                   )
            // Change the cusrsor.
           .css({cursor:'pointer'})
           // Hide all the nested lists (on the first tinm only).
           .children().hide();
       }
 );

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

Menu at start:

Menu in action:

Points of Interest

jQuery is a very useful JavaScript library, you should use it! I'll post about JQuery selectors and other operators soon.

I hope that helped.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)