Skip to content
Snippets Groups Projects
Commit 7bc941bb authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update file menu.html

parent c0813e1c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 167 additions and 140 deletions
wiki/menu.html
+ 167
− 140
View file @ 7bc941bb
......@@ -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()">
&#9776; <!-- 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment