https://nclottery.com/Site/JS/fngrprnt-639056322550000000/navigation.js

1document.addEventListener('DOMContentLoaded', function() {
2
3
4	// SCRIPTS FOR HORIZONTAL
5	const menuItems = document.querySelectorAll(".js-has-submenu");
6
7	let expandedItem = null;
8
9	const expandSubMenu = (item) => {
10		const subMenu = item.querySelector("ul");
11		const button = item.querySelector("button");
12		expandedItem = item;
13
14		subMenu.setAttribute("aria-hidden","false");
15		button.setAttribute("aria-expanded","true");
16		item.dataset.expanded = "true";
17	};
18
19	const collapseSubMenu = (item) => {
20		const subMenu = item.querySelector("ul");
21		const button = item.querySelector("button");
22		expandedItem = null;
23
24		subMenu.setAttribute("aria-hidden","true");
25		button.setAttribute("aria-expanded","false");
26		item.dataset.expanded = "false";
27	};
28
29	menuItems.forEach((item) => {
30		const button = item.querySelector("button");
31
32		button.addEventListener("click", (event) => {
33			if (button.ariaExpanded === "false") {
34				expandSubMenu(item);
35			} else {
36				collapseSubMenu(item);
37			}
38		});
39
40		item.addEventListener("mouseenter", () => {
41			expandSubMenu(item);
42		});
43		item.addEventListener("mouseleave", () => {
44			collapseSubMenu(item);
45		});
46	});
47
48	// Handling keyboard navigation
49	/*
50	button.addEventListener("keydown", (event) => {
51		if (event.key === "Enter" || event.key === " ") { // Space or Enter key
52			event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
53			if (button.ariaExpanded === "false") {
54				expandSubMenu(item);
55			} else {
56				collapseSubMenu(item);
57			}
58		}
59	});
60
61	// Handling tab key inside submenu to loop back to the button
62	const subMenuLinks = item.querySelectorAll("ul a");
63	if (subMenuLinks.length) {
64		const lastLink = subMenuLinks[subMenuLinks.length - 1];
65		lastLink.addEventListener("keydown", (event) => {
66			if (event.key === "Tab" && !event.shiftKey) {
67				event.preventDefault();
68				button.focus(); // Move focus back to the button
69			}
70		});
71	}
72	*/
73
74	document.addEventListener("keydown", (event) => {
75		if (event.key === "Tab") {
76			if (!expandedItem) {
77				return;
78			}
79			const subMenu = expandedItem.querySelector("ul");
80			const focusedElement = expandedItem.querySelector(":focus");
81			const firstFocusableElement = expandedItem.querySelector("a");
82			const lastFocusableElement = subMenu.lastElementChild.querySelector("a");
83
84			if (!event.shiftKey && focusedElement === lastFocusableElement) {
85				collapseSubMenu(expandedItem);
86				return;
87			}
88
89			if (event.shiftKey && focusedElement === firstFocusableElement) {
90				collapseSubMenu(expandedItem);
91				return;
92			}
93		}
94
95		if (event.key === "Escape" && expandedItem) {
96			collapseSubMenu(expandedItem);
97		}
98	}); 
99
100
101	// SCRIPTS FOR HAMBURGER
102	const menuToggleButton = document.getElementById('hamburger-toggle');
103	const mainMenu = document.getElementById('main-menu');
104
105	menuToggleButton.addEventListener('click', function() {
106	  const isExpanded = this.getAttribute('aria-expanded') === 'true' || false;
107  
108	  // Toggle the aria-expanded attribute
109	  this.setAttribute('aria-expanded', !isExpanded);
110  
111	  // Toggle the menu visibility class
112		mainMenu.classList.toggle('hamburger-hidden', isExpanded);
113
114		//#################################################
115		// Toggle .js-has-submenu elements to prevent focus
116		const subMenuItems = document.querySelectorAll(".js-has-submenu");
117		subMenuItems.forEach((item) => {
118			const button = item.querySelector("button");
119			button.setAttribute('tabindex', '-1');
120		});
121
122	  // Update aria-label based on state
123	  if (isExpanded) {
124		this.setAttribute('aria-label', 'Open the menu');
125	  } else {
126		this.setAttribute('aria-label', 'Close the menu');
127		// Optional: focus on the first menu item when opened (advanced keyboard management)
128		// mainMenu.querySelector('a').focus(); 
129	  }
130	});
131
132	// Best practice: Allow closing with the Escape key
133	document.addEventListener('keydown', function(event) {
134	  if (event.key === 'Escape' && menuToggleButton.getAttribute('aria-expanded') === 'true') {
135		menuToggleButton.click(); // Uses the existing click handler to close the menu
136		menuToggleButton.focus(); // Return focus to the button after closing
137	  }
138	});
139
140
141	// SCRIPTS FOR USERMENU
142	const userMenuToggleButton = document.getElementById('tabUser');
143	const userMenu = document.getElementById('navUserMenu');
144
145	userMenuToggleButton.addEventListener('click', function() {
146		const isExpanded = this.getAttribute('aria-expanded') === 'true' || false;
147  
148		// Toggle the aria-expanded attribute
149		this.setAttribute('aria-expanded', !isExpanded);
150		this.dataset.expanded = !isExpanded;
151  
152		// Toggle the menu visibility class
153		userMenu.classList.toggle('hide', isExpanded);
154
155		// Update aria-label based on state
156		if (isExpanded) {
157			this.setAttribute('aria-label', 'Open the menu');
158		 } else {
159			this.setAttribute('aria-label', 'Close the menu');

160			// Optional: focus on the first menu item when opened (advanced keyboard management)
161			// mainMenu.querySelector('a').focus(); 
162		}
163	});
164
165	// Best practice: Allow closing with the Escape key
166	document.addEventListener('keydown', function(event) {
167		if (event.key === 'Escape' && userMenuToggleButton.getAttribute('aria-expanded') === 'true') {
168			userMenuToggleButton.click(); // Uses the existing click handler to close the menu
169			userMenuToggleButton.focus(); // Return focus to the button after closing
170		}
171	});
172
173});