Use data attribute instead of class for mobile navopen.
This commit is contained in:
parent
76ab47f22d
commit
847e2b10ba
2 changed files with 9 additions and 9 deletions
|
|
@ -12,14 +12,14 @@
|
|||
const toggle = document.querySelector('.mobile-nav__toggle');
|
||||
|
||||
function navopen() {
|
||||
nav.classList.add('js-nav-open');
|
||||
nav.dataset.navopen='true';
|
||||
sheet.setAttribute('aria-hidden', 'false');
|
||||
toggle.setAttribute('aria-expanded', 'true');
|
||||
document.body.addEventListener('keydown', closeonesc);
|
||||
}
|
||||
|
||||
function navclose() {
|
||||
nav.classList.remove('js-nav-open');
|
||||
delete nav.dataset.navopen;
|
||||
sheet.setAttribute('aria-hidden', 'true');
|
||||
toggle.setAttribute('aria-expanded', 'false');
|
||||
document.body.removeEventListener('keydown', closeonesc);
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
toggles.forEach(function (toggle) {
|
||||
toggle.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
if (nav.classList.contains('js-nav-open')) {
|
||||
if (nav.dataset.navopen) {
|
||||
navclose();
|
||||
}
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
&.js-nav-open {
|
||||
&[data-navopen] {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
background-color: var(--color-mobile-menu-cover);
|
||||
opacity: 0;
|
||||
|
||||
.js-nav-open & {
|
||||
[data-navopen] & {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
transform-origin: center;
|
||||
}
|
||||
|
||||
.js-nav-open & { // stylelint-disable max-nesting-depth
|
||||
[data-navopen] & { // stylelint-disable max-nesting-depth
|
||||
rect {
|
||||
y: 45px;
|
||||
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
transform: translateX(100vw);
|
||||
z-index: 21;
|
||||
|
||||
.js-nav-open & {
|
||||
[data-navopen] & {
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
box-shadow: -10px 0 10px -10px var(--color-nearblack);
|
||||
|
|
@ -149,13 +149,13 @@
|
|||
|
||||
&__cover,
|
||||
&__toggle,
|
||||
&__hamburger rect,
|
||||
&__hamburger > rect,
|
||||
&__sheet {
|
||||
// Add some transitions unless user prefer less motion.
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: all 130ms ease-in;
|
||||
|
||||
.js-nav-open & {
|
||||
[data-navopen] & {
|
||||
transition: all 330ms ease-out;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue