Grow your CSS skills. Land your dream job.

Desperate for some simple jQuery help :(

  • # November 22, 2011 at 1:33 pm

    I’ve been messing with jQuery for a couple weeks and am trying to make a simple menu with a horizontal sub navigation that fades in and out…I ran into a couple issues:

    1. I can’t get the sub menus to hide at the appropriate time.
    a. Either they hide when i mouse over the subnav links, or they dont hide unless i call fadeOut/hide for the element in question in an event on another element.

    2. I am getting some stacking issues if i move from one item to another to quickly.

    I guess what i need is some direction, i tried reading some literature on the subject to no avail…
    so, i decided to restart with some help from the pros, here is the fiddle: http://jsfiddle.net/W9mKZ/11/

    thanks in advance guys/girls!

    edit: i am on my 11th revision…still no real progress…

    # November 23, 2011 at 1:38 am

    Hi,

    From my prespective the html structure of the menu should be as follow:

    using above markup would have made your life easy. so only having hover() for the li would have done the trick but as per your current structure I have updated the fiddle. see if it works for your.

    http://jsfiddle.net/createlogic/W9mKZ/17/

    Regards,
    Bilal Awan
    w: http://uipress.com

    # November 23, 2011 at 11:12 am

    omg, hahaha i totally didnt even catch that…I completely forgot to nest to list..lmao, thanks so much man…i actually learned a lot from the updated jquery as well.

    # November 26, 2011 at 7:10 am

    If you wanted to make your navigation menu more dynamic, you could do something like this. In my example, I’m grabbing the subnav ID by connecting it with the parent element’s ID. If you do something like this, your code will be alot leaner, and you will be able to add new navigation menu items without having to write anymore javascript.

    I forked your gist as an example too.

    http://jsfiddle.net/mattgoucher/eFmc4/


    $('#nav li').hover(
    function(){
    var subMenu = $('#subnav-' + $(this).attr('id'));
    subMenu
    .fadeIn(500)
    .siblings('div')
    .hide();
    },
    function(){
    // Nothing To Do
    }
    );
    # November 26, 2011 at 1:50 pm

    Nice thanks a lot, how would i go about keeping it clean but fading out when the mouse leaves either the parent menu item or the subnav itself without having the stacking issue?

    # November 27, 2011 at 12:39 pm

    I would personally nest the drop down’s inside the parent. If you did it that way, you can check to see if the user is hover on the nav element at all. Once their off the nav element, you obviously would fade accordingly.

    -Matt.



Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".