jQuery Menu Example

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. +1 for Kristjan idea,
   How can I implement it on WP 2.3 ?

   Anyone could help us ?

   Cotp

6. 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 🙂

7. Do you also have an example online? Would be nice to see it in action…

8. Its a sidebar on my blog 🙂 here -> http://kristjan.eprostor.net

9. 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.

10. Yes… im actually working on it… this is only kinda “beta” 😀

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

12. I’ve just added another example which I think will answer your question…

13. 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.

14. 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.

15. You are right about the cookies – I’ll see what I can come up with early next week…

    Update: I think Jörn Zaefferer’s Treeview plugin might be just the thing you are looking for:

    bassistance.de/jquery-plugins/jquery-plugin-treeview

16. Contact me when you’ll be implanting it into Wp sidebar 😛
    Your jQuerry looks amazing 😉

17. 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.

18. 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?

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

    alwaysOpen: false,

20. 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
    });

21. 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.

22. Works like a charm mate thanks!!
    
    http://www.badassbrits.com

23. 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.

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

25. 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.

26. 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

27. 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!

28. I am very new to jQuery..i made a little approach using jQuery to do something like Digg

    http://customthemedesign.com/digg-menu/

    thanks 🙂

29. 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.

30. 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?!

31. 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

32. 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

33. THAKS VERY GOOD

34. 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

35. 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.

36. thank you.. : )

37. 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…

38. 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

39. 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 ?

40. 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!

41. 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.

42. Thanks you this is wonderful and professional.

43. Hi Kristjan ,

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

    Ps..Great work

    Cheers

    Craig

44. sorry i mean “Hi Thomas”…. its been a long day :0.

45. 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 🙂

46. great explanation

    thanks for article

    Turkcell kontor

47. 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

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

    -andy

49. 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

50. 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.