From 29c5fe40af2c8bde7d8e9e864fe4d971d1c8e0da Mon Sep 17 00:00:00 2001
From: mablin7 <magyarb0201@gmail.com>
Date: Sun, 29 Sep 2024 20:57:30 +0200
Subject: [PATCH] fix navbar
---
static/navbar.css | 369 ++++++++++++++++------------------------------
wiki/menu.html | 282 +++++++++++++----------------------
2 files changed, 231 insertions(+), 420 deletions(-)
diff --git a/static/navbar.css b/static/navbar.css
index 521cf34..52bdbc2 100644
--- a/static/navbar.css
+++ b/static/navbar.css
@@ -1,242 +1,131 @@
-*{
- padding: 0;
- margin: 0;
- box-sizing: border-box;
-}
-body, html {
- margin: 0;
- padding: 0;
- padding-top: 100px;
- background: #C6EBE8;
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+body,
+html {
+ margin: 0;
+ padding: 0;
+ padding-top: 100px;
+ background: #c6ebe8;
}
@font-face {
- font-family: AccidenzCommons;
- src: url(https://static.igem.wiki/teams/5054/ccaccidenzcommons-medium.otf);
-}
-body{
- background: #C6EBE8;
-}
-.my-nav{
- /* top: 0;
- width: 100%;
- height: 78px;
- background: #C6EBE8;
- backdrop-filter: blur(5px);
- display: flex;
- justify-content: space-between;
- position: fixed;
- z-index: 10;
- transition: all 0.2s linear; */
- height: 100px;
- display: flex;
- position: fixed; /* Keep the navbar fixed at the top of the viewport */
- top: 0; /* Align it to the very top of the page */
- width: 100%; /* Make sure it spans the full width of the page */
- z-index: 10; /* Ensure it stays above other content */
- backdrop-filter: blur(5px); /* Optional: Keep this for a blurred background */
- background: #C6EBE8; /* Background color */
- margin: 0; /* Remove any margin */
- padding: 0; /* Remove any padding */
- align-items: center; /* Ensure vertical alignment */
- padding-top: 10px;
-}
-.my-nav .icon{
- /* flex-basis: 200px;
- margin-top: 10px;
- margin-left: 5px;
- margin-bottom: 7px;
- background-image: url(https://static.igem.wiki/teams/5054/logo-kleur.svg);
- background-position-x: -30px;
- text-decoration: none;
- background-repeat: no-repeat; */
- flex-basis: 200px; /* Make sure this is large enough for the logo */
- height: 100%; /* Ensure the icon container height matches the nav */
- margin: 0 30px; /* Adjust margin to properly position the logo */
- background-image: url(https://static.igem.wiki/teams/5054/logo-kleur.svg);
- background-size: contain; /* Adjust to contain the entire logo */
- background-position: center; /* Center the logo */
- background-repeat: no-repeat;
- overflow: visible; /* Prevent cutting off the logo */
-}
-.my-navbar{
- height: 50px;
- margin-left: 5px;
- margin-right: 50px;
- /* margin-top: 24px; */
- /* margin-top: 0px; */
- list-style: none;
-}
-.my-navbar>li{
- float: left;
- width: 120px;
- height: 110%;
- margin-right: 25px;
- position: relative;
-}
-#human-practice{
- width: 250px;
- margin-right: 30px;
-}
-#edu{
- width: 110px; /* Increase the width for "Education" */
- margin-right: 30px; /* Ensure sufficient space between "Education" and "Safety" */
-
-}
-.my-navbar>li a{
- color: var(--text, var(--text, rgba(24, 90, 79, 1)));
- font-family: AccidenzCommons;
- font-size: 25px;
- font-style: normal;
- font-weight: 400;
- line-height: normal;
- text-decoration: none;
- transition: color 0.15s linear;
-}
-.son{
- /* margin-top: 30px;
- list-style: none;
- display: none;
- text-align: left;
- transition: all 0.3s ease-out;
- opacity: 0; */
- margin-top: 0; /* Remove any margin to avoid indentation */
- padding: 0; /* Remove padding if not needed */
- position: absolute; /* Position dropdown absolutely */
- top: 100%; /* Align the dropdown directly below the parent */
- left: 0; /* Align to the left edge of the parent */
- width: 100%; /* Make sure the dropdown is as wide as the parent */
- background-color: #C6EBE8; /* Match the background to the navbar */
- z-index: 1000; /* Ensure it appears above other elements */
- visibility: hidden; /* Initially hidden */
- opacity: 0; /* Start with invisible dropdown */
- transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* Smooth transition */
-}
-/* .my-navbar > li:hover .son,
-.my-navbar > li.active .son {
- visibility: visible;
- opacity: 1;
-} */
-
-/* Adjust for smaller screens */
-@media screen and (max-width:1130px) {
- .my-nav .icon {
- flex-basis: 100px; /* Reduce the width for smaller screens */
- margin: 0 10px; /* Adjust margins for smaller screens */
- background-size: contain;
- background-position: center;
- }
-}
-
-@media screen and (min-width:1800px){
- .my-navbar>li{
- width: 150px;
- }
- #human-practice{
- width: 280px;
- }
- #edu{
- width:130px;
- }
- .my-nav>ul>li a{
- font-size: 20px;
- }
- .my-navbar{
- margin-top: 25px;
- }
- .my-nav .icon{
- flex-basis: 240px;
- margin-left: 25px;
- margin-top: 15px;
- }
- .my-nav{
- height: 84px;
- }
-}
-@media screen and (max-width:1450px) and (min-width:1280px){
- .my-navbar>li{
- width: 100px;
- }
- #human-practice{
- width: 210px;
- }
- #edu {
- width: 100px; /* Increase width for "Education" in this range */
- }
- .my-nav>ul>li a {
- font-size: 14px;
- }
- .my-navbar{
- margin-top: 23px;
- }
- .my-nav .icon{
- flex-basis: 200px;
- margin-left: 18px;
- }
- .my-nav{
- height: 74px;
- }
-}
-@media screen and (max-width:1280px) and (min-width:1120px){
- .my-navbar>li{
- width: 88px;
- }
- #human-practice{
- width: 190px;
- }
- #edu{
- width:90px;
- }
- .my-nav>ul>li a{
- font-size: 20px;
- }
- .my-navbar{
- margin-top: 21px;
- }
- .my-nav .icon {
- background-size: contain; /* Ensure the logo fits within the container */
- background-position: center; /* Center the logo within the container */
- }
- .my-nav{
- height: 70px;
- }
-}
-@media screen and (max-width:1130px){
- .my-navbar {
- width: 830px;
- /* display: none; */
- }
- .my-navbar>li{
- width: 78px;
- }
- #human-practice{
- width: 160px;
- }
- #edu{
- width:80px;
- }
- .my-nav>ul>li a{
- font-size: 18px;
- }
- .my-navbar{
- margin-top: 15px;
- margin-left: 20px;
- margin-right: 0px;
- }
- .my-nav .icon{
- flex-basis: 50px;
- margin: 0 10 px;
- }
- .my-nav{
- height: 55px;
- justify-content: start;
- }
- .son{
- margin-top: 20px;
- }
-}
-/* hide the navigation */
-/* @media screen and (max-width:830px){
- .my-navbar{
- display: none;
- }
-} */
+ font-family: AccidenzCommons;
+ src: url(https://static.igem.wiki/teams/5054/ccaccidenzcommons-medium.otf);
+}
+body {
+ background: #c6ebe8;
+}
+
+/* Reset */
+.my-nav ul,
+.my-nav li {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.my-nav a {
+ text-decoration: none;
+ color: inherit;
+}
+
+/* Navbar */
+.my-nav {
+ /* Positioning */
+ position: fixed;
+ top: 0;
+ width: 100%;
+ height: 95px;
+ z-index: 1000;
+
+ /* Layout */
+ display: flex;
+ flex-direction: row;
+ padding: 10px 10px;
+
+ /* Styling */
+ background: #c6ebe8;
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
+ font-family: AccidenzCommons;
+ font-size: 1.3rem;
+ color: #185a4f;
+}
+
+/* Home icon */
+.my-nav .icon {
+ background: url(https://static.igem.wiki/teams/5054/logo-kleur.svg);
+ background-size: contain;
+ background-repeat: no-repeat;
+ width: 75px;
+ height: 75px;
+
+ margin-right: 30px;
+}
+
+/* Navbar items */
+.my-nav .my-navbar {
+ /* Layout */
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 20px;
+}
+
+/* Navbar root items */
+.my-nav .my-navbar > li {
+ position: relative;
+
+ padding: 4px;
+ border-radius: 5px;
+}
+
+/* Navbar sub-items */
+.my-nav .my-navbar > li > ul.son {
+ /* Positioning */
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: max-content;
+
+ /* Layout */
+ display: none;
+ flex-direction: column;
+ gap: 15px;
+ padding: 10px;
+ padding-top: 20px;
+
+ /* Styling */
+ background-color: #185a4f;
+ /* box-shadow: 0 2px 40px rgba(0, 0, 0, 0.6); */
+ border-radius: 5px;
+ border-top-left-radius: 0;
+}
+
+/* Navbar root item on hover */
+.my-nav .my-navbar > li:hover {
+ /* box-shadow: 0 2px 40px rgba(0, 0, 0, 0.6); */
+ background-color: #185a4f;
+ color: white;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ transition: all 0.1s;
+}
+.my-nav .my-navbar > li:hover ul.son {
+ display: flex;
+}
+
+/* Navbar sub-item on hover */
+.my-nav .my-navbar > li > ul.son > li:hover {
+ color: #62d881;
+ transition: color 0.1s;
+}
+
+/* Navbar sub-item active */
+.my-nav .my-navbar > li > ul.son > li.active {
+ color: #05be85;
+}
+
+.my-nav .my-navbar > li:has(ul.son > li.active) > a {
+ color: #05be85;
+}
diff --git a/wiki/menu.html b/wiki/menu.html
index 920c55e..7fc205f 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -2,23 +2,23 @@
<div class="container">
<!---- TEAM NAME ---->
- <!-- <a class="navbar-brand" href="#">TU-Delft</a> -->
+<!-- <a class="navbar-brand" href="#">TU-Delft</a> -->
- <!---- 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">
+<!---- 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">
+<!---- HOME ---->
+<!-- <li class="nav-item">
<a class="nav-link" href="{{ url_for('home') }}">Home</a>
</li> -->
- <!---- TEAM ---->
- <!-- <li class="nav-item dropdown">
+<!---- 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>
@@ -28,8 +28,8 @@
</ul>
</li> -->
- <!---- PROJECT ---->
- <!-- <li class="nav-item dropdown">
+<!---- 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>
@@ -43,18 +43,18 @@
</ul>
</li> -->
- <!---- SAFETY ---->
- <!-- <li class="nav-item">
+<!---- SAFETY ---->
+<!-- <li class="nav-item">
<a class="nav-link" href="{{ url_for('pages', page='safety') }}">Safety</a>
</li> -->
- <!---- HUMAN PRACTICES ---->
- <!-- <li class="nav-item">
+<!---- 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">
+<!---- 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>
@@ -76,176 +76,98 @@
</div>
</nav> -->
-
-
<nav class="my-nav" id="navbox">
<a href="{{ url_for('home') }}" class="icon"></a>
+
<ul class="my-navbar" id="my-navbar">
- <li id="project" 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='experiments') }}">Materials and Methods</a></li>
- <li><a href="{{ url_for('pages', page='results') }}">Results</a></li>
- <li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
- <li><a href="{{ url_for('pages', page='notebook') }}">Notebook</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 and Outreach</a></li>
- <li><a href="{{ url_for('pages', page='human-practices') }}">Human Practices</a></li>
- </ul>
- </li>
- <li onmouseover="over(this)" onmouseleave="leave(this)">
- <a href="#" style="cursor:default;">Special Prizes</a>
- <ul class="son">
- <li><a href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></li>
- <li><a href="{{ url_for('pages', page='human-practices') }}">Integrated Human Practices</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>
+ <li id="project">
+ <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='experiments') }}"
+ >Materials and Methods</a
+ >
+ </li>
+ <li><a href="{{ url_for('pages', page='results') }}">Results</a></li>
+ <li>
+ <a href="{{ url_for('pages', page='contribution') }}">Contribution</a>
+ </li>
+ <li><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" style="cursor: default">Human Practices</a>
+ <ul class="son">
+ <li>
+ <a href="{{ url_for('pages', page='education') }}"
+ >Education and Outreach</a
+ >
+ </li>
+ <li>
+ <a href="{{ url_for('pages', page='human-practices') }}"
+ >Human Practices</a
+ >
+ </li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" style="cursor: default">Special Prizes</a>
+ <ul class="son">
+ <li>
+ <a href="{{ url_for('pages', page='entrepreneurship') }}"
+ >Entrepreneurship</a
+ >
+ </li>
+ <li>
+ <a href="{{ url_for('pages', page='human-practices') }}"
+ >Integrated Human Practices</a
+ >
+ </li>
+ </ul>
+ </li>
+ <li>
+ <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>
+
<script>
-var navbox = document.getElementById("navbox");
-let navbar = document.getElementById("my-navbar");
-let items = navbar.children;
-
-// Add click event listener to each dropdown menu item
-for (let i = 0; i < items.length; i++) {
- let item = items[i];
-
- // Check if the item has a dropdown (sub-menu)
- if (item.children.length > 1) {
- // Click event to toggle the dropdown
- item.addEventListener('click', function (event) {
- toggleDropdown(item);
- event.stopPropagation(); // Prevent event bubbling
- });
-
- // Mouseleave event to close the dropdown
- let dropdownMenu = item.children[1];
- dropdownMenu.addEventListener('mouseleave', function () {
- closeDropdown(item);
- });
+ // Finds the current page and highlights the corresponding menu item by adding the 'active' class
+ function updateActivePage() {
+ var current = window.location.pathname;
+ var itemLinks = document.querySelectorAll(
+ ".my-nav .my-navbar > li > ul.son > li"
+ );
+ var activeItem = null;
+ itemLinks.forEach(function (item) {
+ var url = new URL(item.querySelector("a").href);
+ if (url.pathname === current) {
+ activeItem = item;
+ }
+ });
+
+ itemLinks.forEach(function (item) {
+ item.classList.remove("active");
+ });
+
+ if (activeItem) {
+ activeItem.classList.add("active");
}
-}
-
-function toggleDropdown(el) {
- // Toggle visibility of the dropdown
- let son = el.children[1];
- if (son) {
- if (son.style.visibility === "visible") {
- closeDropdown(el);
- } else {
- openDropdown(el);
- }
- }
-}
-
-function openDropdown(el) {
- // Open the dropdown
- let son = el.children[1];
- son.style.visibility = "visible";
- son.style.opacity = 1;
- el.classList.add('active');
- adjustNavHeight();
-}
-
-function closeDropdown(el) {
- // Close the dropdown
- let son = el.children[1];
- if (son) {
- son.style.opacity = 0;
- setTimeout(() => {
- son.style.visibility = "hidden";
- el.classList.remove('active');
- navbox.style.height = "78px"; // Reset the height
- }, 300); // Match this delay with the CSS transition time
- }
-}
-
-function adjustNavHeight() {
- if (document.documentElement.clientWidth > 1400) {
- navbox.style.height = "320px";
- } else if (document.documentElement.clientHeight < 1120) {
- navbox.style.height = "245px";
- } else {
- navbox.style.height = "280px";
- }
-}
-
-// Close dropdowns when clicking outside
-document.addEventListener('click', function () {
- for (let i = 0; i < items.length; i++) {
- if (items[i].classList.contains('active')) {
- closeDropdown(items[i]);
- }
- }
-});
-
-// Close dropdowns when clicking outside
-document.addEventListener('click', function () {
- for (let i = 0; i < items.length; i++) {
- if (items[i].classList.contains('active')) {
- closeDropdown(items[i]);
- }
- }
-});
-// var navbox = document.getElementById("navbox");
-// let navbar = document.getElementById("my-navbar");
-// let items = navbar.children;
-
-// function over(el) {
-// resetColors();
-// el.children[0].style.color = "#62D881";
-
-// // Show the current dropdown
-// let son = el.children[1];
-// if (son) {
-// son.style.visibility = "visible";
-// son.style.opacity = 1;
-// el.classList.add('active');
-// adjustNavHeight();
-// }
-// }
-
-// function leave(el) {
-// // Close the current dropdown
-// let son = el.children[1];
-// if (son) {
-// son.style.opacity = 0;
-// setTimeout(() => {
-// son.style.visibility = "hidden";
-// el.classList.remove('active');
-// navbox.style.height = "78px"; // Reset the height
-// }, 300); // Match this delay with the CSS transition time
-// }
-// }
-
-// function resetColors() {
-// for (let i = 0; i < items.length; i++) {
-// items[i].children[0].style.color = "#185A4F";
-// }
-// }
-
-// function adjustNavHeight() {
-// if (document.documentElement.clientWidth > 1400) {
-// navbox.style.height = "320px";
-// } else if (document.documentElement.clientHeight < 1120) {
-// navbox.style.height = "245px";
-// } else {
-// navbox.style.height = "280px";
-// }
-// }
-</script>
+ }
+ updateActivePage();
+ window.addEventListener("popstate", updateActivePage);
+ window.addEventListener("load", updateActivePage);
+</script>
--
GitLab