Skip to content
Snippets Groups Projects
Commit 23d830c7 authored by Shraddha Raghuram's avatar Shraddha Raghuram
Browse files

change menu style

parent 6e001ac4
No related branches found
No related tags found
No related merge requests found
Pipeline #406073 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
wiki/footer.html
+ 2
− 2
View file @ 23d830c7
......@@ -43,6 +43,8 @@
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='human-practices') }}">Human Practices</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='entrepreneurship') }}">Entrepreneurship</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='plant') }}">Plant Synthetic Biology</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='sustainable') }}">Sustainability</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></div>
</div>
<div class="footer-navbars">
<div class="footer-navbar-title"><span>Wet lab</span></div>
......@@ -57,8 +59,6 @@
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='team') }}">Roster</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='attributions') }}">Attributions</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='sustainable') }}">Sustainability</a></div>
<div class="footer-navbar-contents"><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></div>
</div>
<div class="footer-navbars">
<div class="footer-navbar-title"><span>Dry Lab</span></div>
......
wiki/menu.html
+ 113
− 15
View file @ 23d830c7
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<!-- <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<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">
<!-- <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">
<ul class="navbar-nav ml-auto left-aligned"> -->
<!---- HOME ---->
<li class="nav-item">
<!-- <li class="nav-item">
<a class="nav-link" href="{{ url_for('home') }}">Home</a>
</li>
</li> -->
<!---- TEAM ---->
<li class="nav-item dropdown">
<!-- <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>
......@@ -26,10 +26,10 @@
<li><a class="dropdown-item" href="{{ url_for('pages', page='team') }}">Team</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='attributions') }}">Attributions</a></li>
</ul>
</li>
</li> -->
<!---- PROJECT ---->
<li class="nav-item dropdown">
<!-- <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>
......@@ -41,20 +41,20 @@
<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>
</li> -->
<!---- SAFETY ---->
<li class="nav-item">
<!-- <li class="nav-item">
<a class="nav-link" href="{{ url_for('pages', page='safety') }}">Safety</a>
</li>
</li> -->
<!---- HUMAN PRACTICES ---->
<li class="nav-item">
<!-- <li class="nav-item">
<a class="nav-link" href="{{ url_for('pages', page='human-practices') }}">Human Practices</a>
</li>
</li> -->
<!---- AWARDS ---->
<li class="nav-item dropdown">
<!-- <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>
......@@ -74,4 +74,102 @@
</ul>
</div>
</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='entrepreneurship') }}">Entrepreneurship</a></li>
<li><a href="{{ url_for('pages', page='plant') }}">Plant Synthetic Biology</a></li>
<li><a href="{{ url_for('pages', page='sustainability') }}">Sustainability</a></li>
<li><a href="{{ url_for('pages', page='contribution') }}">Contribution</a></li>
</ul>
</li>
<li onmouseover="over(this)" onmouseleave="leave(this)">
<a href="#" style="cursor:default;">Wet Lab</a>
<ul class="son">
<li><a href="{{ url_for('pages', page='engineering') }}">Engineering</a></li>
<li><a href="{{ url_for('pages', page='notebook') }}">Notebook</a></li>
<li><a href="{{ url_for('pages', page='experiments') }}">Experiments</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;">Dry Lab</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='measurement') }}">Measurement</a></li>
<li><a href="{{ url_for('pages', page='software') }}">Software</a></li>
</ul>
</li>
<li id="human-practice" onmouseover="over(this)" onmouseleave="leave(this)">
<a href="{{ url_for('pages', page='human-practices') }}">Human Practices</a>
</li>
<li id="edu" onmouseover="over(this)" onmouseleave="leave(this)">
<a href="{{ url_for('pages', page='education') }}">Education and Outreach</a>
</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="#" 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>
<li><a href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</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 < 7; 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";
}
if (document.documentElement.clientWidth > 1400){
navbox.style.height = "320px";
}
else if (document.documentElement.clientHeight < 1120){
navbox.style.height = "245px";
}
else{
navbox.style.height = "280px";
}
}
}
function leave(el){
for (i = 0; i < 7; 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);
}
navbox.style.height = "78px";
}
}
</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