Omni Slide Menu script - different css hover bg colors

[thompaj]

I'm using the Omni Slide Menu script.

How can I get different colors as the bgcolor depending on the link? Currently all of the links, when hovered over, show the same color(#336600) and I want a few links to have different colors(blue).


Something along the lines of:

if link url="www...com" then
#menu1 a:hover {color:white;background-color:#336600}
Else
#menu1 a:hover {color:white;background-color:#336600}
End if

Here is the code that's included. The hover color is currently determined by this css. Is there a way to use the url in an if/then to set color? or a link id?




<style type="text/css">
/*Menu Links*/

/*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
may be inherited in some browsers from other 'a' element styles (if any) on the page*/

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:white;background-color:#336600}

#menu1 a {font:bold 16px arial, tahoma, helvetica, sans-serif;}

/*End Menu Links*/
</style>
<script src="mmenu.js" type="text/javascript"></script>
<script src="menuItems.js" type="text/javascript">


http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm

Omni Slide Menu

[jscheuer1]

OK, run this script after the two external scripts, example (addition highlighted):


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

/***********************************************
* Omni Slide Menu script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>
<script type="text/javascript">
;(function(){
var clinks = document.getElementById('menu1').getElementsByTagName('a');
for (var i = clinks.length - 1; i > -1; --i){
if(clinks[i].href.indexOf('//www.') > -1){
clinks[i].className = 'wwwlink';
}
}
})();
</script>

Now all www links will have the class of 'wwwlink'.

So, in your stylesheet you can have:


<style type="text/css">
/*Menu Links*/

/*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
may be inherited in some browsers from other 'a' element styles (if any) on the page*/

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:white;background-color:#336600}
#menu1 a.wwwlink:hover {color:white;background-color:blue}

#menu1 a {font:bold 16px arial, tahoma, helvetica, sans-serif;}

/*End Menu Links*/
</style>

[thompaj]

Thank you so much! Worked like a charm.

resolved.