From 9ce46654145d7d606de5dd457452859580e030cc Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Thu, 25 Jul 2024 07:50:23 +0000
Subject: [PATCH] Update file menu.html
---
wiki/menu.html | 265 ++++++++++++++++++++++++++++++-------------------
1 file changed, 163 insertions(+), 102 deletions(-)
diff --git a/wiki/menu.html b/wiki/menu.html
index d327b6fc..5458762e 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -1,104 +1,165 @@
-<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>
--
GitLab