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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover Menu <div> help

    Hello all...

    I've a highly customized site and therefore am attempting my own rollover menu function.

    For right now I'll give the basics.

    I have two divs - a left nav and a right content div.

    The left div houses the left navigation and the right content div... well - houses the content.

    On mouseover of a left navigation image - I am changing the image to "highlight" and also would like to display a previously hidden div that contains the submenu items.

    That is all fine and dandy. My problem is this. When I mouseout of the image - I lose the highlighting and the displayed submenu.

    I'm trying to figure out how to make a "handler" of some sort that will cause the image rollover to stay when I move the mouse to go select a menu item in the submenu.

    There is probably 5-6 px between the right edge of the image and the right content div (which is where the submenu ends up displaying)...

    Can I not catch the mouse position or something or am I limiting myself using the mouseover/mouseout functions or grr... How can I do this?

    I can post the JS that I've made and the html source if needed.

    Thanks,
    Rich
    Rich S. Wyatt
    D3 Web Creations

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    a normal method is to hide the submenu on a mouseout setTimeout
    and to clear the timeout on mouseover of the submenu

    While you may wish to develop your own menu it sounds as if this menu has a single level which I would term as a tooltip

    There are many available

    e.g.

    http://www.vicsjavascripts.org.uk/To...oolTipYoYo.htm

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent. I think I'll give that a go.

    In addition - menu systems like APYCOM allow for the "submenu" to have a transparent effect so as to see the content behind the submenu that is displayed.

    How does one accomplish this? Is it simply a colored gif with transparency or is it a JavaScript function that sets some CSS property or what?
    Rich S. Wyatt
    D3 Web Creations

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Im not 100% sure on this.... but I think you just add something to the end of object reference like this.

    Code:
    obj.style.opacity="50%"

    Im sure this could also be achieved using style sheets aswell.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    just look at the link I posted!
    Last edited by vwphillips; 12-16-2005 at 11:24 PM.


  •  

    Posting Permissions

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