Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2003
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning & onMOUSEVENTs

    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>
    _________________________

    This is somewhat related to my previous post
    Attached Files Attached Files
    Thanks in advance for any replies! :)

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    Ontario, Canada
    Posts
    183
    Thanks
    0
    Thanked 1 Time in 1 Post

    Hope this helps

    The reason why the mouseover stopped working for you when increased the value of top to 15px. Is because the div was not big enough and you moused off it before the mouse reached the menu. So I increased the height to 35px and made the width 75px. Since I got rid of the table and used the div to place them.

    To get the menu colors to work like you wanted I need to add two more classes to the css (.menu_activetext and .menu_clicked), as well as some javascript.

    If you have any question, feel free to ask.
    Attached Files Attached Files
    if ( atfirst != succeed)
    tryagain();

  • #3
    New Coder
    Join Date
    Feb 2003
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Hope this helps

    Originally posted by Frank
    The reason why the mouseover stopped working for you when increased the value of top to 15px. Is because the div was not big enough and you moused off it before the mouse reached the menu. So I increased the height to 35px and made the width 75px. Since I got rid of the table and used the div to place them.

    To get the menu colors to work like you wanted I need to add two more classes to the css (.menu_activetext and .menu_clicked), as well as some javascript.

    If you have any question, feel free to ask.
    Finally! Well, uhmmm...actually, I haven't really test drove the script yet but I think your reply seems sensible enough...Thanks Frank!

  • #4
    New Coder
    Join Date
    Feb 2003
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How About an Additional Horizontal SubMenu?

    Hi again,

    The script works like a charm! Greeeaaat!
    However, i still have a few more "upcoming" additions to it, ehem, which you might want to "play around with":

    the 1st is: an additional sliding side menu coming from the vertical menus (please download original textscript), or refer to this DynamicDrive link example and/or even this one. Please mouse hover on the News menu to see the effect.
    Of course, if possible without radically changing how the entire original script works...

    2nd is: putting in sound when each of the menu or sub-menus are mouseovered or clicked...(i've already gotten this one to work but there are still a bit to tweaked)
    Thanks in advance for any replies! :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •