Friday, January 21, 2011

MLA Menu - a jQuery accordion menu

I have written a jQuery plugin that supports infinite level of unordered lists. It is easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.



52 comments:

  1. Nice menu.
    put 'http://' on jquery link code.jquery.com/jquery-latest.js

    ReplyDelete
  2. Sweet! I've been looking for something like this for a while. Thanks for sharing!

    ReplyDelete
  3. Awesome on many levels, thanks dude!!
    Quick question, (I might figure it out before a response, but nevertheless please respond) How would I go about making it so that the other first level menus do not recede when another is clicked. So to create a kinda stacking effect.

    ReplyDelete
  4. Ndoromo,
    all you have to do is remove this line of code from the navigation.js file:
    $(this).parent('li').parent('ul').children('li').children('ul').hide(slideSpeed);
    I think that should do it.

    ReplyDelete
  5. I have updated the navigation.js script to allow you to choose whether or not the menu should collapse.
    In the navigation.js file, in the setup section, you will see:

    //setup - all values in pixels
    var navWidth = 180;
    var ulIndent = 15;
    collapse = true;
    //end setup

    set collapse = false to prevent the menu from collapsing when another item is expanded.

    ReplyDelete
  6. I really admire your superb accordion menu, so much so that today I've customized five for my in-law's website that I'm making for him as a favour.

    All sub menus perform wonderfully (of course they would, it's your expert code with only a few tweeks in size/appearance from me!) but I seem unable to combine the index webpage with any widget successfully, hence the blank space on the left.

    I'm a born again web designer here, first webpage in 10 years, so the problem is me - and my coding skills. I've made the two SWF page objects transparent (as suggested by Adobe in their help section) since spry widgets and Flash don't inter marry very well, but to no avail.

    Any and all suggestions welcome! Many thanks in advance of any ideas. Best regards, Gordon

    ReplyDelete
  7. Dreamweaver Postscript. I must have had square eyes, or too many Gordon's gin and tonics! The accordion menu freshly placed just now is working perfectly. Many thanks for your super coding!

    ReplyDelete
  8. Great. Thanks a lot. Best example I have been (and I have been trying t do this for several hours!). Cheers

    ReplyDelete
  9. Thx for the great jquery plugin, but is it possible to auto open particular node on page reload using some query string parameters.

    ReplyDelete
  10. You don't need any query string parameters. The menu will automatically open to the current list item if the window.location.pathname == the 'href' attribute of the list item. If you want to hard code a certain item to automatically open, all you have to do is add the class 'Current' to the anchor tag you want to be open.
    <a href="yourpage.htm" class="Current">Open Link</a>

    ReplyDelete
    Replies
    1. Hi Brock, awesome menu plugin, have not found anything out there close to it. Small thing, i can't get the current list item to automatically work - I have had to manually add the class to each page (working with about 100 here) where it is the current page. I am doing the menu as a dreamweaver library item, so could that be messing it up? IF you want to see the example please let me know and i can email you the location.

      Cheers.

      Delete
  11. Awesome! Exactly what I was looking for!

    ReplyDelete
  12. Great plug-in!
    Any tips for degradation to non-Javscript browsers?

    ReplyDelete
  13. Great plugin - any tips how to remove cufon and use a Systemfont like Arial?

    Anyway GREAT work!

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Is there a way to set this up so that you have to click only the arrow to open the tabs rather then the link? Each of my links has a page i would like users to be able to open. But if they click them it only opens the tabs.

    ReplyDelete
  16. This is for the Anonymous poster who asked about using normal font vs Cufon. You just need to get rid of the Cufon javascript and then take out the style tag that hides the body towards the top. That should do it for you. You can also get rid of the font.js in there too.

    ReplyDelete
  17. Hi, thanks for this great plugin! I have a question, I´m trying to get rid off the 40 px left padding and haven´t found where to set it to 0... how could I remove it? Thanks!

    ReplyDelete
  18. how to make menu collapse when on initial load

    ReplyDelete
    Replies
    1. Might try...

      body onload="CollapseAll()"

      Delete
  19. Hi! Lots of thanks for your plugin!
    A very important thing: I need to show arrows on every sub li that has ul's like in windows tree view. How can I do this? Please help me, the job is failing!

    And yes, is it possible to make the arrows (carrots) clickable?

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. @garry-houdini - you can put arrows in front of each list item by going to navigation.js and doing a prepend. You can also make them clickable by changing some of the logic in the ("#nav a")click function - start by changing that to ("#nav img"). You'll also want to tell it to change the image attr when clicked.

    You'll also want to comment out the section that changes the background in navigation.js - in fact, if you change the jQuery from tweaking the background to swapping the image, you should be on your way.

    I just started playing with this, and I'm already getting somewhere with it. Once I have a good solution, I'll let you guys know what I did.

    ReplyDelete
  22. Thanks a lot, @BigMagoo! I was waiting for the reply reloading the page many times a day :)
    Will try understanding and doing what you said. Looking forward in seeing a working example. Maybe I'll show you mine a bit later. But it's all in Russian ;-)

    ReplyDelete
  23. Hi, the plugin works fine, but i want to put arrows on every List item including the inner levels and get the extanded ones to have the open arrow is that possible to do easly?

    ReplyDelete
  24. Is there a possibility to expand menu on hover and open links on each level? (i.e. when cursor is over (hover not clicked) "first level menu" menu expands showing "second level menu" options. Next, when cursor is over "second level menu" script expands corresponding "third level menu" options , but when aforementioned "second level menu" is clicked a page with some href is opened. (currently one can put links on most nested level only)

    ReplyDelete
  25. Hi, how run in IE6+ in same page 3 more Multi Level Accordion Menu??

    I try it but, in ie6 and ie7 no work... =/

    Please help!

    ReplyDelete
  26. K, guys. I sent Brock my modified files to make the arrows clickable and put them on all levels. Now the links are actual links and only clicking the arrows will expand/contract them. It's now the default demo and download. Try it out and let me know what you guys think.

    ReplyDelete
  27. I am usability expert. According to user both link and arrow should be clickable and should be able to expand menu sub area.If possible please put old demo files too for download.

    ReplyDelete
  28. Really like the menu. Quick question though. I'd like to make the menu stay open when you are on one of the child pages. i.e. click on a group arrow, I pick a page in the group and I'm now on the new page. I'd like the group to still be open and showing the children pages, not collapsed.

    ReplyDelete
  29. Jim, as long as you're not using absolute links in the menu or query strings in the URL, it should already do that. There is a part in the code that says to add the class "Current" if the current location = the 'href' of the 'a' tag. If you're using query strings in the URL's, I figured out a way to get it to work, and you can see it in action at:

    http://loopsknitting.com

    If you want, I can show you what I did there, and maybe it could point you in the right direction.

    ReplyDelete
  30. Thank you, that worked like a charm.

    ReplyDelete
  31. Great script! I was was wondering when I include some menu items that had no children, and all of the other expanded menus can close?

    ReplyDelete
  32. @BigMagoo

    What Jim asked you about the Menu staying open, when you click a item in the menu. Can you tell how you can do that?

    ReplyDelete
  33. When you use a query to build your string and you want to keep your menu open when you click a link, change "pathname" to "href" in the "//Required section" bit. It then checks the link URL with your Nav a HREF URL.

    It will then add the Current class to the right links and keep it open.

    ReplyDelete
    Replies
    1. I tried that and it doesn't work for me...
      **scratches head**

      Delete
  34. This comment has been removed by the author.

    ReplyDelete
  35. Hi, first off great work! I had some problems but fixed them myself. But I do have one question and hopefully people still read the comments on this page.. I have a menu like this:
    link 1
    link 1.1
    link 1.2
    link 2
    I need links like link 1 to also open a page.. Is that possible? Now it only slides open and shows the other links but doesn't open the link I put in the codes.. Hope somebody can help me!

    ReplyDelete
  36. Never mind! i got it.
    For everybody who also want what i wanted.
    add: if($(this).attr('href') == '#') {
    after $('#nav a').click(function () {
    and there you go (dont forget to close with })

    ReplyDelete
  37. Very nice script indeed, fella. I'm in the process of creating a Perfect Accordion Menu review - similar to my Perfect CSS Menu review here:

    http://www.mykeblack.com/seo/the-perfect-multi-level-accessible-css-menu

    I'm trying to find a menu that fits these criteria:

    1. Pure CSS or jQuery based
    2. Constructed using nested ul and li tags
    3. Search engine friendly
    4. Ability to remember state across pages, (or insert a css style to indicate expanded items).
    5. Able to support any number of levels
    6. Work in older browsers from ie6 onwards with graceful degredation for unsupported browsers
    7. Keyboard accessible using Tab and Enter
    8. Keyboard accessible using cursor keys and enter
    9. Option for sublevel indicator image or css sprite which has open and closed submenu states.
    10. Option for animated open and close actions
    11. Option for closing previously opened submenu when a different submenu is clicked or keep all panels open
    12. Able to embed more than one accordion menu on the page at once.
    13. Has event handler for 'close all' and 'open all' links
    14. Is free.
    15. Easy to customise appearance in CSS.


    At the minute, this menu is one of the closest ones that I've found which match all the criteria. The most notable exceptions though are keyboard accessibility and the lack of support for 'expand all' and 'close all' links. In it's present form, this menu scores 12 out of 15 which is pretty good. If you could add tab and enter keyboard accessibility, it could be the winner.

    cheers.

    ReplyDelete
  38. The results are in. This menu scores a commendable 16 out of 20 points (although this is just my own scoring criteria and not an objective measure). Well done.
    now if you can just add tab and enter functionality, event handlers for external open all and close all links and event handlers to open individual panels with external links, it would be the clear winner!

    ReplyDelete
  39. This is a great setup! I'm having an issue with IE7 though: on every page load, the entire menu is expanded, but it will collapse when clicked. Is there a workaround to make the non-active links collapsed with IE7? Thanks!

    ReplyDelete
  40. Hi there. I would like to explore your code but when I try to download it I get a message that I do not have permission to do so. How can I get permission?

    ReplyDelete
  41. Still can't download your code. can someone help with this.

    Thanx

    ReplyDelete
  42. Hi,
    just open the demo site and save page as.. in your browser, or just use ctrl+u (or even firebug in FF)to see the most important thing - the navigation.js.

    Very, very interesting and powerful example of accordion menu.

    Greets!

    ReplyDelete
  43. This comment has been removed by the author.

    ReplyDelete
  44. The issue of not being able to download the file has been resolved. I apologize about any inconveniences this may have caused.

    ReplyDelete
  45. Something amiss in IE7 (and possibly IE8 - just can't check it right now). When attempting to hover over the expand all and collapse all links the hit area keeps falling off (kind of like when you do text in flash and don't make a hit area) it faulters between a cursor and a hand and can make it hard to use the functions in IE7. Other browsers work fine. Is there any possible workaround to this problem? The majority of my users will unfortunately be using IE7 as I work in education department (enough said).

    ReplyDelete
  46. Hi, Great menu!!! how can i make both link and arrow able to expand menu sub area. I do not need those to be links... just expand and collapse sub menu only.

    Thanks

    ReplyDelete
  47. Hi, great job!!

    I just whatn to know if is there any way to expand a menu item onLoad?
    Example:

    Item 1
    Item1.1
    Item1.2
    Item1.3
    Item1.4

    Item 2
    Item2.1
    Item2.2
    Item2.3

    Item3

    I whant Item2 to be expanded when the page is loaded.

    ReplyDelete
  48. Hi, How does one get the exact matching URL? Currently if we have a url with say "/Bikes" and another in the menu called "/B" they both get active classes applied and therefore they are both open...how do we get jquery to match the URL exactly with "window.location.pathname"?

    ReplyDelete