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

    hoverIntent problem for megamenu dropdown

    Hi,

    I'm a newbie to the forums here and a very unexperienced web developer. I have just set up my own website and I'm trying to make my menu less sensitive as it shoots down as soon as the mouse scrolls over which is annoying to potential customers. The change I made worked fine except as soon as I moved off the main header of the menu the full menu slides up again making it impossible to click on sub categories. I understand my problem is that my hoverIntent code is set to scroll back up on mouse out of the .cat but I have no idea where to put $(".menuContainer") in the hoverIntent function on mouse out to make sure it only scrolls up if someone's mouse leaves the entire container.

    I am completely and utterly lost, please help!

    The old code was this:

    [CODE]<script type="text/javascript">
    $(".cat").mouseover(function(){if($("#sub"+this.id).length){if($(".subcat").is(":visible"){$(".subca t").hide()}$("#sub"+this.id).slideDown()}else{if($(".subcat").is(":visible")){$(".subcat").slideUp() }}});$(".menuContainer").bind("mouseleave",function(){$(".subcat").slideUp()}); </script>[CODE]

    The code I changed it to was this:

    [CODE]<script type="text/javascript">


    $('.cat').hoverIntent(function(){if($("#sub"+this.id).length){if($(".subcat").is(":visible")){$(".su bcat").hide()}$("#sub"+this.id).slideDown()}else{if($(".subcat").is(":visible")){$(".subcat").slideU p()}}},function(){$(".subcat").slideUp()})


    </script>[CODE]

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Since you do not give us the HTML this is effecting it's hard to guess if your doing things right.
    I did find some mistakes in the last code. See if this works and if not please post the html:
    Code:
    $('.cat').hoverIntent(function()
    {
    	if($("#sub"+this.id).length)
    	{
    		if($(".subcat").is(":visible"))
    		{
    			$(".su bcat").hide();
    		}
    	$("#sub"+this.id).slideDown();
    	}else{
    		if($(".subcat").is(":visible"))
    		{
    			$(".subcat").slideUp();
    		}
    	}
    },
    function()
    {
    	$(".subcat").slideUp();
    }
    });
    P.S. Use the # in the tool bar above you in the message box to generate the [CODE] tags


  •  

    Tags for this Thread

    Posting Permissions

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