feat(nav): add hamburger menu for mobile navigation (Fix #27)
All checks were successful
Deploy Feature Branch to Test / deploy (push) Successful in 24s
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:
@@ -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();
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user