Created
September 20, 2011 10:44
-
-
Save mattboon/1228840 to your computer and use it in GitHub Desktop.
jQuery click OR hover mega dropdown menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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