[solved] Fading in and out a sub nav with a hover trigger

Hi all,
I'm creating a navigational sub-menu that is trigger by a parent image. Here's how I want it to work:

IMAGE HERE
Sub nav:
- 1
- 2
- 3
- etc...

On mouseover of the image, it will fade the subnav in.
On mouseout of the image, it will fade the subnav out HOWEVER if you are on the actual sub-nav itself, don't fade out.

Right now, I have a loop to set the fades for in and out for the image, but I can't figure out how to make the fade out not happen when you're on the sub-nav itself.



Any tips on making that last event (mouseout) happen only if "theSubNav" isn't being hovered upon itself.

Rough idea:

Include in the moustout code a detection for the subnav (so, if mouseout && !subnav, fade out).

Do you have an example online?

I don't have a sample online and I cannot really put something working up yet.

I did try what you're saying myself, like this in pseudo-code:

hover image: add mouseover event {
nothing changes form previous code
}
hover image: add mouseout event {
check flag variable as mentioned below
}
sub-menu: add mouseover event {
set a flag variable
}

The problem is that the image mouseout event occurs before the sub-menu mouseover event occurs.

Create a div that contains the navigation and the subnavigation. Add the event handler to the wrapper div.
The subnavigation is placed inside the wrapper, so it will fade out after mouseleave on wrapper.

Hi,

I made a drop down menu with mootools 1.2, here is the code:

HTML:


And the js:


Next step is to play with the CSS, if you want I can post a working example.

Bye

Hi all. Thanks for the replies. I thought up the same idea as X-trace and did that. I just remembered I posted here though.

I was not aware, however, of the mouseenter and mouseleave events. In fact... where are they documented in MooTools? I recently searched the Docs for events and couldn't find a definitive list. The only thing I saw was a link to http://www.w3schools.com/html/html_eventattributes.asp

Thanks for the help all

http://ikeif.net/2008/07/29/mootools-mouse-events/

So I can build a few more links to the blog:

The list you've found are "javascript events" - the mootools script removes the "on" part of the event - it doesn't need to be documented, because it's a slight syntax, but it's just assumed that the users understand javascript events, which is why they don't re chronicle javascript events because it'd look like:

"mouseover" just like "onmouseover"
"click" just like "onclick"

If you need more details, let me know or comment on the blog

Hi,

I upload an example, you can take a look to the css there also. => http://www.jpvincent.com/moomenu/

For your case, you can put IMG tags in the main menu.

Moreover I think the lists are more appropriate for menus.

Bye.

Thank you Enric.
It works

I find a trick,
i test and find that, in a page I can use one menu. and if want to use two independent menu in a page, the second not work.
I find the solution too, if you describe class instead of id in the css file, it works. i mean, using code like "ul.botones_menu" instead of "ul#botones_menu" in the css and js file, and use <ul class='botones_menu'" instead of "<ul id='botones_menu'" . you can use several independent menus in one page.

I have a question. I want that the menus have not same width, and their width be depend on the menu text.
how can I do that?