1
0
forked from HPR/hpr_generator

Added hamburger menu for narrow devices

This commit is contained in:
Lee Hanken
2025-08-08 16:06:08 +01:00
parent 3991c95533
commit a29585dd82
5 changed files with 105 additions and 1 deletions

27
public_html/js/menu.js Normal file
View File

@@ -0,0 +1,27 @@
const hamburger = document.querySelector('.hamburger');
const mainNav = document.querySelector('#main_menu');
const hamburgerIcon = document.querySelector('.hamburger_icon');
const closeIcon = document.querySelector('.close_icon');
hamburger.addEventListener('click', function() {
const isOpen = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isOpen);
mainNav.classList.toggle('is_open');
hamburgerIcon.classList.toggle('is_open');
closeIcon.classList.toggle('is_open');
if (!isOpen) {
const firstLink = mainNav.querySelector('a');
if (firstLink) firstLink.focus();
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && mainNav.classList.contains('is_open')) {
mainNav.classList.remove('is_open');
hamburger.setAttribute('aria-expanded', 'false');
hamburger.focus();
}
});