Log in

View Full Version : Change hover color for each menu item


nefarious2all
12-28-2008, 03:28 AM
I have searched this site (and the web in general) for a solution to my question and cannot seem to find it. I'm fairly new to this so I might have gone right by the solution and not know it. :rolleyes: If there's already a thread with my question answered just point me in it's direction.

I'm using the 'AnyLink Drop Down Menu' for the redesign of my site. I've got it working beautifully except for one little thing that I'm trying to change in it. The background color in the hover state, I want to change it for each menu item. So when you rollover an item in menu 1 it turns red, when you rollover an item in menu 2 it turns yellow, etc....

I'm using images instead of text so the background color in the hover state creates a rollover effect. Right now all the background colors are in a red, but here's what I've got at the moment...

~~~~~~~~~~~~~~~~~~

code in post below

~~~~~~~~~~~~~~~~~~

Thank you for any assistance!
Nile
12-28-2008, 03:34 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.Please post a link to the page on your site that contains the problematic script so we can check it out.Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, states that the credit notice inside script must stay intact. Please reinstate the notice first.
nefarious2all
12-28-2008, 09:56 PM
Sorry! :(

Script: AnyLink Drop Down Menu
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

I cannot post the page that I'm using this script on because it's not up on any server yet, because it's not done. I only have it on my computer at the moment.


style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #ffffff;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=""><img src="ill01.png" border="0"></a>'
menu1[1]='<a href=""><img src="ill02.png" border="0"></a>'
menu1[2]='<a href=""><img src="ill03.png" border="0"></a>'
menu1[3]='<a href=""><img src="ill04.png" border="0"></a>'
menu1[4]='<a href=""><img src="ill05.png" border="0"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href=""><img src="phsp01.png" border="0"></a>'
menu2[1]='<a href=""><img src="phsp02.png" border="0"></a>'
menu2[2]='<a href=""><img src="phsp03.png" border="0"></a>'
menu2[3]='<a href=""><img src="phsp04.png" border="0"></a>'
menu2[4]='<a href=""><img src="phsp05.png" border="0"></a>'

var menuwidth='165px' //default menu width
var menubgcolor='#ffffff' //menu bgcolor
var disappeardelay=0 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

Then I have this in the body


<body onload="MM_preloadImages('illustratorOV.png','photoshopOV.png)">

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1), MM_swapImage('IllustratorBT','','illustratorOV.png',1)" onMouseout="delayhidemenu(), MM_swapImgRestore()"><img src="illustrator.png" name="IllustratorBT" width="115" height="35" border="0" id="IllustratorBT" /></a>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2), MM_swapImage('PhotoshopBT','','photoshopOV.png',1)" onMouseout="delayhidemenu(), MM_swapImgRestore()"><img src="photoshop.png" name="PhotoshopBT" width="110" height="35" border="0" id="PhotoshopBT" /></a>

</body>
Nile
12-28-2008, 10:06 PM
Find:


menu1[0]='<a href=""><img src="ill01.png" border="0" class="red"></a>'
menu1[1]='<a href=""><img src="ill02.png" border="0" class="yellow"></a>'

You'd have to do that on each menu, thats just an example. Then for every color class you have, put it in the CSS:



#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .red:hover{ /*hover background color*/
background-color: red;
}
#dropmenudiv .yellow:hover{ /*hover background color*/
background-color: yellow;
}
nefarious2all
12-29-2008, 01:15 AM
Thank you for the reply.
But it didn't work, I actually get no hover background color. This is what I put...



<style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .#9e0b0f:hover{ /*hover background color*/
background-color: #9e0b0f;
}
#dropmenudiv .#a3620a:hover{ /*hover background color*/
background-color: #a3620a;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=""><img src="ill01.png" border="0" class="#9e0b0f"></a>'
menu1[1]='<a href=""><img src="ill02.png" border="0" class="#9e0b0f"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href=""><img src="phsp01.png" border="0" class="#a3620a"></a>'
menu2[1]='<a href=""><img src="phsp02.png" border="0" class="#a3620a"></a>'

var menuwidth='165px' //default menu width
var menubgcolor='#ffffff' //menu bgcolor
var disappeardelay=0 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed
Nile
12-29-2008, 01:22 AM
Ooops! That was an example of Nile not thinking. :o

Here:


var menu1=new Array()
menu1[0]='<a href="" class="red"><img src="ill01.png" border="0"></a>'
menu1[1]='<a href="" class="yellow"><img src="ill02.png" border="0"></a>'


And:


#dropmenudiv{
position:absolute;
z-index:100;
}

Should be:


#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

(That was my fault, I copied to fast)
nefarious2all
12-29-2008, 02:22 AM
Hey, no problem! You're the one helping me, so I can't complain. :D

But... I hate to say it... it still didn't work. Still get nothing. :(




<style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
border-bottom-width: 0;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .#9e0b0f:hover{ /*hover background color*/
background-color: #9e0b0f;
}
#dropmenudiv .#a3620a:hover{ /*hover background color*/
background-color: #a3620a;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="" class="#9e0b0f"><img src="ill01.png" border="0"></a>'
menu1[1]='<a href="" class="#9e0b0f"><img src="ill02.png" border="0"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="" class="#a3620a"><img src="phsp01.png" border="0"></a>'
menu2[1]='<a href="" class="#a3620a"><img src="phsp02.png" border="0"></a>'

var menuwidth='165px' //default menu width
var menubgcolor='#ffffff' //menu bgcolor
var disappeardelay=0 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed
Nile
12-29-2008, 02:28 AM
You didn't read my whole post:


And:


#dropmenudiv{
position:absolute;
z-index:100;
}

Should be:


#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

(That was my fault, I copied to fast)

Oh, also, you can't have # in a class name.
nefarious2all
12-29-2008, 03:07 AM
I actually don't need that code for how I have the dropdown menu set up, but thank you.

And more importantly... IT WORKS! THANK YOU!




<style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
border-bottom-width: 0;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .red:hover{ /*hover background color*/
background-color: #9e0b0f;
}
#dropmenudiv .yellow:hover{ /*hover background color*/
background-color: #a3620a;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="" class="red"><img src="ill01.png" border="0"></a>'
menu1[1]='<a href="" class="red"><img src="ill02.png" border="0"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="" class="yellow"><img src="phsp01.png" border="0"></a>'
menu2[1]='<a href="" class="yellow"><img src="phsp02.png" border="0"></a>'

var menuwidth='165px' //default menu width
var menubgcolor='#ffffff' //menu bgcolor
var disappeardelay=0 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed


I had to specify what color I wanted 'red' to be! Now lets hope it works in all browsers. :D
Nile
12-29-2008, 03:11 AM
Haha, well good luck with that. I'm glad that I helped you.
nefarious2all
01-12-2009, 10:51 PM
Script: AnyLink Drop Down Menu
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Okay, though what I've used above works beautifully, it does not work beautifully in Internet Explorer 6 or 7. The dropdown menu doesn't work at all.
Can anyone tell me why?

In the javascript I see,

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
Does this have anything to do with it?