jQuery Menu Example

After taking a closer look at the genius jQuery JavaScript Library I decided to post an example on how easy you can create a nice looking, space-saving navigation menu.

It’s nothing fancy (yet) but can easily become very good-looking indeed. Take a look at the tiny Navigation Menu Example and judge for yourself. The example is based mainly on the jQuery plugin: Accordion, and the only main difference is the up and down arrows included in the “slightly modified” CSS.

I’m thinking of implementing this plugin in my new WP theme (which is currently only available in my head) in order to display more info in less space. Another thing worth mentioning is that the code itself degrades beautifully on browsers without Java support as this only results in all menus being shown in “expanded” modus.

Note! If you’re wondering why I’ve set the anchor tag href to javascript:; it is to basically make nothing happen rather than the common do-nothing insert to use for the href property which is a pound sign (#). Even if that would work also it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying.

Update: Based on user feedback I’ve added an example showing how to add a second level within the list.

60 Comments on “jQuery Menu Example”

  1. Those arrows look great.

    You don’t have to use anchor elements when you don’t want any. You could just use spans or h3s or whatever, add cursor: hand to your stylesheet and apply the accordion as usual. That way you don’t have to specify a useless href attribute.

  2. Hi Jörn and thanks for the thumbs-up 🙂

    Also thanks for the tip regarding the “empty” anchors. But then again I got the opportunity to mention an alternative to the # anchor, which as you probably would agree can be quite annoying from time to time…

  3. Is it possible to make wordpress plugin to automaticly make sidebar menu collapsible and expandible?

  4. The effect is obtained simply by adding the JavaScript and Library + CSS to the header file and by including the HTML off course.

    However, the jQuery library doesn’t always work well with Prototype so if the code doesn’t work I suppose you will have to look for alternatives…

    I will most likely add a similar menu after upgrading to WP 2.3. If I get it working I’ll let you know 🙂

  5. I’ve already done something in this way, but it doesn’t support widgets… Anyone wants further info? 🙂 Write mail at kristjan [at] eprostor dot net 🙂

  6. Saw it now (ops). Though it might be an idea to make it more obvious that something will happen if you click the expandable menus… Like e.g. an arrow or plus sign next to the text. So that visitors (including myself) wont overlook it. Just a thought.

  7. I have been trying to add a third level within the second but without any success yet. Any idea how that might be accomplished?

  8. Wow! A quick response with an example just like I was looking for. Such a refreshing change from the Mootools forum where there would either be no response or “Read the rules. No more accordion questions.” Thanks very much.

  9. Is it possible to have the state saved between pages? As an example, if I click on “Content 3 3” the “Title 3” section of the accordion will still be toggled open on the “Content 3 3” page. I assume this would be accomplished with a cookie. Thanks.

  10. Hi Kristjan,

    a “live” demo is now available at my development site: dev.evaria.com. Please consider the site yet another early “beta” – There will be errors, but I think I will get there pretty soon.

  11. I know this topic hasnt been used in a while I hope its still active?

    Is it possible to make the menu be active on the 1st h3 ie. open?

  12. You can make the first header active by default by removing to following line from the script:

    alwaysOpen: false,

  13. Thanks for the quick reply thomas, but that just stops me from reclicking or closing the active active h3? This is the code for the inline:

    jQuery().ready(function(){
    // applying the settings
    jQuery(‘#news_menu’).Accordion({
    active: ‘h3.selected’,
    header: ‘h3.head’,
    //alwaysOpen: false,
    animated: true,
    showSpeed: 500,
    hideSpeed: 400
    });

  14. Try this instead:

    jQuery('#news_menu').Accordion({
    //active: 'h3.selected', commented out
    header: 'h3.head',
    alwaysOpen: false,
    animated: true,
    showSpeed: 500,
    hideSpeed: 400
    });

    Let me know if that’s what you’re after.

  15. I would like to add a second level list on the rest of levels but I´ve added a second level list on the rest of levels like Title 3, Title 4, and it doesn´t work.
    Thak you.

  16. Not sure if I understand what you are after… Please leave a link to an example page or similar.

  17. So I have this working nicely in Firefox but not in IE (6 or 7), I’ve already changed my doc type to match the demo, no luck.

    Basically IE renders the lists but the JS hides everything as soon as it fires.

    Any ideas? What am I doing wrong, I can’t find it.

  18. Hi Sheldon, I assume your link points to your demo site?! If yes, I believe the problem is related to invalid mark-up…

    After just a quick look I noticed you’ve embedded style sheets in the body section of your page, also you’ve used headers H7 and H8. Move the styling to the header section and try using headers between 1-6 for starters. If you’ve still got problems please let me know.

    Besides that your page looks great! Good luck with your further development!

    Thomas

  19. Hi Thomas, thanks for the suggestion, changing h7+8 to h5+6 did the trick, I suppose I’ll change to normal classes to get around that in the future. Thanks again for the quick response much appreciated!

  20. Hello! I cant get this great menu to work. I assume that my accordion.js file is wrong. Even though i have copied your source code to test it, it doesn’t work at all. How can i get the accordion.js file?

    thanks in advance.

  21. Hi Athena, are you using more than just one Java library? If yes, it might be a conflict somewhere… If you use only my source code I can’t see any reason for it not to work as the example is working fine?!

  22. Hi, Im trying to use the jquery accordion and its works perfectly on Firefox, but in IE i had a problem, in IE I get and you too, a space between, each list element and apears a blank space, and for me its a big problem look http://telematicanet.ucol.mx/ctti17/index2.php I saw that you get the same mistake, did you fix this a the time????

    O sorry for my english
    thanks I hope you reply soon

  23. I fix this, first every acordion had list css for the positions like this:
    #theMenu2 {
    width: 200px;
    height: 152px;
    margin: 0px;
    position: absolute;
    top: 357px;
    left: 164px;
    }
    #ul2 li {
    padding: 0;
    width: 70px;
    margin-bottom: 0;
    border-right-width: 10px;
    border-right-style: solid;
    border-right-color: #FF0000;
    }

    ok. soo I do this for every acordion.. too place everyone in a diferent position, and for fix the space in IE I do this:

    #ul3 li {
    padding: -1px;
    width: 120px;
    margin-bottom: -3px;
    border-right-width: 10px;
    border-right-style: solid;
    border-right-color: #FF0000;
    margin-top: -1px;
    }

    Thats works for me fine, soo try it if you want or make some changes

  24. I am trying to have 2 menus on the same page but work independently of each other. I have given them different id’s but they when one menu comes down the other menu slides up.

    Can anyone help on this?

    Thanks

  25. The menu is good. Does anybody know any other kind of menus using jquery? I am looking for a two layered menu. If the top level element is clicked then the second nav bar appears. Any help, suggestions will be appreciated as I am fairly new to query.

  26. Hi,

    I used the multi level example and used that by adding another submenu (xtraMenu). But only the first will work in the example others are collapsed and will not “accordion”.

    What am I doing wrong ? I noticed a “Peter” asked the same type of question some time ago (juli) but I could not find an answer or direction for a solution…

  27. To make my previouis issue more clear..

    try to add more second level menu’s just by copying the current example. Only the first (and current) will work the others will not work and will not collapse. I cannot find the issue or fix

  28. Hello
    when loading/reloading page all menu tree is visible for 0,1s or longer.
    Is it possible to get rid off this annoying view of tree ?

  29. Hi, I’m having the same issue as “DENNIS” – where all of my second and third tier data in all panels except the first instance are alwaysOpen instead of being CLOSED and waiting.

    I tried changing the default settings on accordion.js for alwaysOpen from true to false but it had no effect.

    If you have any ideas on how to solve this I’d be very grateful. Thanks!

  30. Sometimes you just can’t see the OBVIOUS solution/problem until you step back from it for a moment.

    The reason that only the first instance of the tiers accordion and the rest are open is because we’ve been copying the code exactly and reusing it for each tier – and you CAN’T use the same ID on the page – no matter WHAT the purpose is… DOH!

    So, when I replace the duplicated ID’s with unique ID’s and created corresponding function calls for each – it all works just fine.

  31. Hi Kristjan ,

    I was just wondering if it’s possible to get the top level href working Title 1

    Ps..Great work

    Cheers

    Craig

  32. As Craig has asked is there any way to get the top level href working

    1. As it is used to trigger the event it can’t act as a link at the same time. However you may add a normal link on the same line and have the “event-link” to either side of that link. It’s a bit of a struggle with the CSS but it is doable.

      Let me know if you succeed and please add a link to show off your work 🙂

  33. Great work! I’m using this implementation in a multi-level menu. One issue I ran into was when I wanted to activate a particular submenu that was nested within others. I coded a series of “activate()” calls, but they didn’t always all use the correct index, even though the correct index was being passed in. I eventually concluded this was due to asynchronous handling of the “activate” events. I was able to fix this by using jQuery’s triggerHandler() method instead of trigger() as you’ve used in your active() method. I guess it makes the handling synchronous, and no more problems with my multi-level activations. You might want to make this change in your distribution.

    -andy

  34. Oops… should be “activate()” method, not “active()” method in my prior post.

    -andy

  35. Salut je suis étudiant en info licence genie logiciel et je souhaite avoir le code source de l’exemple présenter plus haut sur le menu deroulant. Mon probleme est chez moi tous les différents liens sont visibles je veux que lorsqu’on clique sur menu ses sous sont présentés et les sous menus des autres menus cachés tant qu’on n’a pas cliqué dessus
    merci

  36. I’d like show opened nested list after page refresh.

    How to add cookies for nested list Accordion example https://blog.evaria.com/wp-content/themes/blogvaria/jquery/index.php ?

    I can store current opened levels by cookies


    $("#xtraMenu ul li a").click(function(){
    $.cookie("openItem", $(this).attr("href"));
    });

    $("#theMenu li h3 a").click(function(){
    $.cookie("openItemMain", $(this).attr("href"));
    });

    But when I try to open necessary part – Accordion list not opening


    $("#theMenu li h3 a[href$='" + $.cookie("openItemMain") + "']").addClass("open");
    $("#xtraMenu ul li a[href$='" + $.cookie("openItem") + "']").addClass("open");

    Could you tell me what’s I doing wrong ?

    Thank you for great jQuery Accordion script once more! 🙂

Comments are closed.