优化移动端
This commit is contained in:
@@ -81,6 +81,7 @@ const consoleSites = [
|
||||
<i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i>
|
||||
<i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div class="nav-drawer-backdrop" data-nav-backdrop></div>
|
||||
<div class="nav-menu" data-nav-menu>
|
||||
<div class="nav-links nav-center">
|
||||
{siteConfig.nav.map((item) => (
|
||||
@@ -212,25 +213,43 @@ const consoleSites = [
|
||||
const nav = document.querySelector('.nav');
|
||||
const toggle = document.querySelector('[data-nav-toggle]');
|
||||
const menu = document.querySelector('[data-nav-menu]');
|
||||
const backdrop = document.querySelector('[data-nav-backdrop]');
|
||||
if (!nav || !toggle || !menu) return;
|
||||
|
||||
function setMenu(open) {
|
||||
nav.classList.toggle('is-open', open);
|
||||
toggle.setAttribute('aria-expanded', String(open));
|
||||
toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
|
||||
menu.setAttribute('aria-hidden', String(!open && window.innerWidth <= 720));
|
||||
document.body.classList.toggle('has-nav-drawer', open);
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
setMenu(!nav.classList.contains('is-open'));
|
||||
});
|
||||
|
||||
backdrop?.addEventListener('click', () => setMenu(false));
|
||||
|
||||
menu.addEventListener('click', (event) => {
|
||||
if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!nav.classList.contains('is-open')) return;
|
||||
if (event.target instanceof Node && nav.contains(event.target)) return;
|
||||
setMenu(false);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && nav.classList.contains('is-open')) setMenu(false);
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth > 720) setMenu(false);
|
||||
else menu.setAttribute('aria-hidden', String(!nav.classList.contains('is-open')));
|
||||
});
|
||||
|
||||
menu.setAttribute('aria-hidden', String(window.innerWidth <= 720));
|
||||
})();
|
||||
|
||||
(() => {
|
||||
|
||||
@@ -56,6 +56,10 @@
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.nav-drawer-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu-toggle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@@ -87,11 +87,13 @@
|
||||
align-items: center;
|
||||
gap: 0 10px;
|
||||
border-radius: 24px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.nav-menu-toggle {
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.nav.is-open .nav-menu-open,
|
||||
@@ -103,17 +105,65 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.has-nav-drawer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
background: rgba(28, 37, 42, 0.22);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.nav.is-open .nav-drawer-backdrop {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: none;
|
||||
grid-column: 1 / -1;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.46);
|
||||
padding-top: 10px;
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top, 0px) + 72px);
|
||||
right: max(12px, var(--page-gutter));
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
width: min(312px, calc(100vw - 32px));
|
||||
max-height: calc(100dvh - 92px);
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
border: 1px solid rgba(255, 255, 255, 0.62);
|
||||
border-radius: 22px;
|
||||
padding: 14px;
|
||||
background:
|
||||
radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.78), transparent 34%),
|
||||
linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 248, 241, 0.7)),
|
||||
rgba(255, 253, 248, 0.92);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.82),
|
||||
0 22px 64px rgba(44, 55, 63, 0.24);
|
||||
backdrop-filter: blur(22px) saturate(170%);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(170%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(calc(100% + 24px)) scale(0.98);
|
||||
transform-origin: top right;
|
||||
transition:
|
||||
opacity 0.18s ease,
|
||||
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav.is-open .nav-menu {
|
||||
display: grid;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@@ -128,11 +178,11 @@
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.nav-links a,
|
||||
@@ -142,6 +192,33 @@
|
||||
.theme-toggle {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
min-height: 42px;
|
||||
border-color: rgba(15, 118, 110, 0.1);
|
||||
background: rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .nav-drawer-backdrop {
|
||||
background: rgba(3, 10, 12, 0.36);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .nav-menu {
|
||||
border-color: rgba(166, 184, 194, 0.2);
|
||||
background:
|
||||
radial-gradient(circle at 82% 0%, rgba(125, 211, 199, 0.16), transparent 36%),
|
||||
linear-gradient(145deg, rgba(25, 35, 42, 0.94), rgba(10, 15, 20, 0.82)),
|
||||
rgba(10, 15, 20, 0.88);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 22px 64px rgba(0, 0, 0, 0.46);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .nav-links a,
|
||||
:root[data-theme='dark'] .nav-random,
|
||||
:root[data-theme='dark'] .nav-search,
|
||||
:root[data-theme='dark'] .nav-console,
|
||||
:root[data-theme='dark'] .theme-toggle {
|
||||
border-color: rgba(125, 211, 199, 0.16);
|
||||
background: rgba(125, 211, 199, 0.08);
|
||||
}
|
||||
|
||||
.control-console {
|
||||
|
||||
@@ -89,7 +89,9 @@
|
||||
}
|
||||
|
||||
.random-post-transition,
|
||||
.random-post-transition-card {
|
||||
.random-post-transition-card,
|
||||
.nav-drawer-backdrop,
|
||||
.nav-menu {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user