Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Desperate for some simple jQuery help :(

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #35286
    kgscott284
    Participant

    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…

    #91156
    mbilalawan
    Member

    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

    #91333
    mattgoucher
    Member

    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
    }
    );
    #91373
    mattgoucher
    Member

    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 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.