feat(nav): add hamburger menu for mobile navigation (Fix #27)
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 24s

- Hamburger button with animated X toggle (CSS-only icon)
- Slide-down mobile nav on ≤900px with 44px+ tap targets
- Semi-transparent overlay when menu is open
- Escape key + outside click + link click closes menu
- Auto-close on resize to desktop
- Desktop navigation unchanged
- Pure vanilla JS toggle, no jQuery dependency
This commit is contained in:
2026-05-14 17:40:20 +00:00
parent 51d4f96b20
commit 565c8b304d
3 changed files with 180 additions and 0 deletions

View File

@@ -101,3 +101,48 @@ $(function () {
$("#formSuccess").fadeIn(400);
});
});
// Mobile hamburger menu (vanilla JS)
(function () {
var hamburger = document.querySelector(".nav-hamburger");
var nav = document.getElementById("navbar");
var overlay = document.querySelector(".nav-mobile-overlay");
var links = nav ? nav.querySelectorAll(".nav-links a") : [];
function toggleMenu() {
var isOpen = hamburger.classList.toggle("active");
nav.classList.toggle("mobile-open", isOpen);
if (overlay) overlay.classList.toggle("active", isOpen);
hamburger.setAttribute("aria-expanded", isOpen);
document.body.style.overflow = isOpen ? "hidden" : "";
}
function closeMenu() {
hamburger.classList.remove("active");
nav.classList.remove("mobile-open");
if (overlay) overlay.classList.remove("active");
hamburger.setAttribute("aria-expanded", "false");
document.body.style.overflow = "";
}
if (hamburger) {
hamburger.addEventListener("click", toggleMenu);
}
if (overlay) {
overlay.addEventListener("click", closeMenu);
}
links.forEach(function (link) {
link.addEventListener("click", closeMenu);
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") closeMenu();
});
// Close on resize to desktop
window.addEventListener("resize", function () {
if (window.innerWidth > 900) closeMenu();
});
})();