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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    jQuery navigation hiding before I can click menu items

    I have a very simple navigation where I am using jquery to hide and show submenues on mouseover and hide them on mouseleave. When you hover over the main navigation it shows like it should but when you try to move your mouse down to click on the submenu items they hide. UGH!! Im not sure what to do about this.

    I know from trial and error that it the speed that is killing it for me. When I remove the 400 it works fine but I that shouldn't affect the code that it is. Even if I add "slide inside the show function it still acts funny."
    Does anyone have any ideas?

    Code:
    function nav(){
    $('div#nav ul li').mouseover(function() {
    $(this).find('ul').show(400);
    });
    
    $('div#nav ul li').mouseleave(function() {
    $('div#nav ul li ul').hide();
    });
    
    $('div#nav ul li ul').mouseleave(function() {
    $('div#nav ul li ul').hide();;
    });
    };
    
    $(document).ready(function() {nav();});
    Last edited by Chrys; 02-11-2013 at 08:11 PM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Does anyone have any ideas why the animation wont work?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Without further looking into it I notice a syntax error:
    Code:
    $('div#nav ul li ul').hide();;
    There is one semicolon too much.

    For everything else we need to see more of your site – a link to a live example would be good. Alternatively there are sites like http://jsbin.com/, for example, where you can test your code and show it to others.

  • Users who have thanked VIPStephan for this post:

    Chrys (02-13-2013)

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    SIMPLE sliding jquery navigation-works great now!

    I figured it out. I was trying to be too specific with the hide script and I was hiding my menu when I was leaving particular elements within the list item. LOL! This is my script and it works well now. I also added in the click to toggle part because when you are on a mobile device the menu wont hide because there is no mouseleave. :-)

    Code:
    function nav(){
    $('div#nav ul li').mouseover(function() {
    $(this).find('ul').show("fast");
    });
    
    $('div#nav ul li').mouseleave(function() {
    $(this).find('ul').hide("fast");
    });
    
    $('div#nav ul li').click(function() {
    $(this).find('ul').toggle("fast");
    });
    };


  •  

    Posting Permissions

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