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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with jquery nav menu

    Hello,

    I have inherited a website and have been requested to change a navigation menu. The issue with the menu is that when a user hovers over a selection and wants to select a submenu item, they sometimes catch the edge of an adjacent parent item. This instantly changes the submenu selection. I would like to add a delay or someother type of logic so that the submenu does not change unless there is clear inention of selection. I have already looked at hoverIntent and this looks like exactly what I need. However, the menu appears to use "mouseenter" and "mouseleave" rather than hover. I am a complete n00b and have zero clue how to get this working. Below is the code, and you can see the menu in action here; http://www.clarity101.com many thanks to any help provided.

    Code:
        // main sub menu effect
        jQuery(".nav > li").not(".nav ul li").bind('mouseenter',function(){
            var submenu = jQuery(this).find( '.sub' );
            if(jQuery('#content').css('margin-top')!='10px' && jQuery('#content').css('margin-top')!='0px'){
                // fast transition
                jQuery('#content').clearQueue();
                jQuery('#content').stop();
                jQuery('#content').css('margin-top','265px');
                jQuery('.nav li .sub').clearQueue();
                jQuery('.nav li .sub').stop();
                jQuery('.nav li .sub').hide();
                jQuery(submenu).show();
                
            }else{
                //normal transition
                jQuery('#content').clearQueue();
                jQuery('#content').stop();
                jQuery('.nav li .sub').clearQueue();
                jQuery('.nav li .sub').stop();
                jQuery('.nav li .sub').slideUp(500);
                jQuery('#content').animate({'margin-top':'10px'},500,function(){
                    jQuery(submenu).slideDown(500);
                    jQuery('#content').animate({'margin-top':'265px'},500);
                });
            }
        });
        jQuery(".nav > li").not(".nav ul li").bind('mouseleave',function(){
            jQuery('#content').clearQueue();
            jQuery('#content').stop();
            jQuery('.nav li .sub').clearQueue();
            jQuery('.nav li .sub').stop();
            jQuery('.nav li .sub').delay(500).slideUp(500);
            jQuery('#content').delay(500).animate({'margin-top':'10px'},500,function(){
                jQuery('.nav li .sub').removeAttr('style');
            });
        });

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    hover() is just a shortcut for mouseenter() and mouseleave() so there is not much of a difference except that you can and have to specify behaviors separately for both events when hover() can combine simple toggle behavior in one function.

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your response. I tried substituting 'mouseenter' and 'mouseleave' with the 'hoverintent' function but it did not resolve the issue. Any additional help? Thanks again and sorry for my lack of knowledge.


  •  

    Posting Permissions

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