From 99bf3f05c6d1a59060786725dda8e01bde80a1c9 Mon Sep 17 00:00:00 2001 From: zhangyuheng Date: Tue, 10 Feb 2026 13:12:22 +0800 Subject: [PATCH] Implement mobile navigation menu and enhance navbar responsiveness --- index.html | 22 +++++++- script.js | 37 +++++++++++++ stats.html | 18 +++++- stats_script.js | 37 +++++++++++++ style.css | 143 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 254 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b638d19..54012db 100644 --- a/index.html +++ b/index.html @@ -16,20 +16,38 @@ + +
+
+ 文档 + 地图 + 相册 + 群聊 + 数据 +
+
+
diff --git a/script.js b/script.js index 5bceac2..5420aa1 100644 --- a/script.js +++ b/script.js @@ -29,8 +29,45 @@ document.addEventListener('DOMContentLoaded', () => { setupModal(); fetchServerStatus(); startRuntimeTimer(); + setupMobileMenu(); }); +function setupMobileMenu() { + const toggle = document.getElementById('mobile-toggle'); + const menu = document.getElementById('mobile-menu'); + + if (toggle && menu) { + const icon = toggle.querySelector('i'); + toggle.addEventListener('click', () => { + menu.classList.toggle('active'); + document.body.classList.toggle('menu-open'); + + if (menu.classList.contains('active')) { + if(icon) { + icon.classList.remove('fa-bars'); + icon.classList.add('fa-times'); + } + } else { + if(icon) { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); + } + } + }); + + menu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + menu.classList.remove('active'); + document.body.classList.remove('menu-open'); + if(icon) { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); + } + }); + }); + } +} + function startRuntimeTimer() { const startTime = new Date("2021-09-14T09:57:59").getTime(); diff --git a/stats.html b/stats.html index f35aea0..e7b852b 100644 --- a/stats.html +++ b/stats.html @@ -235,22 +235,38 @@ + +
+
+ 文档 + 地图 + 相册 + 群聊 + 数据 +
+
+
diff --git a/stats_script.js b/stats_script.js index 4c8ac51..82430f4 100644 --- a/stats_script.js +++ b/stats_script.js @@ -3,8 +3,45 @@ document.addEventListener('DOMContentLoaded', () => { setupModal(); setupSearch(); setupLoadMore(); + setupMobileMenu(); }); +function setupMobileMenu() { + const toggle = document.getElementById('mobile-toggle'); + const menu = document.getElementById('mobile-menu'); + + if (toggle && menu) { + const icon = toggle.querySelector('i'); + toggle.addEventListener('click', () => { + menu.classList.toggle('active'); + document.body.classList.toggle('menu-open'); + + if (menu.classList.contains('active')) { + if(icon) { + icon.classList.remove('fa-bars'); + icon.classList.add('fa-times'); + } + } else { + if(icon) { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); + } + } + }); + + menu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + menu.classList.remove('active'); + document.body.classList.remove('menu-open'); + if(icon) { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); + } + }); + }); + } +} + let allPlayers = []; let displayedPlayers = []; let currentPage = 1; diff --git a/style.css b/style.css index 3f753b4..f103d86 100644 --- a/style.css +++ b/style.css @@ -48,12 +48,21 @@ body { font-size: 12px; } +.logo a { + display: block; +} + .logo img { height: 32px; width: auto; display: block; } +.nav-links { + display: flex; + align-items: center; +} + .nav-links a { text-decoration: none; color: var(--text-primary); @@ -66,6 +75,12 @@ body { opacity: 1; } +.nav-cta-container { + display: flex; + align-items: center; + margin-left: 24px; +} + .nav-cta { background: #0071e3; color: white !important; @@ -75,6 +90,7 @@ body { font-weight: 500; opacity: 1 !important; transition: all 0.2s; + text-decoration: none; } .nav-cta:hover { @@ -705,3 +721,130 @@ footer { #sponsors-table tr:hover { background-color: #f5f5f7; } + +/* Mobile Navbar Optimization */ +.mobile-toggle { + display: none; + background: none; + border: none; + color: var(--text-primary); + font-size: 20px; + cursor: pointer; + padding: 0; + width: 40px; + height: 40px; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background 0.2s; +} + +.mobile-toggle:hover { + background: rgba(0,0,0,0.05); +} + +.mobile-menu { + position: fixed; + top: 44px; + left: 0; + width: 100%; + height: 0; + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + overflow: hidden; + transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; + opacity: 0; + visibility: hidden; + z-index: 998; +} + +.mobile-menu.active { + height: calc(100vh - 44px); + opacity: 1; + visibility: visible; +} + +.mobile-menu-links { + padding: 24px 40px; + display: flex; + flex-direction: column; + gap: 0; + max-width: 600px; + margin: 0 auto; +} + +.mobile-menu-links a { + display: block; + font-size: 24px; + font-weight: 600; + text-decoration: none; + color: var(--text-primary); + padding: 16px 0; + border-bottom: 1px solid rgba(0,0,0,0.05); + opacity: 0; + transform: translateY(-20px); + transition: all 0.4s ease; +} + +.mobile-menu.active .mobile-menu-links a { + opacity: 1; + transform: translateY(0); +} + +/* Stagger animation */ +.mobile-menu.active .mobile-menu-links a:nth-child(1) { transition-delay: 0.1s; } +.mobile-menu.active .mobile-menu-links a:nth-child(2) { transition-delay: 0.15s; } +.mobile-menu.active .mobile-menu-links a:nth-child(3) { transition-delay: 0.2s; } +.mobile-menu.active .mobile-menu-links a:nth-child(4) { transition-delay: 0.25s; } +.mobile-menu.active .mobile-menu-links a:nth-child(5) { transition-delay: 0.3s; } + +/* Desktop Adjustment to keep alignment with split items */ +@media (min-width: 769px) { + .nav-links.desktop-only { + margin-left: auto; /* Push links and CTA to right */ + } + .nav-cta-container { + margin-left: 24px; + } +} + +/* Responsive Navbar Adjustments */ +@media (max-width: 768px) { + .nav-content { + justify-content: space-between; + padding: 0 15px; + } + + .desktop-only { + display: none !important; + } + + .mobile-toggle { + display: flex; + order: 1; /* Left */ + } + + .logo { + position: absolute; + left: 50%; + transform: translateX(-50%); + order: 2; /* Center */ + margin: 0; + } + + .nav-cta-container { + order: 3; /* Right */ + margin: 0; + } + + .nav-cta { + padding: 6px 12px; + font-size: 11px; + } + + /* Prevent body scroll when menu is open */ + body.menu-open { + overflow: hidden; + } +}