View Full Version : Show & Hide Layers Menu - mouse out

10-24-2007, 09:51 AM
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.

10-24-2007, 10:46 AM
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

10-24-2007, 10:53 AM
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

10-24-2007, 10:53 AM
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)

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

10-24-2007, 11:09 AM
Look at the article on Floating Tooltips from Fiji Web Design (http://fijiwebdesign.com/content/view/82/77/). I use this trick extensively.

John Rostron