Accordion Menu working but want color for each header

[gusto]

1) Script Title: Apple Style Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-apple.htm

3) Describe problem: Hi all I have been lurking and trying to find the answer to this myself but have not found a solution that is working for me.

The menu is working great on http://www.goforgusto.com/_clients/e...amplesite.htm#

However what I would like is to have each heading and sub menu match our clients catalog so each heading needs to have its own color and submenu will have a hover that is a shade of the header.

I have tried adding css classes but must be doing something wrong any help is much appricated

Thank you

[Snookerman]

You have the css in the html file:

<style type="text/css">

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

.applemenu div.silverheader a{
background: black url(silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}


.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}


.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(silvergradientover.gif);
color: white;
}

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

</style>

Right now, the backgrounds of the menus are the two .gif pictures that you downloaded from the script page. You could either replace those .gif pictures to other ones that match your client's catalog, or use colors instead.

[ddadmin]

If I understood it correctly the OP wants a different style for each header and its sub contents. You can do this by giving different headers/ sub contents additional, different CSS class names, with these class names containing the distinguishing styles for each header. So taking the below snippet of code from your page for example:

          <div class="silverheader header1style"><a href="#">Dining Sets</a></div>
          <div class="submenu submenu1style"> <a href="#" >Beech Finish</a> <a href="#">Natural Oak Finish </a> <a href="#">Natural White Finish</a> <a href="#">White Lacqured Finish </a> <a href="#">Cherry, Walnut Finish </a> <a href="#">Espresso, Cappuccino Finish </a> <a href="#">Steel Incorporated Finish </a> <a href="#">Bar Sets </a> <a href="#">Mix Chairs /Bar Stools </a> <a href="#">Section Summary </a> </div>

Notice the code in red. You'd then style .header1style and .submenu1style accordingly in your CSS, which will add to the default style shared across all your Accordion Menu headers.

[gusto]

If I understood it correctly the OP wants a different style for each header and its sub contents. You can do this by giving different headers/ sub contents additional, different CSS class names, with these class names containing the distinguishing styles for each header. So taking the below snippet of code from your page for example:

Right you are! Thank you so much, I got it working, still a few bugs to work out in my padding but its working ... for some reason it ignores my hover button and uses the default but I can live with that

For anybody finding this that was looking for the same solution here is the code I used in my css file to separate the menu's these are the first two html is below css

.header1style1 a{
	color: white;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding-left: 15px;
	text-decoration: none;
	background-color: #B9B9DB;
	background-image: url(../images/buttons/silvergradient_1.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	font-family: Verdana;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 5pt;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
}

.header1style1 a:hover{
	color: white;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding-left: 15px;
	text-decoration: none;
	background-color: #B9B9DB;
	background-image: url(../images/buttons/silvergradientover_1.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	font-family: Verdana;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 5pt;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
}

.header2style2 a{
	color: white;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding-left: 15px;
	text-decoration: none;
	background-color: #CECBD8;
	background-image: url(../images/buttons/silvergradient_2.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	font-family: Verdana;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 5pt;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
}

.header2style2 a:hover{
	color: white;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding-left: 15px;
	text-decoration: none;
	background-color: #B9B9DB;
	background-image: url(../images/buttons/silvergradientover_2:D.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	font-family: Verdana;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 5pt;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
}

<div class="applemenu">
          <div class="silverheader header1style1"><a href="#">Dining Sets</a></div>
          <div class="submenu"> <a href="#" >Beech Finish</a> <a href="#">Natural Oak Finish </a> <a href="#">Natural White Finish</a> <a href="#">White Lacqured Finish </a> <a href="#">Cherry, Walnut Finish </a> <a href="#">Espresso, Cappuccino Finish </a> <a href="#">Steel Incorporated Finish </a> <a href="#">Bar Sets </a> <a href="#">Mix Chairs /Bar Stools </a> <a href="#">Section Summary </a> </div>
          <div class="applemenu"><div class="silverheader header2style2"><a href="#" >Occasionals</a></div>
          </div>
          <div class="submenu">

Thanks again for your help!