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

Update file menu.html

parent b812d96e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 163 additions and 102 deletions
wiki/menu.html
+ 163
− 102
View file @ 9ce46654
<style>
.navbar {
padding-bottom: 10px;
}
.logo-container {
position: absolute;
top: 10px; /* Adjust this value to position the logo correctly */
left: 10px; /* Align with the left edge of the container */
z-index: 1030; /* Ensure logo appears above navbar */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Updated Navigation Bar with Centered Items and New Links</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.my-nav {
background-color: #ffe4e1;
padding: 5px 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
height: 50px;
border-radius: 20px;
display: flex;
justify-content: center;
}
.logo-container {
position: absolute;
top: 10px;
left: 10px;
z-index: 1030;
}
.navbar-logo {
height: 180px;
border-radius: 30px;
}
.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 10px;
}
.my-navbar > li > a {
color: black;
text-decoration: none;
padding: 5px 10px;
display: block;
border-radius: 15px;
transition: background-color 0.3s, color 0.3s;
}
.my-navbar > li > a:hover,
.my-navbar > li > a.active {
background-color: #fa8072;
color: white;
}
.son {
display: none;
position: absolute;
background-color: #ffe4e1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
top: 100%;
border-radius: 20px;
}
.son li a {
color: #2B5D6F;
padding: 12px 16px;
text-decoration: none;
display: block;
border-radius: 20px;
}
.navbar-logo {
max-width: 150px;
border-radius: 30px;
}
.son li a:hover {
background-color: #f1f1f1;
border-radius: 20px;
}
</style>
</head>
<body>
<nav class="my-nav" id="navbox">
<div class="logo-container">
<img alt="Brand" class="navbar-logo" src="https://static.igem.wiki/teams/5187/art/logo.png">
</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='contribution') }}">Contribution</a></li>
<li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
<li><a href="{{ url_for('pages', page='safety') }}">Safety</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='experiments') }}">Experiments</a></li>
<li><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
<li><a href="{{ url_for('pages', page='results') }}">Results</a></li>
<li><a href="{{ url_for('pages', page='measurement') }}">Measurement</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>
<li><a href="{{ url_for('pages', page='software') }}">Software</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='education') }}">Education</a></li>
<li><a href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</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>
</ul>
</li>
</ul>
</nav>
.nav-link {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
</style>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #ffe4e1; border-radius: 20px;">
<div class="container">
<!---- LOGO ---->
<div class="logo-container">
<img alt="Brand" class="navbar-logo" src="https://static.igem.wiki/teams/5187/art/logo.png">
</div>
<!---- SMALL SCREEN MENU ICON ---->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto left-aligned">
<!---- HOME ---->
<li class="nav-item">
<a class="nav-link" href="{{ url_for('home') }}">Home</a>
</li>
<!---- TEAM ---->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{{ url_for('pages', page='team') }}" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Team
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{{ url_for('pages', page='team') }}">Team Members</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
</ul>
</li>
<!---- PROJECT ---->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Project
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='description') }}">Description</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='experiments') }}">Experiments</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='results') }}">Results</a></li>
</ul>
</li>
<!---- SAFETY ---->
<li class="nav-item">
<a class="nav-link" href="{{ url_for('pages', page='safety') }}">Safety</a>
</li>
<!---- HUMAN PRACTICES ---->
<li class="nav-item">
<a class="nav-link" href="{{ url_for('pages', page='human-practices') }}">Human Practices</a>
</li>
<!---- AWARDS ---->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Awards
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{{ url_for('pages', page='education') }}">Education</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='hardware') }}">Hardware</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='measurement') }}">Measurement</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='model') }}">Model</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='plant') }}">Plant</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='software') }}">Software</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='sustainable') }}">Sustainable</a></li>
</ul>
</li>
</ul>
</div>
</div>
</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"){
setTimeout(function(){
son.style.opacity = 1;
}, 1);
son.style.display = "block";
}
}
}
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";
}, 350);
}
}
}
</script>
</body>
</html>
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