remove mobile menu js
This commit is contained in:
@@ -59,13 +59,6 @@
|
||||
<span class="visually-hidden">Home page</span>
|
||||
</a>
|
||||
|
||||
<nav class="desktop-nav" aria-label="Primary navigation">
|
||||
<ul>
|
||||
<li><a href="/" class="menu-button">Work</a></li>
|
||||
<li><a href="/about.html" class="menu-button">About</a></li>
|
||||
<li><a href="/privacy.html" class="menu-button">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="menu-right">
|
||||
@@ -81,45 +74,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
class="menu-toggle"
|
||||
id="menuToggle"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="mobileMenu"
|
||||
aria-haspopup="true"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="menu-overlay" id="menuOverlay" hidden></div>
|
||||
|
||||
<aside
|
||||
class="mobile-menu"
|
||||
id="mobileMenu"
|
||||
aria-label="Mobile navigation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="mobile-menu__header">
|
||||
<strong>Menu</strong>
|
||||
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Mobile navigation">
|
||||
<ul>
|
||||
<li><a href="/" class="button-primary" aria-current="page">Work</a></li>
|
||||
<li><a href="/legal-notice.html" class="button-primary">About</a></li>
|
||||
<li><a href="/privacy.html" class="button-primary">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h1>4💀4</h1>
|
||||
|
||||
@@ -1,64 +1,3 @@
|
||||
// Menu system
|
||||
|
||||
const body = document.body;
|
||||
const menuToggle = document.getElementById('menuToggle');
|
||||
const menuClose = document.getElementById('menuClose');
|
||||
const menuOverlay = document.getElementById('menuOverlay');
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
const siteContent = document.getElementById('siteContent');
|
||||
|
||||
function openMenu() {
|
||||
body.classList.add('menu-open');
|
||||
menuOverlay.hidden = false;
|
||||
menuToggle.classList.add('is-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'true');
|
||||
menuToggle.setAttribute('aria-label', 'Close menu');
|
||||
mobileMenu.setAttribute('aria-hidden', 'false');
|
||||
siteContent.setAttribute('inert', '');
|
||||
menuClose.focus();
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
body.classList.remove('menu-open');
|
||||
menuToggle.classList.remove('is-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
menuToggle.setAttribute('aria-label', 'Open menu');
|
||||
mobileMenu.setAttribute('aria-hidden', 'true');
|
||||
siteContent.removeAttribute('inert');
|
||||
menuToggle.focus();
|
||||
|
||||
window.setTimeout(() => {
|
||||
if (!body.classList.contains('menu-open')) {
|
||||
menuOverlay.hidden = true;
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
if (body.classList.contains('menu-open')) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
}
|
||||
|
||||
menuToggle.addEventListener('click', toggleMenu);
|
||||
menuClose.addEventListener('click', closeMenu);
|
||||
menuOverlay.addEventListener('click', closeMenu);
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && body.classList.contains('menu-open')) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth >= 768 && body.classList.contains('menu-open')) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// accessibility toggle
|
||||
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user