Initiate variables for navbar class names

This commit is contained in:
Helen Chong 2024-06-10 19:35:27 +08:00
parent 3c5f7f68a4
commit 9969d0e36f
1 changed files with 7 additions and 5 deletions

View File

@ -91,16 +91,18 @@
{# Accessible hamburger menu navigation script based on:
https://accessibleweb.dev/navigation #}
const navbarToggle = document.querySelector(".navbar__toggle");
const navbarLinks = document.querySelector(".navbar__links");
const navbarLinkItems = document.querySelectorAll(".navbar__links li a");
const navbarLinksClass = ".navbar__links";
const navbarLinks = document.querySelector(navbarLinksClass);
const showNavLinksClass = "navbar__links--show";
const navbarLinkItems = document.querySelectorAll(navbarLinksClass + " li a");
const openNavigation = () => {
navbarLinks.classList.add("navbar__links--show");
navbarLinks.classList.add(showNavLinksClass);
navbarToggle.ariaExpanded = "true";
};
const closeNavigation = () => {
navbarLinks.classList.remove("navbar__links--show");
navbarLinks.classList.remove(showNavLinksClass);
navbarToggle.ariaExpanded = "false";
};
@ -119,7 +121,7 @@
});
const handleBlur = (event) => {
const navList = event.currentTarget.closest(".navbar__links");
const navList = event.currentTarget.closest(navbarLinksClass);
if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
closeNavigation();
}