jQuery Tutorial: Part II: Cascading Menu

A cascading menu is a navigation technique that can add a lot of style to any website. Without flash, you can create a flash-like navigation system that is not only fun to look at and use, but is also functional and organized.

We will be creating a very ugly cascading menu for this tutorial, but with a bit of CSS knowledge and creativity, you can make yourself a custom-made and fun menu. Here is what we’ll be making:

Cascading Menu: jQuery.Webitect.net/cascading_menu

Included in this Tutorial

  • Terminology
  • Events: click() event
  • Using classes and ID’s
  • Toggle() method
  • Customizing your own menu

Terminology

Instead of going over the finer details, I found a great website that goes over various JavaScript terminology such as objects, methods, properties, and more.

Go over these quickly if you’ve never dealt with object oriented programming. JavaScript uses these regularly, and understanding these will help you learn to create scripts on your own someday.

Events: click() event

Events are a type of method that act on an element, when the user does something. For example, the click() event is only triggered when the user clicks on the element. Let’s go back to our last code from the first jQuery tutorial.

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('p').hide();
              });
          </script>
     </head>
     <body>
          <p>A paragraph is here, along with other HTML stuff.</p>
     </body>
</html>

As you can recall, we hid a basic <p> paragraph element with the .hide() method.

Let’s say we only want to hide that paragraph if the user clicks on it. We will, of course, use the click event to do this.

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('p').click(function(){
                        $('p').hide();
                   });
              });
          </script>
     </head>
     <body>
          <p>A paragraph is here, along with other HTML stuff.</p>
     </body>
</html>

Let’s put what we just added into pseudo code:

Do this when the <p> paragraph element is clicked: execute the function that tells us to hide all <p> paragraph elements.

Go ahead and try out the code for yourself. Here’s an image view of what’s happening.

jquerytut_cm_1

*I would like to apologize for the blurry images in some resolutions. Click the image for the full image view.

For the purposes of making a menu though, we’re not going to want to completely hide it. We’re really going to want to have another element hide() or show(), such as a <ul> list, when the menu title, like this paragraph or a link, is clicked. So let’s follow the same concept to make it work for our purposes.

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('a').click(function(){
                        $('ul').hide();
                   });
              });
          </script>
     </head>
     <body>
          <p>
          <a href="#">A paragraph is here, along with other HTML stuff.</a>
               <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Exits</li>
               </ul>
          </p>
     </body>
</html>

As you can see, I changed the paragraph into a link, and changed the element being hidden to a <ul> list element. Here I’ve placed the appropriate portion of our script next to the English version.

$('a').click(function(){
     $('ul').hide();
});

Do this when the <a>anchor (hyperlink) element is clicked: execute the function that tells us to hide all <ul> list elements.

Note: This would still work if we left the <p> paragraph as a paragraph, rather than switching it too an <a> anchor element, but because it’s a menu it makes more sense to make it a link (Even if it leads to nowhere: #). It will also make the rest of your page simpler to work with, because I’m assuming you’ll have a lot of paragraph elements.

Here’s what’s happening with the above code now:

jquerytut_cm_2

*I would like to apologize for the blurry images in some resolutions. Click the image for the full image view.

Using classes and ID’s

Our code is working fine so far, but what if we need to add more than one menu item, with multiple links beneath each one? This is only practical for such a menu.

If you add more links and lists to our menu, you can see a problem. When any one of the <a> links are clicked, all of the <ul> lists are hidden at the same time. We, however, only want the the <ul> list below the specified <a> link title to hide or show.

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('a').click(function(){
                        $('ul').hide();
                   });
              });
          </script>
     </head>
     <body>
          <p>
          <a href="#">Site</a>
               <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          <a href="#">Tutorials</a>
               <ul>
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul>
          <a href="#">LinksOut</a>
               <ul>
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>
</html>

Because jQuery is so easy to use, the jQuery library has allowed us to specify between different elements in a similar format to CSS.

As you can recall, to claim an ID in CSS, you use the ‘#’ symbol. To claim a class, you use a ‘.’ symbol. For example:

#wrapper{
     // This specifies an element with an ID of 'wrapper'.
     // It uses the '#' symbol to show that it's an ID.
}
.wrapper{
     // This specified an element with a class of 'wrapper'.
     // Just like the ID 'wrapper', all elements containing this
     // class will have the attributes of this class.
}

We can use these symbols to match up classes or ID’s in the elements in the HTML, to the code in the jQuery script. Let’s work with the ‘Site’ menu first. We’ll use CSS ID’s for the rest of this menu, but note you can also use classes by replacing the ‘#’ with a ‘.’.

Let’s give the <a> ‘Site’ menu item an ID of ‘site’, and the <ul> list below it an ID of ‘siteHide’. Now we need to tell the script that when anything with the ID of ‘site’ is clicked, then hide anything with the ID of ‘siteHide’.

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('#site').click(function(){
                        $('#siteHide').hide();
                   });
              });
          </script>
     </head>
     <body>
          <p>
          <a href="#" id="site">Site</a>
               <ul id="siteHide">
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          <a href="#">Tutorials</a>
               <ul>
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul>
          <a href="#">LinksOut</a>
               <ul>
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>
</html>

With these added ID’s and specifications, our script will now only hide() the <ul> list element below the <a> Site link element, or the “siteHide” ID when the “site” ID is clicked. Here is the image view of before and after.

jquerytut_cm_3

As you can imagine, it’s quite simple to finish up the other links. It’s just a bunch of copying and pasting, and changing a few words around.

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('#site').click(function(){
                        $('#siteHide').hide();
                   });
                   $('#tutorials').click(function(){
                        $('#tutorialsHide').hide();
                   });

                   $('#linksout').click(function(){
                        $('#linksoutHide').hide();
                   });
              });
          </script>
     </head>
     <body>
          <p>
          <a href="#" id="site">Site</a>
               <ul id="siteHide">
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          <a href="#" id="tutorials">Tutorials</a>
               <ul id="tutorialsHide">
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul>
          <a href="#" id="linksout">LinksOut</a>
               <ul id="linksoutHide">
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>
</html>

Events: toggle() event

Because just hiding our lists isn’t doing us much good, the next step would be to change the code so that the element is shown when it is clicked only if it is hidden, and vice versa: when the element it hidden, it should be shown when clicked. In other words, it toggles back and forth between show() and hide().

jQuery has made a special event to do this. It is called the toggle() method. By replacing all the .hide() methods in our script to .toggle(), our menu will finally work the way it’s supposed to:

<html>
     <head>
          <title>A jQuery Script</title>
          <script src="jquery-1.2.6.js" type="text/javascript" /></script>
          <script type="text/javascript">
              $(document).ready(function(){
                   $('#site').click(function(){
                        $('#siteHide').toggle();
                   });
                   $('#tutorials').click(function(){
                        $('#tutorialsHide').toggle();
                   });

                   $('#linksout').click(function(){
                        $('#linksoutHide').toggle();
                   });
              });
          </script>
     </head>
     <body>
          <p>
          <a href="#" id="site">Site</a>
               <ul id="siteHide">
                    <li>Home</li>
                    <li>About</li>
                    <li>Blog</li>
                    <li>Affiliates</li>
               </ul>
          <a href="#" id="tutorials">Tutorials</a>
               <ul id="tutorialsHide">
                    <li>jQuery</li>
                    <li>PHP</li>
                    <li>Illustrator</li>
                    <li>Paint Shop Pro</li>
               </ul>
          <a href="#" id="linksout">LinksOut</a>
               <ul id="linksoutHide">
                    <li>Webitect</li>
                    <li>W3.org</li>
                    <li>Google</li>
               </ul>
          </p>
     </body>
</html>

As you can see, each specified <a> link element toggles the correct <ul> element below it.

Customizing your own menu

As you can tell, it’s a pretty ugly cascading menu as of now, so the next step would be to add some CSS styles to it, and make it look more like a menu.

You’ll also want to change the links inside the <ul> list elements to your own links, opposed to just text like it is right now. You can add sub-menus by adding more nested <ul> lists, and specifying the code in the jQuery script appropriately.

As you can see, with simple jQuery you can completely replace a common feature used in Flash websites. In the next tutorial I’ll discuss parameters, and how you can use them specifically with this menu for creating effects that look more dynamic like Flash, with special effects.

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

5 Comments

  1. Kari

    January 20th, 2009 at 10:11 pm

    Sweet, thanks for the tutorial Kayla! I loveee new menu ideas :)

  2. faye

    January 22nd, 2009 at 08:09 pm

    wow. I remember using something like that YEARS ago for pizco. Ive been trying to find the code for it for AGESSS! Lol. Shame I dont need it now. :P

  3. Jay

    January 22nd, 2009 at 09:22 pm

    The first time I rushed and had problems, but then I took my time and it worked fine for my test. Will most likely be using in the near future. Way easier than I thought !

  4. deepa

    March 10th, 2009 at 12:01 am

    Very useful tutorial for beginners….i have been struggling with jquery for past 2 days and this one just so simple and sweet…a big thank you

  5. Nokes

    March 11th, 2009 at 06:06 am

    heavy!! good code thanks