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.
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.
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.
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.
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
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!
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>
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.
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.
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.
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!
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?
@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.
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 ;-)
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?
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)
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.
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.
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.
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.
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.
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!
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 })
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.
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!
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!
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?
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.
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).
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.
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"?
Fascinating blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog shine. Please let me know where you got your design. Kudos
Wow that was unusual. I just wrote an extremely long comment but after I clicked submit my comment didn't show up. Grrrr... well I'm not writing all that over again. Anyways, just wanted to say great blog!
Nice menu.
ReplyDeleteput 'http://' on jquery link code.jquery.com/jquery-latest.js
Sweet! I've been looking for something like this for a while. Thanks for sharing!
ReplyDeleteAwesome on many levels, thanks dude!!
ReplyDeleteQuick 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.
Ndoromo,
ReplyDeleteall 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.
I have updated the navigation.js script to allow you to choose whether or not the menu should collapse.
ReplyDeleteIn 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.
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.
ReplyDeleteAll 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
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!
ReplyDeleteGreat. Thanks a lot. Best example I have been (and I have been trying t do this for several hours!). Cheers
ReplyDeleteThx for the great jquery plugin, but is it possible to auto open particular node on page reload using some query string parameters.
ReplyDeleteYou 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.
ReplyDelete<a href="yourpage.htm" class="Current">Open Link</a>
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.
DeleteCheers.
Awesome! Exactly what I was looking for!
ReplyDeleteGreat plug-in!
ReplyDeleteAny tips for degradation to non-Javscript browsers?
Great plugin - any tips how to remove cufon and use a Systemfont like Arial?
ReplyDeleteAnyway GREAT work!
This comment has been removed by the author.
ReplyDeleteIs 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.
ReplyDeleteThis 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.
ReplyDeleteHi, 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!
ReplyDeletehow to make menu collapse when on initial load
ReplyDeleteMight try...
Deletebody onload="CollapseAll()"
Hi! Lots of thanks for your plugin!
ReplyDeleteA 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?
This comment has been removed by the author.
ReplyDelete@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.
ReplyDeleteYou'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.
Thanks a lot, @BigMagoo! I was waiting for the reply reloading the page many times a day :)
ReplyDeleteWill 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 ;-)
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?
ReplyDeleteIs 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)
ReplyDeleteHi, how run in IE6+ in same page 3 more Multi Level Accordion Menu??
ReplyDeleteI try it but, in ie6 and ie7 no work... =/
Please help!
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.
ReplyDeleteI 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.
ReplyDeleteReally 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.
ReplyDeleteJim, 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:
ReplyDeletehttp://loopsknitting.com
If you want, I can show you what I did there, and maybe it could point you in the right direction.
Thank you, that worked like a charm.
ReplyDeleteGreat 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@BigMagoo
ReplyDeleteWhat Jim asked you about the Menu staying open, when you click a item in the menu. Can you tell how you can do that?
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.
ReplyDeleteIt will then add the Current class to the right links and keep it open.
I tried that and it doesn't work for me...
Delete**scratches head**
This comment has been removed by the author.
ReplyDeleteHi, 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:
ReplyDeletelink 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!
Never mind! i got it.
ReplyDeleteFor 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 })
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:
ReplyDeletehttp://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.
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.
ReplyDeletenow 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!
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!
ReplyDeleteHi 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?
ReplyDeleteStill can't download your code. can someone help with this.
ReplyDeleteThanx
Hi,
ReplyDeletejust 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!
This comment has been removed by the author.
ReplyDeleteThe issue of not being able to download the file has been resolved. I apologize about any inconveniences this may have caused.
ReplyDeleteSomething 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).
ReplyDeleteHi, 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.
ReplyDeleteThanks
Hi, great job!!
ReplyDeleteI 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.
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"?
ReplyDeletecan not download
ReplyDeleteFascinating blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog shine. Please let me know where you got your design. Kudos
ReplyDeleteWow that was unusual. I just wrote an extremely long comment but after I clicked submit my comment didn't show up. Grrrr... well I'm not writing all that over again. Anyways, just wanted to say great blog!
ReplyDelete