https://www.marquette.edu/_resources/js/edu-menu-jquery.js

1$(document).ready(function(){
2	
3	var delayTime = 500;
4  var keyDelayTime = 100;
5	var fadeTime = 500;
6  var keyFadeTime = 100;
7	mobileNavViewSize = 700;
8
9	
10	//set menu active state
11	if ($(window).width() > mobileNavViewSize) {
12		activeColor = "#ffcc00";
13		unhighlightActive = "BBD1E1";
14	} else {
15		activeColor = "#0072CE";
16		unhighlightActive = "#0072CE";
17	};
18	
19	
20	//change active state on resize
21	$(window).on('resize', function(){
22		
23		if ($(window).width() > mobileNavViewSize) {
24			activeColor = "#ffcc00";
25			unhighlightActive = "BBD1E1";
26		} else {
27			activeColor = "#0072CE";
28			unhighlightActive = "#0072CE";
29		}
30		
31	});
32	
33function initMenu() {
34  var menu = document.getElementById('menu');
35  // keyboard stuff
36  $(menu).delegate('a', 'keydown', keyboardHandler);
37
38  // mouse stuff
39  $(' > li.has-drop', menu).each(function () {
40    var dropdown = $('.subnav', $(this)[0]);
41
42    $(this).hover(
43      function () {
44        $(this).addClass('active');
45        $('.subnav', menu).each(function (index, drop) {
46          if (drop !== dropdown) {
47            $(drop).hide();
48          }
49        });
50
51        $(dropdown).stop(true, true).delay(delayTime).fadeIn(fadeTime);
52
53      }, function () {
54        $(this).removeClass('active');
55        $(dropdown).stop(true, true).delay(delayTime).fadeOut(fadeTime);
56      }
57    );
58  });
59}
60
61
62function keyboardHandler(keyVent) {
63  var target = keyVent.target;
64  var which = keyVent.which;
65
66  if (which === 39) { // RIGHT
67    if (isTopLevel(target)) {
68      // top level item
69      var nextTopItem = adjacentTopLevelItem(target, 'next');
70
71      if (nextTopItem) {
72        keyVent.preventDefault();
73        nextTopItem.focus();
74      }
75    } else {
76      // dropdown item
77      var nextDropletItem = adjacentDropdownItem(target, 'next');
78      if (nextDropletItem) {
79        keyVent.preventDefault();
80        nextDropletItem.focus();
81      }
82    }
83  } else if (which === 37) { // LEFT
84    if (isTopLevel(target)) {
85      // top level item
86      var prevTopItem = adjacentTopLevelItem(target, 'prev');
87
88      if (prevTopItem) {
89        keyVent.preventDefault();
90        prevTopItem.focus();
91      }
92    } else {
93      // dropdown item
94      var prevDropItem = adjacentDropdownItem(target, 'prev');
95      if (prevDropItem) {
96        keyVent.preventDefault();
97        prevDropItem.focus();
98      }
99    }
100  } else if (which === 40) { // DOWN
101    if (isTopLevel(target) && hasDropdown(target)) {
102      // top level item w/ dropdown -- open dropdown
103      openDropdown(target);
104    } else {
105      // dropdown item
106      var nextDropItem = adjacentDropdownItem(target, 'next');
107
108      if (nextDropItem) {
109        keyVent.preventDefault();
110        nextDropItem.focus();
111      }
112    }
113  } else if (which === 38) { // UP
114    if (!isTopLevel(target)) {
115      if (isFirstDropItem(target)) {
116        keyVent.preventDefault();
117        var top = closeDropdown(target);
118        setTimeout(function () {
119          top.focus();
120        }, 0);
121      } else {
122        var prevDropAnchor = adjacentDropdownItem(target, 'prev');
123
124        if (prevDropAnchor) {
125          keyVent.preventDefault();
126          prevDropAnchor.focus();
127        }
128      }
129    }
130  } else if (which === 27) { // ESCAPE
131    if (!isTopLevel(target)) {
132      var topper = closeDropdown(target);
133      setTimeout(function () {
134        topper.focus();
135      }, 0);
136    }
137  } else if (which === 9 && keyVent.shiftKey) { // SHIFT + TAB
138    if (!isTopLevel(target) && isFirstDropItem(target)) {
139      keyVent.preventDefault();
140      var topA = closeDropdown(target);
141      setTimeout(function () {
142        topA.focus();
143      }, 0);
144    }
145  } else if (which === 9) { // TAB
146    if (!isTopLevel(target) && isLastDropItem(target)) {
147      keyVent.preventDefault();
148      var topItem = closeDropdown(target);
149      var nextLi = $(topItem.parentNode).next()[0];
150      var nextAnchor = $('a', nextLi)[0];
151      nextAnchor.focus();
152    }
153  } else if (which === 13 || which === 32) {
154    if (isTopLevel(target) && $(target.parentNode).hasClass('has-drop')) {
155      openDropdown(target);
156    }
157  }
158}
159
160// determines if the item is a top-level one
161function isTopLevel(item) {
162  return $(item).is('#menu > li > a');
163}
164
165// determines if the item has a dropdown
166function hasDropdown(item) {
167  return $(item.parentNode).hasClass('has-drop');
168}
169
170// determines if the item is the first in the dropdown
171function isFirstDropItem(item) {
172  var drop = $(item).closest('.subnav')[0];
173  var firstInDrop = $('a', drop)[0];
174
175  return firstInDrop === item;
176
177}
178
179// determines if the item is the last in the dropdown
180function isLastDropItem(item) {
181  var drop = $(item).closest('.subnav')[0];
182  var lastInDrop = $('a', drop).last()[0];
183
184  return lastInDrop === item;
185}
186
187// finds the adjacent top level item
188function adjacentTopLevelItem(item, dir) {
189  var li = item.parentNode; // <li />
190  var adjacentLi = (dir === 'next') ?
191                    $(li).next()[0] :
192                    $(li).prev()[0];
193  var adjacentItem = adjacentLi && $('a', adjacentLi)[0];
194
195  return adjacentItem;
196}
197
198// finds the next or prev dropdown item
199function adjacentDropdownItem(item, dir) {
200  var adjacentDropItem;
201  var li = item.parentNode;
202  var adjacentSameCol = (dir === 'next') ?
203                        $(li).next()[0] :
204                        $(li).prev()[0];
205  if (adjacentSameCol) {
206    // there is one in the same col
207    adjacentDropItem = $('a', adjacentSameCol)[0];
208  } else {
209    // lets look for one in the adjacent column
210    var col = $(li).closest('.col')[0];
211    var adjacentCol = (dir === 'next') ?
212                      $(col).next()[0] :
213                      $(col).prev()[0];
214    if (adjacentCol) {
215      // we've found the adjacent column
216      var adjacentItem = (dir === 'next') ?
217                          $('a', adjacentCol)[0] :
218                          $('a', adjacentCol).last()[0];
219
220      if (adjacentItem) {
221        adjacentDropItem = adjacentItem;
222      }
223    }
224  }
225
226  return adjacentDropItem;
227}
228
229
230function openDropdown(item) {
231  $(item.parentNode).addClass('active');
232  var droplet = $(item).next()[0];
233  // open the dropdown...
234  $(droplet).stop(true, true).delay(keyDelayTime).fadeIn(keyFadeTime);
235  // ...and focus the first item
236  setTimeout(function () {
237    $('a', droplet)[0].focus();
238  }, 100);
239}
240
241function closeDropdown(item) {
242  var droplet = $(item).closest('.subnav')[0];
243  var topLevelItem = $(droplet).prev()[0];
244  $(topLevelItem.parentNode).removeClass('active');
245  $(droplet).stop(true, true).delay(keyDelayTime).fadeOut(keyFadeTime);
246
247  return topLevelItem;
248}
249
250$(document).ready(initMenu);
251
252$('table').wrap('<div class="tableWrapper" />'); 
253
254});