DD Accordion Help

[Anon]

DD Accordion (http://www.dynamicdrive.com/dynamici...ordionmenu.htm)


I am thinking about using this script for my website, but can not figure out how to do two things:

1) Format the script so that on mousover event the image changes (I saw how they did it with the glossy menu and tried that, but it didn't work).

2) For the non-expanding accordion tag (feedback) they used the code:

<h3 class="menuheader" style="cursor: default">FeedBack</h3>

What I wanted to do for my site was to have a non expanding tab, such as home or contact us, that was clickable and usable as a link. I tried the obvious, such as making it a link:

<a href="myhomepage"><h3 class="menuheader" style="cursor: default">Home</h3></a>

I also tried to change the h3 class to make the entire thing clickable, and then linking it:

<a href="myhomepage"><h3 class="menuheader expandable" style="cursor: default">Home</h3></a>

None of these worked.

If you could help me on this, it would be greatly appreciated.

Regards,
-Anon

[ddadmin]

With, #2 is easy, and doesn't actually concern the script actually, just some formatting in HTML. Something like the below:

<h3 class="menuheader"><a href="http://google.com" style="display:block; color:white; text-decoration:none">FeedBack</a></h3>

would create a Feedback header that acts like a link.

Regarding #1, you say:

Format the script so that on mousover event the image changes (I saw how they did it with the glossy menu and tried that, but it didn't work).

can you point me to the thread or url you saw this?

[Anon]

Thanks for the help!
Your solution for the second problem worked great.

The glossy accordion menu can be found at the same link just further down the page. (http://www.dynamicdrive.com/dynamici...ordionmenu.htm)

As for where the code partaining to the mouseover event:

<style type="text/css">

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

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

...

In addition to this, the div tag that the accordion is in has "glossymenu" as it's class:

<div class="glossymenu">

Whereas the normal accordion does not.

The normal accordion script also has a similar section to the mouseover code for the glossy menu, but this code just determines the submenu items:

<style type="text/css">

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

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

...

What I tried to do was add a section to the header code and add a div tag around the accordion.

<style type="text/css">

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

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.ddaccordion a.menuitem:hover{
background-image: url(glossyback2.gif);
}

...

<div class="ddaccordion">

Evidently this doesn't work.

Any ideas?

[Anon]

(Sorry for the double post)

Okay, I solved the second problem.

Basically, it is the same as my previously tried (and failed) idea.
When you add the code, the subject of the code (.glossymenu a.menuitem:hover{) has to be perfect. To find what the subject should be, i looked earlier in the code. What I found was:

.arrowlistmenu .menuheader{

all I had to do to make this code work was to add the :hover to the code. What I have now is:

<style type="text/css">

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

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .menuheader:hover{
background-image: url(titlebar-active.gif);
}

...

This code works great.
Thanks to everyone who helped me with this!

Regards,
Anon