From c0813e1cef940587abee438765b985744d28401b Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Tue, 1 Oct 2024 08:34:26 +0000
Subject: [PATCH] Update file menu.html
---
wiki/menu.html | 405 ++++++++++++++++++++++---------------------------
1 file changed, 178 insertions(+), 227 deletions(-)
diff --git a/wiki/menu.html b/wiki/menu.html
index b723e958..0a07d7c1 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -3,243 +3,194 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Responsive Navigation Bar</title>
+ <title>Navigation Bar</title>
<style>
- body {
- margin: 0;
- font-family: Arial, sans-serif;
- }
- .my-nav {
- background-color: rgba(255, 228, 225, 0.95);
- padding: 0 20px;
- 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;
- align-items: center;
- box-sizing: border-box;
- }
- .nav-container {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- max-width: 1200px;
- position: relative;
- }
- .my-navbar {
- list-style-type: none;
- padding: 0;
- margin: 0;
- display: flex;
- align-items: center;
- height: 100%;
- }
- .my-navbar > li {
- position: relative;
- height: 100%;
- display: flex;
- align-items: center;
- }
- .my-navbar > li > a {
- color: #333;
- text-decoration: none;
- padding: 0 15px;
- display: flex;
- align-items: center;
- height: 100%;
- 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;
- }
- .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%;
- left: 0;
- border-radius: 0 0 10px 10px;
- overflow: hidden;
- }
- .son li {
- margin: 0;
- }
- .son li a {
- color: #333;
- padding: 12px 20px;
- text-decoration: none;
- display: block;
- transition: all 0.3s ease;
- white-space: nowrap;
- }
- .son li a:hover {
- background-color: #fa8072;
- color: white;
- }
- .menu-icon {
- display: none;
- cursor: pointer;
- padding: 10px;
- position: absolute;
- left: 10px;
- top: 50%;
- transform: translateY(-50%);
- }
- .menu-icon div {
- width: 25px;
- height: 3px;
- background-color: #333;
- margin: 5px 0;
- transition: all 0.3s ease;
- }
- @media (max-width: 768px) {
- .menu-icon {
- display: block;
- }
- .my-navbar {
- position: fixed;
- left: -100%;
- top: 52px;
- flex-direction: column;
- background-color: rgba(255, 228, 225, 0.95);
- width: 100%;
- text-align: center;
- transition: 0.3s;
- box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
- height: calc(100% - 52px);
- overflow-y: auto;
- }
- .my-navbar.active {
- left: 0;
- }
- .my-navbar > li {
- margin: 0;
- width: 100%;
- height: auto;
- }
- .my-navbar > li > a {
- padding: 15px;
- width: 100%;
- box-sizing: border-box;
- }
- .son {
- position: static;
- display: none;
- background-color: rgba(250, 128, 114, 0.1);
- box-shadow: none;
- opacity: 1;
- width: 100%;
- }
- .son.active {
- display: block;
- }
- }
+
+ .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;
+ }
+ }
</style>
</head>
+
<body>
<nav class="my-nav" id="navbox">
- <div class="nav-container">
- <div class="menu-icon" onclick="toggleMenu()">
- <div></div>
- <div></div>
- <div></div>
- </div>
- <ul class="my-navbar" id="my-navbar">
- <li><a href="{{ url_for('home') }}">Home</a></li>
- <li>
- <a href="#" onclick="toggleSubmenu(this)">Project</a>
- <ul class="son">
- <li><a href="{{ url_for('pages', page='description') }}">Description</a></li>
- <li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
- <li><a href="{{ url_for('pages', page='proof-of-concept') }}">Proof Of Concept</a></li>
- <li><a href="{{ url_for('pages', page='safety') }}">Safety</a></li>
- <li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
- </ul>
- </li>
- <li>
- <a href="#" onclick="toggleSubmenu(this)">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>
- <a href="#" onclick="toggleSubmenu(this)">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>
- <a href="#" onclick="toggleSubmenu(this)">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>
- <a href="#" onclick="toggleSubmenu(this)">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>
- </div>
+ <ul class="my-navbar" id="my-navbar">
+ <li><a href="{{ url_for('home') }}">Home</a></li>
+ <li onmouseover="over(this)" onmouseleave="leave(this)">
+ <a href="#" style="cursor:default;">Project</a>
+ <ul class="son">
+ <li><a href="{{ url_for('pages', page='description') }}">Description</a></li>
+ <li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
+ <li><a href="{{ url_for('pages', page='proof-of-concept') }}">Proof Of Concept</a></li>
+ <li><a href="{{ url_for('pages', page='safety') }}">Safety</a></li>
+ <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>
<script>
- function toggleMenu() {
- const navbar = document.getElementById('my-navbar');
- navbar.classList.toggle('active');
- }
-
- function toggleSubmenu(el) {
- if (window.innerWidth <= 768) {
- event.preventDefault();
- const submenu = el.nextElementSibling;
- submenu.classList.toggle('active');
+ function over(el){
+ el.children[0].classList.add('active');
+ if (el.children.length > 1){
+ let son = el.children[1];
+ if (getComputedStyle(son,null)["display"]=="none"){
+ son.style.display = "block";
+ setTimeout(function(){
+ son.style.opacity = 1;
+ }, 10);
+ }
}
}
-
- // Close the menu when clicking outside
- document.addEventListener('click', function(event) {
- const navbar = document.getElementById('my-navbar');
- const menuIcon = document.querySelector('.menu-icon');
- if (!navbar.contains(event.target) && !menuIcon.contains(event.target)) {
- navbar.classList.remove('active');
- }
- });
-
- // Handle window resize
- window.addEventListener('resize', function() {
- const navbar = document.getElementById('my-navbar');
- if (window.innerWidth > 768) {
- navbar.classList.remove('active');
- document.querySelectorAll('.son').forEach(function(submenu) {
- submenu.classList.remove('active');
- });
- }
- });
+ function leave(el){
+ el.children[0].classList.remove('active');
+ if (el.children.length > 1){
+ let son = el.children[1];
+ if (getComputedStyle(son,null)["display"]=="block"){
+ son.style.opacity = 0;
+ setTimeout(function(){
+ son.style.display = "none";
+ }, 300);
+ }
+ }
+ }
</script>
</body>
</html>
\ No newline at end of file
--
GitLab