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

Update file menu.html

parent 33a855e0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 179 additions and 144 deletions
wiki/menu.html
+ 179
− 144
View file @ 60678535
......@@ -3,127 +3,154 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<title>Responsive 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-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;
}
}
body {
margin: 0;
font-family: Calibri, 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: space-between;
align-items: center;
box-sizing: border-box;
}
.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;
}
.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;
right: -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 {
right: 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;
}
}
</style>
</head>
<body>
<nav class="my-nav" id="navbox">
<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 onmouseover="over(this)" onmouseleave="leave(this)">
<a href="#" style="cursor:default;">Project</a>
<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>
......@@ -132,31 +159,31 @@
<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>
<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 onmouseover="over(this)" onmouseleave="leave(this)">
<a href="#" style="cursor:default;">Drylab</a>
<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 onmouseover="over(this)" onmouseleave="leave(this)">
<a href="#" style="cursor:default;">Human Practices</a>
<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 onmouseover="over(this)" onmouseleave="leave(this)">
<a href="#" style="cursor:default;">Team</a>
<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>
......@@ -167,30 +194,38 @@
</nav>
<script>
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);
}
}
function toggleMenu() {
const navbar = document.getElementById('my-navbar');
navbar.classList.toggle('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);
}
}
function toggleSubmenu(el) {
if (window.innerWidth <= 768) {
event.preventDefault();
const submenu = el.nextElementSibling;
submenu.classList.toggle('active');
}
}
// 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');
});
}
});
</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