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
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Show & Hide Layers Menu - mouse out

    I am trying to build a drop down sub menu via a layer that will show on mouse over, and hide on mouse out. I am using the Dreamweaver Show/Hide Layer functions. If I set the Layer to hide on mouse out then it may not disapear as I scroll from left to right - that is - it will only disapear if I enter the layer area and then out.

    Menu can be viewed here: http://www.pwct.cober.ca/index-menus-dw.html

    Any help is appreciated.

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    to achieve the effect you are looking for, you will need to create a pretty decent amount of custom javascript. I can go into the details why, but long story short is adding the code that makes it do what you want it to do will break the entire concept of the menu.

    But, you might get better help posting this question in the javascript forum, as thats really what the issue is here.

    There ARE CSS solutions for what you are looking for, and i know of at least a couple of threads in the last week that talk about it. CSS is probably your better route.... its faster and doesn't require using the clients system resources to run code everytime they hover.

    best of luck

  • #3
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    I have just tried this in FF2 and IE7 and it seems to behave perfectly as programmed. The dropdown box disappears when you mouse out of it because the 'onmouseout' is within the Layer1 box.

    I'm not sure what you mean by 'scroll from left to right'. However, I can see the problem. If the mouse pointer is in the box and you move out, then the box disappears, but if you move the pointer up or sideways out of the menu item, the box stays put.

    The solution that occurs to me (without trying it) is to have the menu list items as block-level <div>s within the <li>, and include the dropdown layer within each div. Then your mouseout can be part of the menu item div rather than the dropdown div.

    John Rostron

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    PS:
    careful with PNG files... this is without any page content! (your page as it stands right now will take about 3-4 minutes to load on a dial up connection)
    Code:
    3.7K	1	HTML document
    8.5K	1	Style Sheet File
    336.5K	2	Images
    684.9K	4	CSS Images
    1033.7K	Total size
    8	HTTP requests

  • #5
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Look at the article on Floating Tooltips from Fiji Web Design. I use this trick extensively.

    John Rostron


  •  

    Posting Permissions

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