PDA

View Full Version : Accordian Menu problem



pcjuice
01-08-2009, 06:55 PM
1) Script Title: Glossy Accordion Menu

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

3) Describe problem: The menu worked great for 1 day.

The top (first) submenu lets me select any and all menu items and it stays open until I close it.

Choosing another submenu, I could select any menu item(s) and that submenu would stay open too until I closed it or chose another submenu.

Today, when I choose any submenu but the top one, it closes and the top submenu pops open.

Setup:


<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='skins/Legend/styleImages/plus.gif' class='statusicon' />", "<img src='skins/Legend/styleImages/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>

Menu:

<div class="glossymenu">
<a class="menuitem submenuheader" href="" >Computer Systems&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<div class="submenu">
<ul>
<li><a href="http://www.digx.ca/index.php?act=viewCat&catId=126">Asus Barebone Booksize</a></li>
<li><a href="http://www.digx.ca/index.php?act=viewCat&catId=125">Asus Barebone Mini Tower</a></li>
<li><a href="http://www.digx.ca/index.php?act=viewCat&catId=124">Asus Barebone Value PC</a></li>
<li><a href="http://www.digx.ca/index.php?act=viewCat&catId=130">Shuttle Barebone PC</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="" >Laptops / Notebooks&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<div class="submenu">
<ul>
<li><a href="http://www.digx.ca/index.php?act=viewCat&catId=140">Asus Eee PC</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="" >Core PC Components&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<div class="submenu">
<ul>
<li><a href="index.php?act=viewCat&catId=101">AMD CPU Motherboards</a></li>
<li><a href="index.php?act=viewCat&catId=104">AMD CPUs</a></li>
<li><a href="index.php?act=viewCat&catId=102">Intel CPU Motherboards</a></li>
<li><a href="index.php?act=viewCat&catId=103">Intel CPUs</a></li>
<li><a href="index.php?act=viewCat&catId=9">PC Memory</a></li>
<li><a href="index.php?act=viewCat&catId=10">SATA Hard Drives</a></li>
<li><a href="index.php?act=viewCat&catId=11">Optical Drives</a></li>
<li><a href="index.php?act=viewCat&catId=14">Keyboards and Mice</a></li>
<li><a href="index.php?act=viewCat&catId=16">Video Cards</a></li>
<li><a href="index.php?act=viewCat&catId=15">LCD Monitors</a></li>
<li><a href="index.php?act=viewCat&catId=17">PC Cases</a></li>
<li><a href="index.php?act=viewCat&catId=18">Power Supply</a></li>
<li><a href="index.php?act=viewCat&catId=13">PC Speakers</a></li>
<li><a href="index.php?act=viewCat&catId=19">Operating Systems</a></li>
</ul>
</div>
</div><!--Glossy Menu-->

CSS:

<style type="text/css">

.glossymenu{
margin-left: .17cm;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #000;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(skins/Legend/styleImages/glossyback2V.gif) repeat-x bottom left;
font: bold 12px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 6px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(skins/Legend/styleImages/glossybackV.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 11px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 7px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}

</style>

All help greatly appreciated

ddadmin
01-09-2009, 02:56 AM
Please try and format any code in your post using the CODE tags. It just makes it easier to read.

Did the structure of your menus change between then and now? If not, there's no reason why the menu would work one day and not the other. Please post a link to the page on your site that contains the problematic script so we can check it out.

pcjuice
01-09-2009, 05:43 PM
Site address: http://www.digx.ca/

ddadmin
01-10-2009, 05:59 AM
Testing your page in both FF3.x and IE7, the last expanded sub menu does remain expanded when I go from pageA to pageB, by clicking on one of the links inside the corresponding sub menu on pageA. In other words, the persistence feature seems to be working fine for me. If that's not the issue, please clarify.

pcjuice
01-10-2009, 11:51 PM
Thanks for your help.

The menu on my website when I view it from my computer still defaults back to the first opened selection when I open a different selection.

I just tried the menu on my wife's computer and not only did it default back to the first opened category, the menu even locked up. I'll have to try out some other accordian menus. I see the web is full of them.