Accordion Menu - Nested menu subheader link not working

[vermonter42]

1) Script Title: Accordion Menu

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

3) Describe problem: I've spent quite some time on DD searching for someone else with the same problem and haven't found a solution so figure I would post. I appreciate any help you might be able to offer.

I am using the accordion menu and have a nested accordion. What I am having difficulty with is the second-level accordion. In one case I need the submenuheader to link directly rather than drop a sub menu.

By way of illustration:

MENU CHOICE 1
option 1-1
option 1-2
option 1-3
MENU CHOICE 2
SUB MENU CHOICE 1
submenu option 1-1
submenu option 1-2
SUB MENU CHOICE 2
submenu option 2-1
SUB MENU CHOICE 3

In the above example everything works dandy except that assuming SUB MENU CHOICE 3 does not actually open another menu but rather links directly I can't get it to maintain the CSS Style of the other SUB MENU CHOICES

Here is a portion of my code as seen in view source from the browser:




<div id="wrapper">

<div class="arrowlistmenu">


<h3 headerindex="0h" class="menuheader expandable "><span class="accordprefix"></span>INSPIRATION<span class="accordsuffix"></span></h3>
<ul style="display: none;" contentindex="0c" class="categoryitems">
<li><a href="javascript:setAJAX(1,18);">Clown Triggerfish</a></li>
<li><a href="javascript:setAJAX(1,11);">Dandelion Bud</a></li>


</ul>

<h3 headerindex="1h" class="menuheader expandable "><span class="accordprefix"></span>JEWELRY TYPE<span class="accordsuffix"></span></h3>

<ul style="display: none;" contentindex="1c" class="categoryitems">

<li><a href="javascript:setAJAX(2,3);">Bracelet</a></li>
<li><a href="javascript:setAJAX(2,2);">Brooch</a></li>


</ul>

<h3 headerindex="2h" class="menuheader expandable "><span class="accordprefix"></span>MATERIALS<span class="accordsuffix"></span></h3>
<ul style="display: none;" contentindex="2c" class="categoryitems">



<li>
<div headerindex="0h" href="#" class="submenuheader subexpandable "><span class="accordprefix"></span>Metal<span class="accordsuffix"></span></div>

<ul style="display: none;" contentindex="0c" class="subcategoryitems">
<li><a href="javascript:setAJAX(3,34);">10k White Gold</a></li>
<li><a href="javascript:setAJAX(3,35);">Sterling Silver</a></li>

</ul>
</li>

<li>
<div headerindex="1h" href="#" class="submenuheader subexpandable "><span class="accordprefix"></span>Wood<span class="accordsuffix"></span></div>
<ul style="display: none;" contentindex="1c" class="subcategoryitems">
<li><a href="javascript:setAJAX(3,47);">Pink Ivory</a></li>
<li><a href="javascript:setAJAX(3,48);">Ebony</a></li>

<li><a href="javascript:setAJAX(3,49);">Purple Heart</a></li>

</ul>
</li>

<li>
<div headerindex="2h" href="#" class="submenuheader subexpandable "><span class="accordprefix"></span>Pearl<span class="accordsuffix"></span></div>

<ul style="display: none;" contentindex="2c" class="subcategoryitems">
<li><a href="javascript:setAJAX(3,39);">Seed Pearl</a></li>
<li><a href="javascript:setAJAX(3,40);">Natural Rosebud Pearl</a></li>

</ul>
</li>


<li>
<div headerindex="3h" href="#" class="submenuheader subexpandable "><span class="accordprefix"></span>Bone<span class="accordsuffix"></span></div>
<ul style="display: none;" contentindex="3c" class="subcategoryitems">
<li><a href="javascript:setAJAX(3,64);">Moose Horn</a></li>
<li><a href="javascript:setAJAX(3,63);">Piano Key Ivory</a></li>

</ul>
</li>

<li>
<div headerindex="4h" href="#" class="submenuheader subexpandable "><span class="accordprefix"></span>Gemstone<span class="accordsuffix"></span></div>
<ul style="display: none;" contentindex="4c" class="subcategoryitems">
<li><a href="javascript:setAJAX(3,66);">Black Spinel</a></li>
<li><a href="javascript:setAJAX(3,67);">Diamond</a></li>


</ul>
</li>

</ul>

<h3 class="menuheader"><a href="javascript:setAJAX(4,1);">RECENT WORK</a></h3>


<h3 headerindex="3h" class="menuheader expandable openheader"><span class="accordprefix"></span>LOCATION<span class="accordsuffix"></span></h3>
<ul style="display: block;" contentindex="3c" class="categoryitems">

<li>
<div headerindex="5h" href="#" class="submenuheader subexpandable "><span class="accordprefix"></span>In a Gallery<span class="accordsuffix"></span></div>
<ul style="display: none;" contentindex="5c" class="subcategoryitems">
<li><a href="javascript:setAJAX(5,3);">Gallery in the Woods</a></li>
<li><a href="javascript:setAJAX(5,1);">Julie: Artisans' Gallery</a></li>

</ul>
</li>

<li>
<div headerindex="6h" href="#" class="submenuheader subexpandable openheader"><span class="accordprefix"></span>On Exhibit<span class="accordsuffix"></span></div>
<ul style="display: block;" contentindex="6c" class="subcategoryitems">
<li><a href="javascript:setAJAX(6,1);">test exhibit</a></li>
</ul>
</li>
<li><div href="#" class="submenuheader"><a href="javascript:setAJAX(7,1);">In the Studio</a></div></li>


</ul>





<h3 headerindex="4h" class="menuheader expandable "><span class="accordprefix"></span>YEAR<span class="accordsuffix"></span></h3>
<ul style="display: none;" contentindex="4c" class="categoryitems">

<li><a href="javascript:setAJAX(8,2009);">2009</a></li>
<li><a href="javascript:setAJAX(8,2008);">2008</a></li>

</ul>
<h3 class="menuheader"><a href="javascript:setAJAX(9,1);">ALL</a></h3>


</div>

</div>


</div>




Sorry that example is so lengthy. Basically I need the option for "In The Studio" which is a submenu header to be a link but I need it to keep the style properties of the other submenu headers. I can't seem to get it right. The specific code for the "In the studio" option is this:




<li><div href="#" class="submenuheader"><a href="javascript:setAJAX(7,1);">In the Studio</a></div></li>



Any ideas?

[ddadmin]

Without seeing the page I have to do some guess work, but I assume the shared CSS class name of the sub menu headers that do open a sub menu is "subexpandable", and that you're styling that class name? In order to also style:


<li><div href="#" class="submenuheader"><a href="javascript:setAJAX(7,1);">In the Studio</a></div></li>
just like those headers with a sub menu, you should instead style the CSS class "submenuheader", which all sub menu headers carry.

[vermonter42]

here is the CSS for the menu:



.arrowlistmenu{
width: 100px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 10px Arial;
color: white;
background-image: url(/images/rnavbglight.png);
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 2px 0px 2px 10px; /*header text padding*/
cursor: hand;
cursor: pointer;
border-bottom:1px #dbdbc7 solid;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(/images/sbbg2.png);
color:#fff;
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
/*margin-bottom: 8px; bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
font-size:10px;
font-family:Arial;
background-image: url(/images/sbbglite.png);
}

/*added*/
.arrowlistmenu ul li .submenuheader{ /*CSS for Sub Menu HEADER*/
background-image: url(/images/sbbglite.png);
color: #464847;
font: bold 10px Arial;
padding: 2px 0 2px 10px; /*header text padding
margin-left: 10px;
margin-bottom: 0px;*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu ul li .subcategoryitems{ /*CSS for Sub Menu UL*/
margin-left: 0px;
padding-left:10px;
}

.arrowlistmenu ul li .subcategoryitems a{ /*CSS for Sub Menu UL*/
color: #000;
}

.arrowlistmenu ul li .subcategoryitems a:hover{ /*hover state CSS*/
color: #66353f;
background-color: #F3F3F3;
}
.menuheader a, .menuheader a:active ,.menuheader a:hover,.menuheader a:visited{
padding-left:0px;
text-decoration:none;
font: bold 10px Arial;
color: white;
}

.arrowlistmenu ul li a{
color: #000;
display: block;
padding: 2px 0;
padding-left: 10px; /*link text is indented 10px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;

}

.arrowlistmenu ul li a:visited{
color: #000;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #66353f;
background-color: #F3F3F3;
}


here is a link to the page in question http://dawn.vtwebproperties.com/portfolio.php

I'm at a bit of a loss to get the style right for two things:

see the "All" link at the bottom - when clicked it should run the javascript (as it does) but also should take on the style of other menuheaders that are expanded even though this one just directly links.

the second problem is under Location - the "in the studio" subheader is also a direct link rather than a header that opens yet I can't get it to style like the two subheaders above it.

I appreciate your help.

[vermonter42]

Perhaps to be more clear - when a menuheader is not expandable but rather simply links directly I still need it to behave like the expandable ones - change the background image and collapse any currently open menuheaders.