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

Update menu.html

parent a89eece3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 154 additions and 106 deletions
wiki/menu.html
+ 154
− 106
View file @ d529df45
<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 */
}
.navbar-logo {
max-width: 150px;
border-radius:30px;
}
.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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Updated Navigation Bar with Static Background</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.my-nav {
background-color: #ffe4e1;
padding: 10px 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
height: 78px;
border-radius: 20px;
}
.logo-container {
position: absolute;
top: 10px;
left: 10px;
z-index: 1030;
}
.navbar-logo {
max-width: 150px;
border-radius: 30px;
}
.my-navbar {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
}
.my-navbar > li {
position: relative;
margin-right: 20px;
}
.my-navbar > li > a {
color: rgba(248,240,232,1);
text-decoration: none;
padding: 10px;
display: block;
}
.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%; /* Position the dropdown below the parent */
}
.son li a {
color: #2B5D6F;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.son li a:hover {
background-color: #f1f1f1;
}
</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 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='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>
</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') }}">Team Members</a></li>
<li><a href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
</ul>
</li>
<li onmouseover="over(this)" onmouseleave="leave(this)">
<a href="{{ url_for('pages', page='safety') }}">Safety</a>
</li>
<li onmouseover="over(this)" onmouseleave="leave(this)">
<a href="{{ url_for('pages', page='human-practices') }}">Human Practices</a>
</li>
<li onmouseover="over(this)" onmouseleave="leave(this)">
<a href="#" style="cursor:default;">Awards</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='hardware') }}">Hardware</a></li>
<li><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
<li><a href="{{ url_for('pages', page='measurement') }}">Measurement</a></li>
<li><a href="{{ url_for('pages', page='model') }}">Model</a></li>
<li><a href="{{ url_for('pages', page='plant') }}">Plant</a></li>
<li><a href="{{ url_for('pages', page='software') }}">Software</a></li>
<li><a href="{{ url_for('pages', page='sustainable') }}">Sustainable</a></li>
</ul>
</li>
</ul>
</nav>
<script>
var navbox = document.getElementById("navbox");
let navbar = document.getElementById("my-navbar");
let items = navbar.children;
function over(el){
for (i = 0; i < items.length; i++){
items[i].children[0].style.color = "#2B5D6F";
}
el.children[0].style.color = "rgba(248,240,232,1)";
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){
for (i = 0; i < items.length; i++){
items[i].children[0].style.color = "rgba(248,240,232,1)";
}
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