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
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts

    Mootools slide menu problem

    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.

    Code:
    <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?
    Last edited by ktsixit; 07-23-2009 at 08:39 AM.

  • #2
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    Any ideas???

    I have also tried the following but it's not working.
    Code:
    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

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Same issue

    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?

  • #4
    New Coder
    Join Date
    Aug 2009
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    BTW, mouseenter/mouseleave result in the same behavior as mouseover/mouseout.

  • #5
    New Coder
    Join Date
    Aug 2009
    Location
    London, England
    Posts
    21
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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 falseleaveTimerleaving = 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({
        
    mouseenterentering,
        
    mouseleaveleaving
    }); 
    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


  •  

    Posting Permissions

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