0

Hey there stack overflow crew,

Quick question that always seems to come up when building custom drop down navigation systems using jquery. Now the ideal scenario for drop down menus would be to have the parent and children in

  • tags however sometimes the design of the site does not allow this.

    Let's say you have a DIV containing your primary navigation items and another below containing your child menus.

    When you rollover the parent the child menu appears however when these are seperate 's the rollout state get's tricky. So I nested the hovers to try and get around this and it alllmost works.

    $("div.primary-nav").mouseenter(function () {

    clearTimeout($(this).data('timeoutId'));
    $("div.doormat-nav-wrapper").slideDown("slow");

}).mouseleave(function () {

    $("div.doormat-nav-wrapper").mouseenter(function () {
        clearTimeout($(this).data('timeoutId'));
        $("div.doormat-nav-wrapper").slideDown("slow");
    }).mouseleave(function () {
        var someelement = this;
        var timeoutId = setTimeout(function(){ 
        $("div.doormat-nav-wrapper").slideUp("slow");
        $(someelement).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        });
    });     

});

    Logically what I'm trying to achieve is

    When the user rolls over the div.primary-nav .... div.doormat-nav-wrapper shows... when rolling off the primary nav div.doormat-nav-wrapper hides UNLESS div.doormat-nav-wrapper itself is being hovered on.

    Any feedback or suggestions would be greatly appreciated. THANKS!

    • Simon
    • 286
    • 2
    • 15

    1 Answers1

    0

    I believe this is exactly the same kind of thing I've answered before:

    jQuery: Mousover on a div open submenu which should stay open when mouseout

    Community
    • 1
    • 1
    maxedison
    • 17,243
    • 14
    • 67
    • 114
    • It's a bit different... theres is no common behind both elements. 2 unique divs pretty much just floating on the page. – Simon Sep 15 '11 at 17:56
    • I'm just wondering if this can be achieved with 2 completely independant 's? I can just stick to design nav systems in the same wrapper but it's helpful to have flexibility sometimes – Simon Sep 15 '11 at 18:04
    • You can do it with two independent divs... but that would require the submenu to fully overlap the parent menu, and then all events would actually be bound to hovering over the submenu. So if your parent menu has a height of 30px, and the submenu drops down below it, then the submenu would need a height of 0px and padding-top of 30px, as well as be positioned somehow (negative margin, absolute positioning) so that it fully covers the parent menu (but the 30px padding on top would make it see through). As you can see, this would obviously get much more complicated. – maxedison Sep 15 '11 at 19:23
    • Another option would be to use a setTimeout in the mouseleave() of the parent menu, so that it waits a moment to see if the submenu is now being hovered. The solution I proposed in my post is definitely the easiest and most robust of these. – maxedison Sep 15 '11 at 19:25
    • I would vote you up... but I don't have enough points. Imagine a site with a floating top nav where you hover over and big tops slide in from the bottom, there not connected visually or programatically in any way. setTimeout in the mouseleave() sounds interesting. – Simon Sep 15 '11 at 22:15
    • Ok, this is indeed a different problem. So please explain further: at what point do you want the "big tops" to slide out? – maxedison Sep 17 '11 at 02:17