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

Update file menu.html

parent 928dad09
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 178 additions and 227 deletions
wiki/menu.html
+ 178
− 227
View file @ c0813e1c
......@@ -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
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