Glossy menu active link same as Accordion script

[ypadill2]

Hello, I have used the accordion script and I really loved the way it kept the menu header highligted with an different image as you clicked on its submenys or when one of these was open, I am wondering if I can do the same to glossy menu, I know there is an active state applied to the menu headers when clicked, but when I click out side the menu, the link goes back to show the same image before it was clicked on, I hope this is clear and someone can help.

[ddadmin]

Warning: Please include a link to the DD script in question in your post, in this case, http://www.dynamicdrive.com/dynamici...ordionmenu.htm. See this thread for the proper posting format when asking a question.

Simply add a "selected" CSS class to the .css file, such as:

.glossymenu a.selected{
background-image: url(glossyback2.gif);
}

Then inside your configuration code for Glossy Menu, set this CSS class to be applied to the expanded headers:

animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"],
"

[daveddp]

I'm use this code as refrence in my web site www.edc-cameroon.com/test/ :

<script type="text/javascript">

//Initialize 3rd demo:
ddaccordion.init({
headerclass: "mypetsC", //Shared CSS class name of headers group
contentclass: "thepetC", //Shared CSS class name of contents group
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow",
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
myiframe=window.frames["myiframe"] //reference and cache iframe to populate
var lastexpandedindex=expandedindices.pop() //get last index within array
myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
},
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it
myiframe.location.replace(header.getAttribute('title'))
}
}
})

</script>

<h3 class="mypetsC" title="http://commons.wikimedia.org/wiki/Image:Greenland_Dog.jpg">Dogs</h3>
<div class="thepetC">
Dog content here...
</div>

<h3 class="mypetsC" title="http://commons.wikimedia.org/wiki/Image:Cat_%28634556562%29.jpg">Cats</h3>
<div class="thepetC">
Cat content here...
</div>

<h3 class="mypetsC" title="http://commons.wikimedia.org/wiki/Image:Coello_GDFL50.jpg">Rabbits</h3>
<div class="thepetC">
Rabbit content here...
</div>

<iframe name="myiframe" style="width: 90%; height: 300px; border:1px solid black"></iframe>
______________________________________________________

Now the problem is that i didn't want the target to be point in an iframe, and want it to load a new page in the same window when the header menu is clicked ! how do i do ?

Thank
Best regard...
Dave

[ddadmin]

Dave, in the future please start a new thread when asking your own question on a DD script.

Well, the code:

onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it
myiframe.location.replace(header.getAttribute('title'))
}
}

controls the behavior when the headers are expanded and collapsed. You can get them to load their associated page in the browser window itself, by changing:

myiframe.location.replace(header.getAttribute('title'))

to:

window.location=header.getAttribute('title')

However, this most likely won't be what you want, since that means as soon as the user clicks on a header, he's taken to a new page, before the sub menus have a chance to expand on the former page.

[daveddp]

I'm sorry to post here let me open a new thread !

[ypadill2]

Thank you it worked and looks great.

[racerxfactor]

Hi,
I understand the active link function with a background image. However, I would like to have the multiple headers stay active with different colors. So if I had

home
about
contact

I would like each link to have its own color active when it's clicked. Can this be done?