Skip to content

Instantly share code, notes, and snippets.

@mattboon
Created September 20, 2011 10:44
Show Gist options
  • Save mattboon/1228840 to your computer and use it in GitHub Desktop.
Save mattboon/1228840 to your computer and use it in GitHub Desktop.
jQuery click OR hover mega dropdown menu
// Navigation
// --------------------------------
var navType = 'hover';
var navLinks = $("nav > ul > li > a");
var navDropdown = $("nav div");
var nestedLists = $("nav > ul > li > ul");
// Add ATTRs to links
var counter = 1;
$(navLinks).each(function(){
$(this).attr("link", "menu-"+ counter +"");
counter++;
});
// Add ATTRs to lists
var counter = 1;
$(nestedLists).each(function(){
$(this).attr("link", "menu-"+ counter +"");
counter++;
});
// Do it
// --------------------------------
if (navType=='click') {
// Click version
// --------------------------------
$(navLinks).click(
function(){
// Get shown <ul> in <div>
shownList = $(navDropdown).find('> ul');
shownId = shownList.attr("link");
shownLi = $("a[link="+shownId+"]").parent();
// Test for shown or not
if($(shownList).length==0) {
// List not shown
showingList=0;
}
else if($(shownList).length>0) {
// List shown
showingList=1;
}
// Move shown list back
$(shownList).appendTo(shownLi);
// Get the target link
targetId = $(this).attr("link");
// Get target <li>
targetLi = $(this).parent();
// Get target <ul> in <li>
targetList = $("ul[link="+targetId+"]");
// See if there are sub pages to show
if($(targetList).length==0) {
doNothing = 1;
}
else {
doNothing = 0;
}
// If there are sub pages to show
if(doNothing==0) {
// List out, move down
if(showingList==0) {
$(targetList).appendTo(navDropdown);
$(navDropdown).show();
}
// Toggle closed
else if (showingList==1 && shownId==targetId) {
$(navDropdown).hide();
}
// Replacement list out
else if (showingList==1 && shownId!=targetId) {
$(targetList).appendTo(navDropdown);
}
return false;
}
else {
$(navDropdown).hide();
}
}
);
}
else {
// Hover version
// --------------------------------
// Set hide function
var isMousedOver;
var hideDropdown = function(a) {
setTimeout( function() {
if (isMousedOver) return;
// Hide the dropdown
//$(navDropdown).slideUp("medium");
$(navDropdown).hide();
// Get shown <ul> in <div>
shownList = $(navDropdown).find('> ul');
shownId = shownList.attr("link");
shownLi = $("a[link="+shownId+"]").parent();
// Move shown list back
$(shownList).appendTo(shownLi);
}, 50);
}
$(navLinks).hover(
function(){
// Get shown <ul> in <div>
shownList = $(navDropdown).find('> ul');
shownId = shownList.attr("link");
shownLi = $("a[link="+shownId+"]").parent();
// Test for shown or not
if($(shownList).length==0) {
// List not shown
showingList=0;
}
else if($(shownList).length>0) {
// List shown
showingList=1;
}
// Get the target link
targetId = $(this).attr("link");
// Get target <li>
targetLi = $(this).parent();
// Get target <ul> in <li>
targetList = $("ul[link="+targetId+"]");
// See if there are sub pages to show
if($(targetList).length==0) {
doNothing = 1;
}
else {
doNothing = 0;
}
// If we roll back to the same button
if(shownId==targetId) {
isMousedOver = true;
}
else {
// Move shown list back
$(shownList).appendTo(shownLi);
}
// If there are sub pages to show
if(doNothing==0) {
// List out, move down
if(showingList==0) {
// Stop the dropdown, show the dropdown
//$(navDropdown).stop(true,true).slideDown("medium");
$(navDropdown).stop(true,true).show();
// Move target list out
$(targetList).appendTo(navDropdown);
// Call hide function
isMousedOver = true;
var that = this;
$(navDropdown).data("mouseoutfn", function() { hideDropdown(that) });
}
// Replacement list out
else if (showingList==1 && shownId!=targetId) {
// Stop the dropdown
$(navDropdown).stop(true,true);
// Move target list out
$(targetList).appendTo(navDropdown);
// Call hide function
isMousedOver = true;
var that = this;
$(navDropdown).data("mouseoutfn", function() { hideDropdown(that) });
}
}
else {
// Hide dropdown instantly
$(navDropdown).hide();
}
},
function(){
// On roll-out
if(doNothing==0) {
isMousedOver = false;
hideDropdown(this);
}
}
);
// Hover over dropdown
$(navDropdown).hover(
function() {
isMousedOver = true;
},
function() {
isMousedOver = false;
$(this).data("mouseoutfn")();
}
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment