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 08:35AM, 2011/03/11.
sxc
Thank you very much.I was looking about this menu style for a long time.
sxc at 08:05PM, 2011/03/29.
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 12: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 08:18AM, 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 08:59AM, 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 08:31PM, 2011/10/31.
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 01: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 01:09PM, 2012/05/07.
Mael
Nevermind, I found my problem and fixed it. It was a simple redirection problem.
Mael at 11:24AM, 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 11:54AM, 2012/06/04.
Ryan
Hi

How do i change it so that the menu does not expands automatically
Ryan at 12:34PM, 2012/12/24.
diego
<a href="#comment3616">Ryan wrote:</a>
Hi

How 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 06:15PM, 2013/03/07.
Tony Bright
Hello

I 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 01:05PM, 2013/05/09.

Post your comment

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

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com