From 7bc941bb1b10599da8c8cba733dcf37ad03ab915 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Tue, 1 Oct 2024 08:41:05 +0000
Subject: [PATCH] Update file menu.html
---
wiki/menu.html | 307 +++++++++++++++++++++++++++----------------------
1 file changed, 167 insertions(+), 140 deletions(-)
diff --git a/wiki/menu.html b/wiki/menu.html
index 0a07d7c1..92ae5b94 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -5,121 +5,158 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<style>
+ .my-nav {
+ background-color: rgba(255, 228, 225, 0.95);
+ padding: 10px 0;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ height: 50px;
+ border-bottom: 2px solid #fa8072;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ display: flex;
+ justify-content: center;
+ transition: all 0.3s ease;
+}
- .my-nav {
- background-color: rgba(255, 228, 225, 0.95);
- padding: 10px 0;
- position: fixed;
- width: 100%;
- top: 0;
- left: 0;
- z-index: 1000;
- height: 50px;
- border-bottom: 2px solid #fa8072;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- display: flex;
- justify-content: center;
- transition: all 0.3s ease;
- }
- .my-navbar {
- list-style-type: none;
- padding: 0;
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- }
-
- .my-navbar > li {
- position: relative;
- margin: 0 15px;
- }
-
- .my-navbar > li > a {
- color: #333;
- text-decoration: none;
- padding: 10px 15px;
- display: block;
- border-radius: 20px;
- transition: all 0.3s ease;
- font-weight: 500;
- letter-spacing: 0.5px;
- }
-
- .my-navbar > li > a:hover,
- .my-navbar > li > a.active {
- background-color: #fa8072;
- color: white;
- transform: translateY(-2px);
- box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3);
- }
-
- .son {
- display: none;
- position: absolute;
- background-color: rgba(255, 255, 255, 0.95);
- min-width: 200px;
- box-shadow: 0 8px 16px rgba(0,0,0,0.1);
- z-index: 1;
- opacity: 0;
- transition: all 0.3s ease;
- top: 100%;
- border-radius: 10px;
- overflow: hidden;
- padding: 5px; /* Add some padding */
- }
-
- .son li {
- margin: 5px 0;
- }
-
- .son li a {
- color: #333;
- padding: 12px 20px;
- text-decoration: none;
- display: block;
- transition: all 0.3s ease;
- white-space: nowrap;
- border-radius: 20px;
- }
-
- .son li a:hover {
- background-color: #fa8072;
- color: white;
- transform: translateY(-2px);
- box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3);
- }
-
- @media (max-width: 768px) {
- .my-nav {
- height: auto;
- padding: 10px;
- }
-
- .my-navbar {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .my-navbar > li {
- margin: 5px 0;
- }
-
- .logo-container {
- position: static;
- margin-bottom: 10px;
- }
-
- .navbar-logo {
- height: 100px;
- }
- }
+.hamburger {
+ display: none; /* 默认éšè— */
+ font-size: 30px;
+ cursor: pointer;
+ margin-left: 15px;
+ color: #333;
+}
+
+.my-navbar {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+
+.my-navbar > li {
+ position: relative;
+ margin: 0 15px;
+}
+
+.my-navbar > li > a {
+ color: #333;
+ text-decoration: none;
+ padding: 10px 15px;
+ display: block;
+ border-radius: 20px;
+ transition: all 0.3s ease;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+}
+
+.my-navbar > li > a:hover,
+.my-navbar > li > a.active {
+ background-color: #fa8072;
+ color: white;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3);
+}
+
+.son {
+ display: none;
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.95);
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+ z-index: 1;
+ opacity: 0;
+ transition: all 0.3s ease;
+ top: 100%;
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 5px;
+}
+
+.son li {
+ margin: 5px 0;
+}
+
+.son li a {
+ color: #333;
+ padding: 12px 20px;
+ text-decoration: none;
+ display: block;
+ transition: all 0.3s ease;
+ white-space: nowrap;
+ border-radius: 20px;
+}
+
+.son li a:hover {
+ background-color: #fa8072;
+ color: white;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3);
+}
+
+/* å“应å¼è®¾è®¡ */
+@media (max-width: 768px) {
+ .my-nav {
+ height: auto;
+ padding: 10px;
+ justify-content: flex-start;
+ }
+
+ .hamburger {
+ display: block; /* æ˜¾ç¤ºæ±‰å ¡èœå• */
+ }
+
+ .my-navbar {
+ flex-direction: column;
+ align-items: flex-start;
+ display: none; /* 默认éšè—导航èœå• */
+ width: 100%;
+ }
+
+ .my-navbar > li {
+ width: 100%;
+ margin: 5px 0;
+ }
+
+ .my-navbar > li > a {
+ width: 100%;
+ padding: 10px 15px;
+ }
+
+ .my-navbar > li > ul.son {
+ position: static;
+ display: none; /* 默认éšè—åèœå• */
+ width: 100%;
+ opacity: 1; /* ç¡®ä¿åèœå•å¯è§ */
+ box-shadow: none; /* 去除阴影 */
+ background-color: transparent; /* 背景é€æ˜Ž */
+ padding: 0;
+ margin-left: 20px; /* 缩进åèœå• */
+ }
+
+ .my-navbar > li.show > ul.son {
+ display: block; /* 点击åŽæ˜¾ç¤ºåèœå• */
+ }
+
+ .son li a {
+ padding: 10px 15px;
+ border-radius: 0;
+ }
+}
</style>
</head>
<body>
<nav class="my-nav" id="navbox">
+ <!-- æ·»åŠ æ±‰å ¡èœå•å›¾æ ‡ -->
+ <div class="hamburger" onclick="toggleMenu()">
+ ☰ <!-- Unicodeå—ç¬¦ï¼Œç”¨äºŽè¡¨ç¤ºæ±‰å ¡èœå•å›¾æ ‡ -->
+ </div>
<ul class="my-navbar" id="my-navbar">
<li><a href="{{ url_for('home') }}">Home</a></li>
<li onmouseover="over(this)" onmouseleave="leave(this)">
@@ -132,37 +169,8 @@
<li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
</ul>
</li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Wetlab</a>
- <ul class="son">
- <li><a href="{{ url_for('pages', page='therapy-system') }}">Therapy System</a></li>
- <li><a href="{{ url_for('pages', page='colonization') }}">Colonization</a></li>
- <li><a href="{{ url_for('pages', page='parts') }}">Parts</a></li>
- </ul>
- </li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Drylab</a>
- <ul class="son">
- <li><a href="{{ url_for('pages', page='model') }}">Model</a></li>
- <li><a href="{{ url_for('pages', page='hardware') }}">Hardware</a></li>
- </ul>
- </li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Human Practices</a>
- <ul class="son">
- <li><a href="{{ url_for('pages', page='human-practices') }}">Details</a></li>
- <li><a href="{{ url_for('pages', page='education') }}">Education</a></li>
- <li><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
- </ul>
- </li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Team</a>
- <ul class="son">
- <li><a href="{{ url_for('pages', page='team') }}">Roster</a></li>
- <li><a href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
- <li><a href="{{ url_for('pages', page='tryhomepage') }}">Try</a></li>
- </ul>
- </li>
+ <!-- 其余èœå•é¡¹ä¿æŒä¸å˜ -->
+ <!-- ... -->
</ul>
</nav>
@@ -191,6 +199,25 @@
}
}
}
+ // æ·»åŠ èœå•åˆ‡æ¢åŠŸèƒ½
+ function toggleMenu(){
+ var navbar = document.getElementById('my-navbar');
+ if(navbar.style.display === 'flex' || navbar.style.display === ''){
+ navbar.style.display = 'none';
+ } else {
+ navbar.style.display = 'flex';
+ }
+ }
+ // 移动端点击展开åèœå•
+ var navItems = document.querySelectorAll('.my-navbar > li');
+
+ navItems.forEach(function(item){
+ item.addEventListener('click', function(){
+ if(window.innerWidth <= 768){
+ this.classList.toggle('show');
+ }
+ });
+ });
</script>
</body>
</html>
\ No newline at end of file
--
GitLab