Mootools slide menu problem

[ktsixit]

Hello,
I'm trying to build a mootools slide menu and it should work like this. When user mouseover a menu item, it's submenu slides in. And when the user mouseout the menu item, it's submenu slides out.

It works almost ok, and the problem is that mouseovering the submenu causes sildeout. As a result the user cannot select something or click on something inside the submenu, because it's slideing out since the moment cursor mouses over it.

This is the code I'm working on, it's quite simple.

<script type="text/javascript" src="scripts/mootools.r1.11.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function(){
		
		var mySlide = new Fx.Slide('menu2');
		mySlide.hide(); 
		$('active_area').addEvent('mouseover', function(e){
			e = new Event(e);
			mySlide.slideIn();
			e.stop();
		});
		$('active_area').addEvent('mouseout', function(e){
			e = new Event(e);
			mySlide.slideOut();
			e.stop();
		});
	}); 
</script>

<ul id="menu">
    <li><a href="#">menu item 1</a></li>
    <li id="active_area"><a href="#">menu item 2</a>
        <ul id="menu2">
            <li><a href="#">submenu item 1</a></li>
            <li><a href="#">submenu item 2</li>
            <li><a href="#">submenu item 3</a></li>
        </ul>
    </li>
    <li><a href="#">menu item 3</a></li>
</ul>

What I want is the slide to stay open while user mouseover the menu item and the submenu item too. How can I achieve this? Can you help me please?

[ktsixit]

Any ideas???

I have also tried the following but it's not working.

window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('menu2');
	mySlide.hide(); 
	$('active_area').addEvent('mouseover', function(e){
		e = new Event(e);
		mySlide.slideIn();
		e.stop();
	});
	$('menu2').addEvent('mouseout', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});
});

Please help, I really need to fix this

[Sha66y]

ktsixit,

I have happened upon the very same issue. Have you found a resolution since you've made this post that you wish to share?

[Sha66y]

BTW, mouseenter/mouseleave result in the same behavior as mouseover/mouseout.

[Dimitar]

you really need to be a bit more programatic about this. mouseenter is an event and as such, it is bound by event.target - by firing it on the parent and entering a child, you WILL fire a mouseleave.

the way around this is to bind the anonymous function called to a full function, eg.

PHP Code:

// in global or relevant / accessible scope 
var isInMenu = false, leaveTimer, leaving = function() {
    leaveTimer = (function() {
        if (!isInMenu)
            mySlide.slideOut();
    }).delay(300);
}, entering = function() {
    isInMenu = true; // would get set to true by the mouseenter of the child element
    $clear(leaveTimer); // stop any leaving event queued, we have a sub menu open.
    mySlide.slideIn();
};

$('active_area').addEventa({
    mouseenter: entering,
    mouseleave: leaving
}); 


I have not tested this as I don't have mootools 1.11 to hand (it's 1.2.3.1 current now... ) but it ought to be fine.

btw, you can stop event bubbling like so:

PHP Code:

"click": function(e) {
    new Event(e).stop(); // 1.11, or .preventDefault(); in 1.2
} 


there is no sense in stopping the mouseenter event, it has no default implications...

good luck