View Full Version : Bullet List Accordion Menu with nested levels

11-08-2008, 12:23 PM
1) Script Title: Bullet List Accordion Menu with nested levels

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem:

If I click on the element : "<a href="http://www.cssdrive.com/index.php/menudesigns/" class="subexpandable">Menu Gallery</a>" it does open or close the element : "<ul class="subcategoryitems" style="margin-left: 15px">" but why it doesn`t load the page : "http://www.cssdrive.com/index.php/menudesigns/" ?

I really would like tu use this Menu in one of my Pages, but I need to solve this problem first, so it works the way i want it. Idon`t have any idea, why if clicking the link "Menu Gallery", it doesn`t load the page, with wich it`s linked with. If I right-click the same link, and choose "open in new Window" it works.

I hope somebody can help me with this.

Thank you,


(i`m from Germany, so if my english isn`t the best, im Sorry...)

11-09-2008, 06:26 AM
That's because for headers that are set to toggle "onClick" (versus "onMouseover"), any link associated with the header becomes disabled. This is to allow the sub menu to actually expand/contract when the header is clicked on, instead of just going straight to the target page.

What you can do is either set the toggle type to "mouseover" instead in the configuration code:

headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover

Or if you must enable the headers to both toggle "onclick" and navigate to a URL, try commenting out the below line inside the .js file:

$('.'+config["headerclass"]).bind(config.revealtype, function(){
if (config.revealtype=="mouseenter"){
var headerindex=parseInt($(this).attr("headerindex"))
config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
return false //cancel default click behavior

11-09-2008, 11:13 AM
It works! The second example you wrote was exactly what I meant.

So there`s nothing left to me, except to say thank you again.

Thank you, for the fast answer and help, cause I couldn`t fix it by myself (I don`t know anything about JS, except the fact that it exists...)


11-09-2008, 02:43 PM

Iīve modified the .js like youīve explained.
Now it does mostly what it should.
But thereīs still one little bug...
If I set an a tag into the h3 tag it works quit strange.
Seems like the underlying h3 tags donīt act like they should do, if i expand another overlying h3 tag sometimes they collapse and sometimes they donīt.
With out the a tag in the h3 tag it works well!

Please take a look at my test-space...


Thanks for your help and the nice jQuery Plugin!



11-10-2008, 03:52 AM
I'm not sure I understand. What do you mean by:

If I set an a tag into the h3 tag it works quit strange.

Weren't you already using a A tag within the H3 to get it to act as a link, and that worked fine for you?

11-14-2008, 04:53 PM
It still works, but: the H3 elements, which are not part of the submenu,
sometimes open or close again, when they are supposed to do not.

For example the "Terminkategorie" - Link, in my menu, sometimes I click it in order to close it, it opens again right after closing...

11-21-2008, 08:50 AM
Hi, it`s me again...

i think the problem is, that every click works as two clicks... one at the H3 in the parent region and one at the a-tag in the same H3 and so, it open and close right after that...