1) Script Title: Glossy Accordion Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...enu-glossy.htm

3) Describe problem:

Hello,

I have added the glossy accordion menu properly to my site. When hovered or clicked on the menu headers or menuitems, they are also colored properly. But the active menuitem does not keep the color as defined by css : when I click on a menuitem (and a new page is loaded), the corresponding menuitem does not keep the color defined with the css class

.glossymenu div.submenu ul li a:active

or
.glossymenu a.menuitem:active

What can I try to solve this problem? I'm rather new to this and I didn't find any clear answer on this forum. The code I use is displayed below. Because my links are generated through asp code, it's difficult for me to display the html used. Do I need to adapt the oninit or onopenclose

Any help is greatly appreciated,

Trial and Error




The script has been added to the head of my site as following:

Code:
<!-- Begin Menu Accordion script-->

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<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: ["", ""],
	togglehtml: ["suffix", "", ""], //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>
The layout of the menu is described in my css file as following:

Code:
.glossymenu{
	padding: 0;
	width: 170px;
	border-bottom-width: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: dotted;
	border-left-style: none;
	border-bottom-color: #4a849e;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
}
.glossymenu a.menuitem{
	color: #4a849e;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding-left: 0px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	background-color: #fFFFFF;
	background-repeat: no-repeat;
	line-height: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #4a849e;
	padding-top: 4px;
	padding-right: 0;
	padding-bottom: 4px;
}
.glossymenu a.menuitem:hover{
	color: #ced422;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	
}
.glossymenu a.menuitem:active{
	color: #c90912;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	
}

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


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

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

.glossymenu div.submenu ul li{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #4a849e;
	margin: 0px;
	padding: 0px;
}

.glossymenu div.submenu ul li a{
	display: block;
	color: #4a849e;
	text-decoration: none;
	padding-left: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	line-height: 20px;
	font-weight: normal;
	font-variant: normal;
	background-color: #FFFFFF;
	margin: 0px;
	padding-top: 2px;
	padding-right: 0;
	padding-bottom: 2px;
	
}
.glossymenu div.submenu ul li a:link{
	
}
.glossymenu div.submenu ul li a:visited{
	
}
.glossymenu div.submenu ul li a:hover{
	colorz: white;
	background-color: #FFFFFF;
	color: #ced422;
}
.glossymenu div.submenu ul li a:active{
	colorz: white;
	background-color: #ffffff;
	color: #c90912;
}


The links in my html file is created with asp code and is difficult to display here in the forum.