ddaccordion submenu trouble

[aaronlyon]

1) Script Title: ddaccordion

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

3) Describe problem:

This trouble has to do with some menu items having subitems, and some without. IF I place all the items WITH subitems at the top of the list, it works fine: each submenu opens correctly on mouseover. Example:


<h3 class="headerbar subicon"><a href="overview.php">Program Overview</a></h3>
<ul class="submenu">
<li><a href="overview.php#1">New Hire</a></li>
<li><a href="overview.php#2">Account &amp; Partner Business Manager</a></li>
</ul>

<h3 class="headerbar subicon"><a href="training.php">Sales Training</a></h3>
<ul class="submenu">
<li><a href="training.php#1">eLearning</a></li>
<li><a href="training.php#2">Team session slides</a></li>
</ul>

<h3 class="headerbar"><a href="field_assignments.php">Field Assignments</a></h3>

<h3 class="headerbar"><a href="index.php">Home</a></h3>


BUT if I put any of the menu items WITHOUT subitems higher in the list, this causes the wrong menu item to open when I mouseover menu items. Example:


<h3 class="headerbar"><a href="index.php">Home</a></h3>

<h3 class="headerbar subicon"><a href="overview.php">Program Overview</a></h3>
<ul class="submenu">
<li><a href="overview.php#1">New Hire</a></li>
<li><a href="overview.php#2">Account &amp; Partner Business Manager</a></li>
</ul>

<h3 class="headerbar subicon"><a href="training.php">Sales Training</a></h3>
<ul class="submenu">
<li><a href="training.php#1">eLearning</a></li>
<li><a href="training.php#2">Team session slides</a></li>
</ul>

<h3 class="headerbar"><a href="field_assignments.php">Field Assignments</a></h3>



In this example, when I mouseover the "Home" item, the next item, "Program Overview" drops open. This is bad! How do I fix?

[aaronlyon]

Can anyone help? Anyone have an example of a menu that works, with mixed items, some with submenus and other without?

[ddadmin]

It's very difficult to help in this case without seeing everything in context. Please post a link to the page on your site that contains the problematic script so we can check it out. FYI you can certainly have some sub menus with additional nested menus, and some without. For example, see the 2nd example on this page (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm).

[aaronlyon]

Works fine here:

http://www.gsblearningcommunity.com/index2.php

Fails here:

http://www.gsblearningcommunity.com/index3.php

(the only difference is I moved the Home link to the top of the list)

BTW, the 2nd example you point out has the menu item WITHOUT subitems at the bottom of the list!

[ddadmin]

I see the problem. The CSS class "headerbar" should be reserved only for headers with a corresponding sub menu. You've added this class inside pure headers as well, ie:


<h3 class="headerbar"><a href="overview.php">Program Overview</a></h3>

<h3 class="headerbar"><a href="bb/viewforum.php?f=2">Best Practices</a></h3>

<h3 class="headerbar"><a href="wordpress/">Blog</a></h3>

resulting in the quirky behavior depending on the arrangement of your HTML. Remove this CSS class from the non sub menu carrying headers, or simply change the CSS class of the responsive headers to be something other than "headerbar", and modify the initialization code accordingly:


ddaccordion.init({
headerclass: "responsiveheaders", //Shared CSS class name of headers group

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

[aaronlyon]

Excellent. Thanks. Since only my menu items with submenus have the "subicon" class, I set headerclass: "subicon" and that solved the problem.

I have returned your credit line to my code (sorry! I prune aggressively when I'm debugging!).

Thanks,

-a

[ddadmin]

You're welcome. :)