Multiple dropdown menus, one JQuery script

Question

I have been playing with the jDiv dropdown menu developed by Skyrocket Labs and improved by Peter Hinton. It works well for multiple menus on the same page, as long as you replicate the code with different identifiers (#nav1 triggers #hidden-menu1, #nav2 triggers #hidden-nav2, etc).

        var hide1 = false;
$("#nav1").hover(function(){          
    if (hide1) clearTimeout(hide1);
    $("#hidden-nav1").show();
    }, function() {
    hide1 = setTimeout(function() {$("#hidden-nav1").hide();});
    });

    $("#hidden-nav1").hover(function(){
    if (hide1) clearTimeout(hide1);
    }, function() {
    hide1 = setTimeout(function() {$("#hidden-nav1").hide();});
    $("#hidden-nav1").stop().show();
    });

I am trying to sort out how to rewrite the code so that it can, "discover" the numerical value of the navX linked hovered and trigger the appropriate hidden-navX divs.

Roko C. Buljan · Accepted Answer · 2011-05-23 22:16:32Z

4

Here is a working
JSFiddle DEMO

I removed ALL ID's just to show how easy and striped can be the code and functional too, just using classes.
You can undo your ID's if you need to use them, but leave all unchanged.

If you need explanation about the code I can comment each line.

Here is the new/changed Jquery:

$(document).ready(function() {

    var countNavs = 0; $('#navlist li').attr('class', function() {countNavs++;return 'connected' + countNavs;});
    var countDrops = 0; $('.dropdown').attr('class', function() {countDrops++;return 'dropdown connected' + countDrops;});

    var hide1 = false;            
    $("#navlist li").hover(function(){    
        var equal = $(this).attr('class');

        $('.active').removeClass();
    if (hide1) clearTimeout(hide1);
        $('.dropdown').hide();
        $('.'+equal).not('li').show();
        $(this).children('a').toggleClass('active');                
    }, function() {
        hide1 = setTimeout(function() {$('.'+equal).not('li').hide();});
    });

    $('.dropdown').hover(function(){        
        if (hide1) clearTimeout(hide1);            
    }, function() {            
        hide1 = setTimeout(function() {$('.dropdown').hide();});
        $('.active').removeClass();        
        $('.dropdown').stop().show();
    });

});

With COMMENTS

To help you understand in few words: We add automatically a SAME custom class to each 'li' and his corespondent 'dropdown' called: '.connectedN',
where 'N' is an incremented number.
Than we just say: if the hovered 'li' is class 'connected3' that means we just hovered the 3th 'li' , and we'll go to open the '.dropdown' that have the SAME class.

edited May 23, 2011 at 22:16

answered May 22, 2011 at 22:27

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

MrCycling Over a year ago

Thanks for that, but we have a fairly extensive flyout menu currently being used and I am trying to simplify and reduce the code size at the moment.

Roko C. Buljan Over a year ago

Exactly that. This 4 lines of code can handle hundreds of infinite :) number of menus. I just want to show you the base functionality. The principle is that the mouse activates THIS action element. all the rest is nested to that element .childrens or .next and so on

MrCycling Over a year ago

@roXon, thanks for that. The jDiv function is nice in that it uses two separate divs to keep the triggers and targets separate, whereas your example using lists puts it all together. With the separate divs aspect I can move the bulk of the navigation code to the bottom of the file and out of search bots way, thus pushing the content higher up in the file. Also allows me to strip the navigation code out of the main file and add it in via JQuery's load function, thus allowing a quicker initial load.

MrCycling Over a year ago

That is why I was trying simply to reduce the amount of code for jDiv, but I haven't been able to get @Raynos version to function.

Roko C. Buljan Over a year ago

I was not able to Google for jDiv cause looks like it has been moved / closed. So I can't have an idea... a picture of what is about. Do you have a link?

|

Raynos · Accepted Answer · 2011-05-22 23:03:34Z

0

Try

function doNav(id) {
    var hide = false;
    $(id).hover(function() {
        if (hide) clearTimeout(hide);
        $("#hidden" + id).show();
    }, function() {
        hide = setTimeout(function() {
            $("#hidden" + id).hide();
        });
    });

    $("#hidden" + id).hover(function() {
        if (hide) clearTimeout(hide);
    }, function() {
        hide = setTimeout(function() {
            $("#hidden" + id).hide();
        });
        $("#hidden" + id).stop().show();
    });
}

for (var i = 1; i < 4; i++) {
    doNav("nav" + i);
}

edited May 22, 2011 at 23:03

answered May 22, 2011 at 21:24

Raynos

170k57 gold badges359 silver badges399 bronze badges

6 Comments

MrCycling Over a year ago

The hide1 changes as well. Hovering over #nav2, would need to update the ending values to nav2, hidden-nav2, hide2, etc.

Raynos Over a year ago

@Tom You call this functions for each nav. They all use a local hide variable.

MrCycling Over a year ago

OK, so do I simply add extra doNav for each trigger ? ie: doNav("nav2"); doNav("nav3");

Raynos Over a year ago

@Tom pretty much. You can use an array. Updated the answer.

Raynos Over a year ago

@Tom if it solves your question, please do click the checkmark next to my answer ;)

|

Collectives™ on Stack Overflow

Multiple dropdown menus, one JQuery script

2 Answers 2

10 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related