Skip to content
Snippets Groups Projects
Commit 29c5fe40 authored by mablin7's avatar mablin7
Browse files

fix navbar

parent b8ed2a7e
No related branches found
No related tags found
No related merge requests found
Pipeline #467343 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
static/navbar.css
+ 129
− 240
View file @ 29c5fe40
*{
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;
}
wiki/menu.html
+ 102
− 180
View file @ 29c5fe40
......@@ -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>
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