PDA

View Full Version : Glossy Accordion Menu Header issues.



newsong80
05-12-2010, 04:19 PM
1) Script Title: Glossy Accordion Menu

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

3) Describe problem: I'm sorry if this has been asked/answered before. I am very "green" when it comes to scripts so answer as plainly as possible please. My needs are these: 1. Header, when clicked on stays in "down" stage image and not roll back to "up" state. 2. Header, when click does NOT go anywhere. It just expands the menu.

Here is my example: http://www.alloccasionsbridal.com/aob/aob_menu.html

I would appreciate any help. Remember, keep it simple. :o Thanks!

ddadmin
05-13-2010, 12:32 AM
Try changing the code in red inside your initialization code below to "click":


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", "clickgo", 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: ["class1", "class2"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='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 initialized
for (var i=0; i<expandedindices.length; i++){
var expandedindex=expandedindices[i] //index of current expanded header index within array
headers[expandedindex].style.backgroundColor='black'
headers[expandedindex].style.color='white'
}
}
})

Please see the "Set Up Information" on the main script page (http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm) for the various options and their possible values.

newsong80
05-13-2010, 11:32 AM
Changing to "click" didn't fix it. :(

ddadmin
05-13-2010, 11:01 PM
I don't see the change added to your page online. Can you do that so I can check it out?

newsong80
05-13-2010, 11:22 PM
I'm sorry. I forgot to upload it. I just looked locally. It is done now.

ddadmin
05-14-2010, 08:13 AM
The menu no longer reloads/goes to another page now when I expand a header. Is this the case for you?

newsong80
05-14-2010, 04:01 PM
No, it doesn't. Thank you. One more thing I need. I need the rollover/header to stay in the down state when it is selected.

ddadmin
05-14-2010, 09:36 PM
No, it doesn't. Thank you. One more thing I need. I need the rollover/header to stay in the down state when it is selected.

In the initialization code, there is an option to specify two CSS classes that are applied to the menu headers depending on their state:


toggleclass: ["class1", "class2"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

Try styling "class2" with the styles for the rollover effect, and "class1" with the default styles for the header (so the rollover effect is reset when the header is collapsed.

Take a look at bullet list menu (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm) for an example of this.