$(document).ready(function(){ var delayTime = 500; var keyDelayTime = 100; var fadeTime = 500; var keyFadeTime = 100; mobileNavViewSize = 700; //set menu active state if ($(window).width() > mobileNavViewSize) { activeColor = "#ffcc00"; unhighlightActive = "BBD1E1"; } else { activeColor = "#0072CE"; unhighlightActive = "#0072CE"; }; //change active state on resize $(window).on('resize', function(){ if ($(window).width() > mobileNavViewSize) { activeColor = "#ffcc00"; unhighlightActive = "BBD1E1"; } else { activeColor = "#0072CE"; unhighlightActive = "#0072CE"; } }); function initMenu() { var menu = document.getElementById('menu'); // keyboard stuff $(menu).delegate('a', 'keydown', keyboardHandler); // mouse stuff $(' > li.has-drop', menu).each(function () { var dropdown = $('.subnav', $(this)[0]); $(this).hover( function () { $(this).addClass('active'); $('.subnav', menu).each(function (index, drop) { if (drop !== dropdown) { $(drop).hide(); } }); $(dropdown).stop(true, true).delay(delayTime).fadeIn(fadeTime); }, function () { $(this).removeClass('active'); $(dropdown).stop(true, true).delay(delayTime).fadeOut(fadeTime); } ); }); } function keyboardHandler(keyVent) { var target = keyVent.target; var which = keyVent.which; if (which === 39) { // RIGHT if (isTopLevel(target)) { // top level item var nextTopItem = adjacentTopLevelItem(target, 'next'); if (nextTopItem) { keyVent.preventDefault(); nextTopItem.focus(); } } else { // dropdown item var nextDropletItem = adjacentDropdownItem(target, 'next'); if (nextDropletItem) { keyVent.preventDefault(); nextDropletItem.focus(); } } } else if (which === 37) { // LEFT if (isTopLevel(target)) { // top level item var prevTopItem = adjacentTopLevelItem(target, 'prev'); if (prevTopItem) { keyVent.preventDefault(); prevTopItem.focus(); } } else { // dropdown item var prevDropItem = adjacentDropdownItem(target, 'prev'); if (prevDropItem) { keyVent.preventDefault(); prevDropItem.focus(); } } } else if (which === 40) { // DOWN if (isTopLevel(target) && hasDropdown(target)) { // top level item w/ dropdown -- open dropdown openDropdown(target); } else { // dropdown item var nextDropItem = adjacentDropdownItem(target, 'next'); if (nextDropItem) { keyVent.preventDefault(); nextDropItem.focus(); } } } else if (which === 38) { // UP if (!isTopLevel(target)) { if (isFirstDropItem(target)) { keyVent.preventDefault(); var top = closeDropdown(target); setTimeout(function () { top.focus(); }, 0); } else { var prevDropAnchor = adjacentDropdownItem(target, 'prev'); if (prevDropAnchor) { keyVent.preventDefault(); prevDropAnchor.focus(); } } } } else if (which === 27) { // ESCAPE if (!isTopLevel(target)) { var topper = closeDropdown(target); setTimeout(function () { topper.focus(); }, 0); } } else if (which === 9 && keyVent.shiftKey) { // SHIFT + TAB if (!isTopLevel(target) && isFirstDropItem(target)) { keyVent.preventDefault(); var topA = closeDropdown(target); setTimeout(function () { topA.focus(); }, 0); } } else if (which === 9) { // TAB if (!isTopLevel(target) && isLastDropItem(target)) { keyVent.preventDefault(); var topItem = closeDropdown(target); var nextLi = $(topItem.parentNode).next()[0]; var nextAnchor = $('a', nextLi)[0]; nextAnchor.focus(); } } else if (which === 13 || which === 32) { if (isTopLevel(target) && $(target.parentNode).hasClass('has-drop')) { openDropdown(target); } } } // determines if the item is a top-level one function isTopLevel(item) { return $(item).is('#menu > li > a'); } // determines if the item has a dropdown function hasDropdown(item) { return $(item.parentNode).hasClass('has-drop'); } // determines if the item is the first in the dropdown function isFirstDropItem(item) { var drop = $(item).closest('.subnav')[0]; var firstInDrop = $('a', drop)[0]; return firstInDrop === item; } // determines if the item is the last in the dropdown function isLastDropItem(item) { var drop = $(item).closest('.subnav')[0]; var lastInDrop = $('a', drop).last()[0]; return lastInDrop === item; } // finds the adjacent top level item function adjacentTopLevelItem(item, dir) { var li = item.parentNode; //
var adjacentLi = (dir === 'next') ? $(li).next()[0] : $(li).prev()[0]; var adjacentItem = adjacentLi && $('a', adjacentLi)[0]; return adjacentItem; } // finds the next or prev dropdown item function adjacentDropdownItem(item, dir) { var adjacentDropItem; var li = item.parentNode; var adjacentSameCol = (dir === 'next') ? $(li).next()[0] : $(li).prev()[0]; if (adjacentSameCol) { // there is one in the same col adjacentDropItem = $('a', adjacentSameCol)[0]; } else { // lets look for one in the adjacent column var col = $(li).closest('.col')[0]; var adjacentCol = (dir === 'next') ? $(col).next()[0] : $(col).prev()[0]; if (adjacentCol) { // we've found the adjacent column var adjacentItem = (dir === 'next') ? $('a', adjacentCol)[0] : $('a', adjacentCol).last()[0]; if (adjacentItem) { adjacentDropItem = adjacentItem; } } } return adjacentDropItem; } function openDropdown(item) { $(item.parentNode).addClass('active'); var droplet = $(item).next()[0]; // open the dropdown... $(droplet).stop(true, true).delay(keyDelayTime).fadeIn(keyFadeTime); // ...and focus the first item setTimeout(function () { $('a', droplet)[0].focus(); }, 100); } function closeDropdown(item) { var droplet = $(item).closest('.subnav')[0]; var topLevelItem = $(droplet).prev()[0]; $(topLevelItem.parentNode).removeClass('active'); $(droplet).stop(true, true).delay(keyDelayTime).fadeOut(keyFadeTime); return topLevelItem; } $(document).ready(initMenu); $('table').wrap(''); });