(12 intermediate revisions by the same user not shown) | |||
Line 509: | Line 509: | ||
ul { | ul { | ||
list-style:none; | list-style:none; | ||
+ | } | ||
+ | #big{display: none;} | ||
+ | |||
+ | @media screen and (max-width: 1425px){ | ||
+ | #small{display: none;} | ||
+ | #big{display:contents;} | ||
+ | .testcenter{display: none;} | ||
+ | } | ||
+ | @media screen and (max-width: 800px){ | ||
+ | #small{display: none;} | ||
+ | #big{display:contents;} | ||
+ | .testcenter{display: none;} | ||
+ | #medium{display: none;} | ||
+ | } | ||
+ | |||
+ | .accordionnav:hover .accordionnavnav-item:hover .accordionnav-item-content, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content { | ||
+ | height: 5em; | ||
+ | } | ||
+ | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content1, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content1 { | ||
+ | height: 7.5em; | ||
+ | } | ||
+ | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content2, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content2 { | ||
+ | height: 15em; | ||
+ | } | ||
+ | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content3, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content3 { | ||
+ | height: 26.25em; | ||
+ | } | ||
+ | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content4, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content4 { | ||
+ | height: 30em; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .accordionnav-item-content, | ||
+ | .accordionnav:hover .accordionnav-item-content,.accordionnav-item-content1,.accordionnav-item-content2,.accordionnav-item-content3,.accordionnav-item-content4, | ||
+ | .accordionnav:hover .accordionnav-item-content1,.accordionnav-item-content2,.accordionnav-item-content3,.accordionnav-item-content4 { | ||
+ | height: 0; | ||
+ | overflow: hidden; | ||
+ | transition: height .25s; | ||
+ | } | ||
+ | |||
+ | |||
+ | .acordionnavnav { | ||
+ | padding: 0; | ||
+ | margin: 0 auto; | ||
+ | width: 100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | .accordionnav .accordionnav-item { | ||
+ | background-color: rgb(175, 184, 189); | ||
+ | border: 1px solid rgb(175, 184, 189); | ||
+ | border-right: 1px solid transparent; | ||
+ | padding: 0em; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .accordionnav h1 { | ||
+ | padding: 0.6em 1em 0.5em 1em ; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | .accordionnav .accordionnav-item { | ||
+ | background-color:rgb(175, 184, 189); | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .accordionnav-item:hover .accordionnav-item-content a,.accordionnav-item-content1 a,.accordionnav-item-content2 a,.accordionnav-item-content3 a,.accordionnav-item-content4 a | ||
+ | { | ||
+ | background-color:white; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .sidenav { | ||
+ | height: 100%; | ||
+ | width: 300px; | ||
+ | position: fixed; | ||
+ | z-index: 10000; | ||
+ | top: 10px; | ||
+ | left: 0; | ||
+ | background-color: rgb(175, 184, 189); | ||
+ | overflow-x: hidden; | ||
+ | transition: 0.5s; | ||
+ | padding-top: 60px; | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | |||
+ | .sidenav a { | ||
+ | padding: 8px 8px 8px 32px; | ||
+ | text-decoration: none; | ||
+ | font-size: 20px; | ||
+ | color: black; | ||
+ | display: block; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .sidenav a:hover { | ||
+ | background-color: #3d9288 ; | ||
+ | color:whitesmoke; | ||
+ | |||
+ | } | ||
+ | |||
+ | .sidenav .closebtn { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 25px; | ||
+ | font-size: 36px; | ||
+ | margin-left: 50px; | ||
+ | } | ||
+ | .sidenav .lastElement{ | ||
+ | padding-bottom: 50px; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-height: 450px) { | ||
+ | .sidenav {padding-top: 15px;} | ||
+ | .sidenav a {font-size: 18px;} | ||
+ | } | ||
+ | @media screen and (min-width: 1425px) { | ||
+ | .sidenav{display: none;} | ||
+ | } | ||
+ | @media screen and (max-width: 1425px) { | ||
+ | .sidenav{width:0px;} | ||
} | } | ||
</style> | </style> | ||
Line 533: | Line 662: | ||
} | } | ||
</script> | </script> | ||
− | + | <script> | |
+ | function openNav() { | ||
+ | document.getElementById("mySidenav").style.width = "250px"; | ||
+ | } | ||
+ | |||
+ | function closeNav() { | ||
+ | document.getElementById("mySidenav").style.width = "0"; | ||
+ | } | ||
+ | </script> | ||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
<!--- THIS IS WHERE THE HTML BEGINS ---> | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
Line 554: | Line 691: | ||
<body> | <body> | ||
+ | |||
+ | <div id="mySidenav" class="sidenav"> | ||
+ | <a style="padding:15px;margin-top:15px;font-size:25px;"href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> | ||
+ | <div class="accordionnav"> | ||
+ | <section class="accordionnav-item "> | ||
+ | <h1>Notebook</h1> | ||
+ | <div class="accordionnav-item-content1"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Notebook"><span class="textMargin"id="#h6">Lab Journal</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Experiments"><span class="textMargin"id="#h6">Experiments</span></a> | ||
+ | </div> | ||
+ | </section> | ||
+ | <section class="accordionnav-item"> | ||
+ | <h1>Parts</h1> | ||
+ | <div class="accordionnav-item-content1"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Parts"><span class="textMargin"id="#h6">Overview</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Basic_Part"><span class="textMargin"id="#h6">Basic Parts</span></a> | ||
+ | </div> | ||
+ | </section> | ||
+ | <section class="accordionnav-item"> | ||
+ | <h1>Team</h1> | ||
+ | <div class="accordionnav-item-content2"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Team"><span class="textMargin"id="#h6">Team members</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Attributions"><span class="textMargin"id="#h6">Attributions</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Achievements.html"><span class="textMarginid"id=#h6> Achievements</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Collaborations"><span class="textMargin"id="#h6">Collaborations</span></a> | ||
+ | </div> | ||
+ | </section> | ||
+ | <section class="accordionnav-item"> | ||
+ | <h1>Human Practices</h1> | ||
+ | <div class="accordionnav-item-content3"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices"><span class="textMargin"id="#h6">Human Practices</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Pathogens_Detections"><span class="textMargin"id="#h6">Pathogens Detections</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Our_Approach"><span class="textMargin"id="#h6">Our Approach</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Public_Engagement"><span class="textMargin"id="#h6">Public Engagement</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/ExpertInsight"><span class="textMargin"id="#h6">Expert Insight</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Market_Consultation"><span class="textMargin"id="#h6">Market Consultation</span></a> | ||
+ | |||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Safety"><span class="textMargin"id="#h6">Safety</span></a> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <section class="accordionnav-item" style="padding-bottom: 100px;"> | ||
+ | <h1>Project</h1> | ||
+ | <div class="accordionnav-item-content4"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Description"><span class="textMargin">Description</span></a> | ||
+ | |||
+ | <a href="https://2019.igem.org/Team:ULaval/Design"><span class="textMargin"id="#h6">Design</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Contribution"><span class="textMargin"id="#h6">Characterization</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Results"><span class="textMargin"id="#h6">Results</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Model"><span class="textMargin"id="#h6">Model</span></a> | ||
+ | |||
+ | <a href="https://2019.igem.org/Team:ULaval/Software"><span class="textMargin"id="#h6">Software</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Hardware"><span class="textMargin"id="#h6">Hardware</span></a> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
<div class="NavigationBar"> | <div class="NavigationBar"> | ||
− | <a href="https://2019.igem.org/Team:ULaval"><img class = teamlogo src = "https://static.igem.org/mediawiki/2019/e/e6/T--Ulaval--TeamLogo.png" ></a> | + | <a id=medium href="https://2019.igem.org/Team:ULaval"><img class = teamlogo src = "https://static.igem.org/mediawiki/2019/e/e6/T--Ulaval--TeamLogo.png" ></a> |
<div class="video-container"> | <div class="video-container"> | ||
Line 563: | Line 763: | ||
</div> | </div> | ||
<div class="navbar"> | <div class="navbar"> | ||
− | <a href="https://2019.igem.org/Team:ULaval"id="h5">Home</a> | + | <a href="https://2019.igem.org/Team:ULaval"id="h5" style="font-size:25px;">Home</a> |
− | <div class="dropdown"> | + | <div class="dropdown" id=small> |
<button class="dropbtn"id="h5">Project | <button class="dropbtn"id="h5">Project | ||
<i class="fa fa-caret-down"></i> | <i class="fa fa-caret-down"></i> | ||
Line 579: | Line 779: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="dropdown"> | + | <div class="dropdown" id=small> |
<button class="dropbtn"id="h5">Parts | <button class="dropbtn"id="h5">Parts | ||
<i class="fa fa-caret-down"></i> | <i class="fa fa-caret-down"></i> | ||
Line 589: | Line 789: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <a id="home" href="https://2019.igem.org/Team:ULaval"id= | + | <a class="testcenter" id="home" href="https://2019.igem.org/Team:ULaval" id=small >_ _</a> |
− | <div class="dropdown"> | + | <div class="dropdown" id=small> |
<button class="dropbtn"id="h5">Notebook | <button class="dropbtn"id="h5">Notebook | ||
<i class="fa fa-caret-down"></i> | <i class="fa fa-caret-down"></i> | ||
Line 599: | Line 799: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="dropdown"> | + | <div class="dropdown" id=small> |
<button class="dropbtn"id="h5">Human Practices | <button class="dropbtn"id="h5">Human Practices | ||
<i class="fa fa-caret-down"></i> | <i class="fa fa-caret-down"></i> | ||
Line 614: | Line 814: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="dropdown"> | + | <div class="dropdown" id=small> |
<button class="dropbtn"id="h5">Team | <button class="dropbtn"id="h5">Team | ||
<i class="fa fa-caret-down"></i> | <i class="fa fa-caret-down"></i> | ||
Line 621: | Line 821: | ||
<a href="https://2019.igem.org/Team:ULaval/Team"><span class="textMargin"id="#h6">Team members</span></a> | <a href="https://2019.igem.org/Team:ULaval/Team"><span class="textMargin"id="#h6">Team members</span></a> | ||
<a href="https://2019.igem.org/Team:ULaval/Attributions"><span class="textMargin"id="#h6">Attributions</span></a> | <a href="https://2019.igem.org/Team:ULaval/Attributions"><span class="textMargin"id="#h6">Attributions</span></a> | ||
− | <a href="https://2019.igem.org/Team:ULaval/Achievements.html"><span class="textMarginid= | + | <a href="https://2019.igem.org/Team:ULaval/Achievements.html"><span class="textMarginid"id=#h6>Achievements</span></a> |
<a class="lastElement" href="https://2019.igem.org/Team:ULaval/Collaborations"><span class="textMargin"id="#h6">Collaborations</span></a> | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Collaborations"><span class="textMargin"id="#h6">Collaborations</span></a> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <a id=big ><span style="font-size:25px;cursor:pointer;float:right;margin-right: 50px;" onclick="openNav()">☰ open</span></a> | ||
</div> | </div> | ||
</div> | </div> |
Latest revision as of 01:44, 15 December 2019