generated from inherentlee/11ty
58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
var navList = document.querySelector("header nav ul");
|
|
var navButton = document.querySelector("header nav button");
|
|
|
|
const navItems = navList.querySelectorAll("a");
|
|
const firstItem = navItems[0];
|
|
const lastItem = navItems[navItems.length - 1];
|
|
|
|
const openMenu = function() {
|
|
navList.ariaHidden = "false";
|
|
navButton.ariaExpanded = "true";
|
|
}
|
|
|
|
const closeMenu = function() {
|
|
navList.ariaHidden = "true";
|
|
navButton.ariaExpanded = "false";
|
|
}
|
|
|
|
if (window.innerWidth <= 650) {
|
|
navList.ariaHidden = "true";
|
|
}
|
|
|
|
/* basic open and close */
|
|
navButton.addEventListener("click", (e) => {
|
|
if (navButton.ariaExpanded === "true") closeMenu();
|
|
else openMenu();
|
|
});
|
|
|
|
navButton.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter" || event.key === " ") { // Space or Enter key
|
|
event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
|
|
if (navButton.ariaExpanded === "false") openMenu();
|
|
else closeMenu();
|
|
} else if (event.key === "Tab" && event.shiftKey) closeMenu();
|
|
});
|
|
|
|
/* tab out of menu in either direction */
|
|
firstItem.addEventListener("keydown", (e) => {
|
|
if (event.key === "Tab" && event.shiftKey) closeMenu();
|
|
});
|
|
|
|
lastItem.addEventListener("keydown", (e) => {
|
|
if (event.key === "Tab" && !event.shiftKey) closeMenu();
|
|
});
|
|
|
|
/* escape/click away from menu */
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape" && navButton.ariaExpanded === "true") {
|
|
closeMenu();
|
|
navButton.focus();
|
|
}
|
|
});
|
|
|
|
window.addEventListener("click", (e) => {
|
|
if (navButton.ariaExpanded === "true" &&
|
|
!event.target.matches("header nav ul") &&
|
|
!event.target.matches("header nav button")) closeMenu();
|
|
})
|
