ray
75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
/* ============================================================
|
|
Local Business Website — Base JavaScript Template
|
|
Mobile nav toggle, header scroll shrink, active page detection.
|
|
Copy as js/main.js — zero dependencies, vanilla JS.
|
|
============================================================ */
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
/* ---- Elements ---- */
|
|
var hamburger = document.querySelector('.hamburger');
|
|
var mobileNav = document.querySelector('.mobile-nav');
|
|
var header = document.querySelector('.site-header');
|
|
|
|
/* ---- Mobile Nav Toggle ---- */
|
|
if (hamburger && mobileNav) {
|
|
hamburger.addEventListener('click', function () {
|
|
var isOpen = mobileNav.classList.toggle('open');
|
|
hamburger.classList.toggle('active');
|
|
hamburger.setAttribute('aria-expanded', isOpen);
|
|
document.body.style.overflow = isOpen ? 'hidden' : '';
|
|
});
|
|
|
|
/* Close nav when a link is tapped */
|
|
var navLinks = mobileNav.querySelectorAll('a');
|
|
navLinks.forEach(function (link) {
|
|
link.addEventListener('click', function () {
|
|
mobileNav.classList.remove('open');
|
|
hamburger.classList.remove('active');
|
|
hamburger.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
/* ---- Header Shrink on Scroll ---- */
|
|
if (header) {
|
|
window.addEventListener('scroll', function () {
|
|
if (window.scrollY > 80) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
}, { passive: true });
|
|
}
|
|
|
|
/* ---- Active Nav Link Highlighting ---- */
|
|
(function () {
|
|
var currentPath = window.location.pathname.replace(/\/$/, '') || '/';
|
|
var navLinks = document.querySelectorAll('.main-nav a, .footer-nav a');
|
|
navLinks.forEach(function (link) {
|
|
var href = link.getAttribute('href');
|
|
if (!href) return;
|
|
var linkPath = href.replace(/\/$/, '') || '/';
|
|
if (linkPath === '/' && currentPath !== '/') return;
|
|
if (currentPath.startsWith(linkPath) && linkPath !== '/') {
|
|
link.classList.add('active');
|
|
} else if (currentPath === '/' && linkPath === '/') {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
})();
|
|
|
|
/* ---- Smooth Scroll for Anchor Links ---- */
|
|
document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
|
|
anchor.addEventListener('click', function (e) {
|
|
var target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
e.preventDefault();
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|