Download simple list menu

Demo

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

You can configure the menu by making changes to the CSS. Look in the code for examples how to do this.

Comments

michael
Thank you very much.I was looking about this menu style for a long time.
michael at 03:35PM, 2011/03/11.
sxc
Thank you very much.I was looking about this menu style for a long time.
sxc at 02:05AM, 2011/03/30.
Maggie
This script is amazing, I love it. I've also been looking for a simple menu like this for the longest.But I was wondering how I would go about changing the "#" in "a href="#" because every time I click to see the sub-links it takes me to the top of the page.
Maggie at 06:56AM, 2011/07/03.
Admin comment
DHTMLGoodies
Maggie,This can be fixed by adding return false;at the end of the showHideSub() function, i.e. function showHideSub(e,inputObj) { if(!inputObj)inputObj=this; var parentObj = inputObj.parentNode; var ul = parentObj.getElementsByTagName('UL')[0]; if(activeMenuItem.length>0){ for(var no=0;no<activeMenuItem.length;no++){ if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){ activeMenuItem[no].style.display='none'; activeMenuItem.splice(no,1); no--; } } } if(ul.offsetHeight == 0){ ul.style.display='block'; activeMenuItem.push(ul); }else{ ul.style.display='none'; } return false; }
DHTMLGoodies at 02:18PM, 2011/07/06.
Yishai Avior
Thank you so much, this script is great.I do however want to change one tiny thing and don't know how: I have a menu that only <i>some<i></i> of its items have sub-items. With this script, if I open a sub-menu, and then click on another item on the upper menu - the sub-menu doesn't close... how can I close it if I don't have a "#" on the <a href=""></a> because it's a direct link?
Yishai Avior at 02:59PM, 2011/08/05.
BigJay
Great script but I can't seem to find how to add additional space between the menu items and also to center the menu on the screen. Any ideas?
BigJay at 02:31AM, 2011/11/01.
Dany
Awesome script. First time posting here. I was trying to add a sub-menu to one of the sub-menus by adding a <ul></ul>underneath one of the <li></li> but the menu won't open another menu underneath. Is there any way to fix that? I'm not familiar with javascript so i'm kind of scared to mess with the code.
Dany at 08:37PM, 2011/11/14.
Mael
Hi,My web application use a URL mapping mechanism, so when "/home/index" is called, the document location is "/".How can I modify the script, so when the URL is "/", the active menu item is automatically the first item in the menu?Thanks.
Mael at 07:09PM, 2012/05/07.
Mael
Nevermind, I found my problem and fixed it. It was a simple redirection problem.
Mael at 05:24PM, 2012/05/08.
Mael
Hi,I found a small problem with the script.If you have 2 URLS ending with the same "name", let's say "http://your_webapp/servlet1/view" and "http://your_webapp/servlet2/view", they are considered the same (i.e: fileNameThis will be "view" in both cases), so the menu will expand when you don't want to.If you want to differenciate the two URLs, comment those 2 lines in the script:var thisLocationArray = location.href.split(/\//);var fileNameThis = thisLocationArray[thisLocationArray.length-1];and replace them with this line:var fileNameThis = location.href;That way, each URL is considered in its entirety.I hope it helps some people.Cheers.
Mael at 05:54PM, 2012/06/04.
Ryan
HiHow do i change it so that the menu does not expands automatically
Ryan at 07:34PM, 2012/12/24.
diego
<a href="#comment3616">Ryan wrote:</a>HiHow do i change it so that the menu does not expands automatically
Same to me, how i can disble the auto expand.Thanks!
diego at 01:15AM, 2013/03/08.
Tony Bright
HelloI am trying to use this code on my website. I would like to have the menu items click to expand a submenu but also to link to content. If I try this with an active link in the href for the main menu items it affects the expanding and collapsing of the menu. Is this possible?
Tony Bright at 07:05PM, 2013/05/09.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Unable to save captcha-image.