Positioning & onMOUSEVENTs

[Four_of_Five]

Kindly view the attached scriptext file. In particular, take note of the colored text below:

Ever since I had "changed" the value of the top: to [b]15px[b] I have been unable to "reach" or mouse-over on the sub-menus. How do I fix this while still maintaining the position of the sub-menus to appear just after the #content's edge???

2nd question, is how do I "set-up" the script wherein when I ONmouse-over the main MENUs (MENU1, MENU2, MENU3...) they also change colors??

3rd,last one, and this one really stumps me :( How would it be possible to have the main MENUs have a particular ONCLICK color, say for example RED and remain that way until I mouse-over and click on another MENU??? In much the same way the other links in the script behaves. Please download and check out the entire textscript to appreciate

______________________________________________________
<style type="text/css">
body {margin:0px; width:100%;}
#tb {position:relative; visibility:hidden;}
#tb a {color:#006699; text-decoration:none; font-size:16px; font-weight:bold;}
#tb a:hover {color:blue; text-decoration:underline; font-size:16px; font-weight:bold;}
#content{position:relative; width:100%; height:34px; background-color:#006699; top:15px;}
#menu1 {position:absolute; left:20px;}
#menu2 {position:absolute; left:90px;}
#menu3 {position:absolute; left:200px;}
#menu4 {position:absolute; left:320px;}
#menu5 {position:absolute; left:420px;}

.menu1 {position:relative; cursor:pointer; font-weight:bold; color:#FFFFFF; padding:2px; z-index:999; top:5px;}
.menu2 {position:relative; cursor:pointer; font-weight:bold; color:#FF99FF; padding:2px; z-index:999; top:5px;}
.menu3 {position:relative; cursor:pointer; font-weight:bold; color:#00FF00; padding:2px; z-index:999; top:5px;}
.menu4 {position:relative; cursor:pointer; font-weight:bold; color:#00FFFF; padding:2px; z-index:999; top:5px;}
.menu5 {position:relative; cursor:pointer; font-weight:bold; color:#FFFF33; padding:2px; z-index:999; top:5px;}


.sub1 {position:relative; width:120px; background-color:#000099; visibility:hidden; cursor:pointer; padding:7px; z-index:999; top:15px;}
.sub2 {position:relative; width:120px; background-color:#006600; visibility:hidden; cursor:pointer; padding:7px; z-index:999; top:5px;}
.sub3 {position:relative; width:120px; background-color:#990000; visibility:hidden; cursor:pointer; padding:7px; z-index:999; top:5px;}
.sub4 {position:relative; width:120px; background-color:#000000; visibility:hidden; cursor:pointer; padding:7px; z-index:999; top:5px;}
.sub5 {position:relative; width:120px; background-color:#FF0000; visibility:hidden; cursor:pointer; padding:7px; z-index:999; top:5px;}


.sub1 a {color:#ffffff; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
.sub2 a {color:#ff99ff; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
.sub3 a {color:#00FF00; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
.sub4 a {color:#00FFFF; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}
.sub5 a {color:#FFFF33; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px;}


.sub1 a:hover{color:#ffff33; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; background-color: #ff0000;}
.sub2 a:hover{color:#ffff33; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; background-color: #ff0000;}
.sub3 a:hover{color:#ffff33; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; background-color: #ff0000;}
.sub4 a:hover{color:#ffff33; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; background-color: #ff0000;}
.sub5 a:hover{color:#ffff33; text-decoration:none; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; background-color: #000000;}

</style>
___________________________________________

[Daria]

for problem 1: the key is exactly in the 15px positioning: it goes below the main menu by few pix, - which means that you get a mouseout, since there is a gap between the menu and sub1.

for 2 and 3 - you can make the text for the main menu into links and assign a class to them, that will have :hoover. :active, etc. effects.

for example, add the following styles into your stylesheet

.change1 {color:#FFFFFF;text-decoration:none}
a.change1:link {color:#990000;}
a.change1:active {color:#000000;}
a.change1:visited {color:#FFFFFF;}
a.change1:hover {color:#009900;}

and have your MENU1 in the code as
<a href="#" class="change1">MENU1</a>

is that what you want?

[Four_of_Five]

Originally posted by Daria
for problem 1: the key is exactly in the 15px positioning: it goes below the main menu by few pix, - which means that you get a mouseout, since there is a gap between the menu and sub1.

for 2 and 3 - you can make the text for the main menu into links and assign a class to them, that will have :hoover. :active, etc. effects.

for example, add the following styles into your stylesheet

.change1 {color:#FFFFFF;text-decoration:none}
a.change1:link {color:#990000;}
a.change1:active {color:#000000;}
a.change1:visited {color:#FFFFFF;}
a.change1:hover {color:#009900;}

and have your MENU1 in the code as
<a href="#" class="change1">MENU1</a>

is that what you want?

Thanks! Actually, I've managed to "resolve" most of the above issues already....i'm moving on to other "complications" like adding mouseover sound and sliding horizontal sub-menus. Refer to this link example 1 (http://www.dynamicdrive.com/dynamicindex1/hvmenu/horizon.htm) or this link example 2 (http://www.dynamicdrive.com/dynamicindex1/topmen4/index.htm) for the horizontal submenus.

Please see attached, the "work-in-progress" menu. Kindly just re-post it back if you have any improvements on it...coz the mouse-over sound script kinda messes up the mouse-hover (it ain't smooth)

[Daria]

could you, please, re-upload your file?
it has double-extention (.zip.php) and cannot be opened.

forgive me for asking, but why do you need so many "complications", as you nicely described it?

[Four_of_Five]

Ok, here's a re-upload as requested.

As for the "complications", well...i'm trying to learn from them as much as I can...so I figure the more...the better :) I think of it as improvements in a way...or "evolution" if you will.

Hey, thanks for taking interest btw! I hope the attached files work (I think i had to take a file out to adjust the zip file size)
Another "challenge" to this is making it work in Netscape.

[Daria]

I still cannot open the file :(

[Four_of_Five]

Hmmmm...maybe you don't have Winzip? (http://www.winzip.com) or have you tried, erasing the php extension, and just have the file end with a .zip extension...

Anyway, here's the scriptext...you'll just have to put in your own .wav files then...

Cheers!

PS: Open it on IE, coz I havent figured out yet how to make them work in NS