add css only menu
This commit is contained in:
parent
a80c7ec6f9
commit
835b8bcc6e
GPG key ID:
56E4A92C2C1E50BA
|
|
@ -11,16 +11,19 @@ import Logo from './Logo.astro';
|
|||
<Logo />
|
||||
</HeaderLink>
|
||||
</ul>
|
||||
<button class="mobile-icon-button hamburger" title="Open navigation">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
<button class="mobile-icon-button close" title="Close navigation">
|
||||
<span class="line line-ltr"></span>
|
||||
<span class="line line-rtl"></span>
|
||||
</button>
|
||||
<div class="menu-backdrop"></div>
|
||||
<input type="checkbox" id="mobile-checkbox" />
|
||||
<label for="mobile-checkbox" class="mobile-icon-button" title="Toggle navigation">
|
||||
<div class="mobile-icon-button-icon icon-open">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<div class="mobile-icon-button-icon icon-close">
|
||||
<span class="line line-ltr"></span>
|
||||
<span class="line line-rtl"></span>
|
||||
</div>
|
||||
<div class="menu-backdrop"></div>
|
||||
</label>
|
||||
<ul class="menu">
|
||||
<HeaderLink href="https://app.memorytwin.com/en/nzambello/Nicola" target="_blank" rel="noopener noreferrer">Twin</HeaderLink>
|
||||
<HeaderLink href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">GitHub</HeaderLink>
|
||||
|
|
@ -77,6 +80,9 @@ import Logo from './Logo.astro';
|
|||
padding: 0;
|
||||
order: 1;
|
||||
}
|
||||
input#mobile-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-icon-button {
|
||||
padding: 10px;
|
||||
|
|
@ -97,11 +103,11 @@ import Logo from './Logo.astro';
|
|||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.mobile-icon-button.hamburger {
|
||||
.mobile-icon-button-icon.icon-open {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mobile-icon-button.hamburger .line {
|
||||
.mobile-icon-button-icon .line {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
|
|
@ -109,11 +115,7 @@ import Logo from './Logo.astro';
|
|||
background-color: var(--text-color);
|
||||
}
|
||||
|
||||
nav#navigation.opened ul.menu,
|
||||
ul.menu:focus,
|
||||
ul.menu:focus-within,
|
||||
.mobile-icon-button.hamburger:focus ~ ul.menu,
|
||||
.mobile-icon-button.hamburger:focus-within ~ ul.menu {
|
||||
#mobile-checkbox:checked ~ ul.menu {
|
||||
display: flex;
|
||||
max-width: 100vw;
|
||||
padding: 3rem 1rem;
|
||||
|
|
@ -123,21 +125,19 @@ import Logo from './Logo.astro';
|
|||
display: none;
|
||||
}
|
||||
|
||||
nav#navigation.opened .menu-backdrop,
|
||||
.mobile-icon-button.hamburger:focus ~ .menu-backdrop,
|
||||
.mobile-icon-button.hamburger:focus-within ~ .menu-backdrop {
|
||||
#mobile-checkbox:checked ~ .mobile-icon-button .menu-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mobile-icon-button.close {
|
||||
.mobile-icon-button-icon.icon-close {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: calc(80vw + 0.5rem);
|
||||
|
|
@ -145,31 +145,30 @@ import Logo from './Logo.astro';
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
nav#navigation.opened .mobile-icon-button.close,
|
||||
.mobile-icon-button.hamburger:focus ~ .mobile-icon-button.close,
|
||||
.mobile-icon-button.hamburger:focus-within ~ .mobile-icon-button.close {
|
||||
#mobile-checkbox:checked ~ .mobile-icon-button .mobile-icon-button-icon.icon-close {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mobile-icon-button.close .line {
|
||||
.mobile-icon-button-icon.icon-close .line {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
background-color: var(--secondary-inverse);
|
||||
position: relative;
|
||||
}
|
||||
.mobile-icon-button.close .line.line-ltr {
|
||||
.mobile-icon-button-icon.icon-close .line.line-ltr {
|
||||
transform: rotate(45deg);
|
||||
top: 2.5px;
|
||||
top: 20px;
|
||||
}
|
||||
.mobile-icon-button.close .line.line-rtl {
|
||||
.mobile-icon-button-icon.icon-close .line.line-rtl {
|
||||
transform: rotate(-45deg);
|
||||
top: -2.5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#mobile-checkbox,
|
||||
.mobile-icon-button {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
nav ul.logo-container {
|
||||
flex-grow: 0;
|
||||
|
|
@ -191,7 +190,7 @@ import Logo from './Logo.astro';
|
|||
padding: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
nav#navigation.opened ul.menu,
|
||||
#mobile-checkbox:checked ~ ul.menu,
|
||||
ul.menu:focus,
|
||||
ul.menu:focus-within {
|
||||
padding: 0;
|
||||
|
|
@ -207,76 +206,18 @@ import Logo from './Logo.astro';
|
|||
<script>
|
||||
(() => {
|
||||
if (window.innerWidth < 768) {
|
||||
let nav = document.getElementById('navigation');
|
||||
let hamburger = document.querySelector('.mobile-icon-button.hamburger');
|
||||
let close = document.querySelector('.mobile-icon-button.close');
|
||||
let menuItems = document.querySelectorAll('ul.menu li a');
|
||||
|
||||
if (!hamburger) {
|
||||
console.error('Missing navigation elements');
|
||||
return;
|
||||
}
|
||||
hamburger.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!nav || !hamburger || !close) {
|
||||
console.error('Missing navigation elements');
|
||||
return;
|
||||
}
|
||||
|
||||
if (nav.classList.contains('opened')) {
|
||||
nav.classList.remove('opened');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
close.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
nav.classList.add('opened');
|
||||
hamburger.setAttribute('aria-expanded', 'true');
|
||||
close.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
let backdrop = document.querySelector('.menu-backdrop');
|
||||
if (backdrop) {
|
||||
backdrop.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!nav || !hamburger || !close) {
|
||||
console.error('Missing navigation elements');
|
||||
return;
|
||||
}
|
||||
|
||||
nav.classList.remove('opened');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
close.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
|
||||
if (close) {
|
||||
close.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!nav || !hamburger || !close) {
|
||||
console.error('Missing navigation elements');
|
||||
return;
|
||||
}
|
||||
|
||||
nav.classList.remove('opened');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
close.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
let mobileCheckbox = document.getElementById('mobile-checkbox');
|
||||
|
||||
if (menuItems) {
|
||||
menuItems.forEach(item => {
|
||||
item.addEventListener('click', function (e) {
|
||||
if (!nav || !hamburger || !close) {
|
||||
console.error('Missing navigation elements');
|
||||
if (!mobileCheckbox) {
|
||||
console.error('Missing checkbox');
|
||||
return;
|
||||
}
|
||||
|
||||
nav.classList.remove('opened');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
close.setAttribute('aria-expanded', 'false');
|
||||
mobileCheckbox.click();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -162,3 +162,7 @@ button:active {
|
|||
--border-color: transparent;
|
||||
--color: var(--text-color);
|
||||
}
|
||||
|
||||
main ul li {
|
||||
list-style: circle;
|
||||
}
|
||||
Loading…
Reference in a new issue