43 lines
2.0 KiB
JavaScript
43 lines
2.0 KiB
JavaScript
$(function() {
|
|
// Start with your project-level client-side javascript here.
|
|
// JQuery and lodash (_) are both included with Apostrophe, so no need to
|
|
// worry about including them on your own.
|
|
|
|
|
|
//
|
|
// This is the Javascript to handle displaying and hiding the mega menus.
|
|
// We are using this instead of CSS and the hover selector because we want to allow for touch screen users to be able to open it and have it stay open when they tap.
|
|
// Clicking also makes for a less confusing UI for users that have a hard time figuring out what is going on.
|
|
//
|
|
|
|
let $topMenuItems = $("nav.navbar ul > li");
|
|
let $topMenuContent = $("nav.navbar ul > li > div.dropdown-content");
|
|
|
|
// Handle the menu losing focus. This should remove visibility of the menu normally, but not when the click will result in one of the menus from displaying or hiding (clicking the same menu button).
|
|
$topMenuContent.focusout(function(event) {
|
|
let currentTarget = $(event.currentTarget);
|
|
// Get the element that focus is switching to. This is held by the focus event that caused the focusout event to fire.
|
|
let focused = event.originalEvent.target;
|
|
// Test whether the newly focused element is one of the navigation elements.
|
|
let isNav = $(focused).parents("nav.navbar ul > li").length > 0;
|
|
|
|
// Hide the menu if the newly focused element isn't one of the menu elements.
|
|
if(!isNav) {
|
|
currentTarget.parent().removeClass('display');
|
|
}
|
|
});
|
|
// Handle one of the top level menu items being clicked. This normally shows the mega menu div and chevron by applying a "display" class to the li element for the menu.
|
|
// If the menu already is open then the menu should close. If another menu was already open then close it here so that there is a nice smooth transition.
|
|
$topMenuItems.click((event) => {
|
|
let $clickedMenuItem = $(event.currentTarget);
|
|
|
|
if($clickedMenuItem.hasClass('display')) {
|
|
$clickedMenuItem.removeClass('display');
|
|
}
|
|
else {
|
|
$topMenuItems.removeClass('display');
|
|
$clickedMenuItem.addClass('display');
|
|
}
|
|
});
|
|
});
|