Jan Vuckovic (Talk | contribs) |
|||
(34 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{Groningen}} | {{Groningen}} | ||
<html lang="en"> | <html lang="en"> | ||
− | |||
− | |||
− | |||
− | |||
− | + | <head> | |
+ | <!-- Required meta tags --> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
− | + | <script src="https://2021.igem.org/Template:Groningen/FontAwesome?action=raw&ctype=text/javascript" | |
− | + | crossorigin="anonymous"></script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | <!---- Wiki Reset-(Adapted from Team-Wageningen 2019)----> |
− | / | + | <script> |
+ | !function () { | ||
+ | document.getElementById("HQ_page").removeAttribute("id"); | ||
+ | document.getElementById("globalWrapper").removeAttribute("id"); | ||
+ | document.getElementById("content").removeAttribute("id"); | ||
+ | document.getElementById("bodyContent").removeAttribute("id"); | ||
+ | document.getElementById("mw-content-text").removeAttribute("id"); | ||
+ | document.getElementsByClassName("mw-body")[0].removeAttribute("class"); | ||
+ | document.getElementsByClassName("mw-content-ltr")[0].className = "my-content"; | ||
+ | }() | ||
+ | </script> | ||
− | + | <style> | |
− | + | div.my-content>p:first-of-type { | |
− | + | display: none; | |
− | + | } | |
− | } | + | |
− | + | div.my-content header:nth-of-type(1) { | |
− | + | margin-top: 85px; | |
− | + | } | |
− | + | ||
− | + | ||
− | } | + | |
− | + | /*Nav bar styles*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | * { | |
− | + | box-sizing: border-box; | |
− | + | padding: 0; | |
− | + | margin: 0; | |
− | + | } | |
− | } | + | |
− | + | body { | |
− | + | background: #ffffff; | |
− | + | font-family: Montserrat; | |
− | } | + | margin: 0; |
+ | padding: 0; | ||
+ | } | ||
− | + | content { | |
− | + | width: 100%; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | . | + | .dropdwn { |
− | + | display: block; | |
− | + | width: 190px; | |
− | + | padding: 0 60px 0 60px; | |
− | + | color: #000000; | |
− | + | text-decoration: none; | |
− | + | line-height: 85px; | |
− | } | + | font-size: 18px; |
+ | } | ||
− | + | .dropdwnSub { | |
− | + | display: block; | |
− | + | padding: 12px 14px 12px 14px; | |
− | + | color: #000000; | |
− | } | + | text-decoration: none; |
+ | line-height: 30px; | ||
+ | font-size: 16px; | ||
+ | } | ||
− | nav { | + | nav { |
− | + | height: 85px; | |
− | + | background: #fdf8f0; | |
− | + | width: 100%; | |
− | + | font-family: 'Montserrat' !important; | |
− | + | text-decoration: none !important; | |
− | + | color: #000000 !important; | |
− | + | display: flex; | |
− | + | flex-wrap: wrap; | |
− | } | + | justify-content: space-between; |
+ | position: fixed; | ||
+ | top: 15px; | ||
+ | z-index: 100; | ||
+ | } | ||
− | nav .mainMenu { | + | nav ul.mainMenu { |
− | + | padding: 0; | |
− | + | margin: 0; | |
− | + | float: right; | |
− | + | list-style: none; | |
− | + | } | |
− | } | + | |
− | nav li a { | + | nav li a { |
− | + | display: inline-block; | |
− | + | text-decoration: none !important; | |
− | + | color: #000000 !important; | |
− | } | + | } |
− | nav .mainMenu li { | + | nav .mainMenu li { |
− | + | background: #fdf8f0; | |
− | + | position: relative; | |
− | + | list-style: none; | |
− | + | display: inline-block; | |
− | + | margin: 0 !important; | |
− | } | + | } |
− | nav .mainMenu li a:hover { | + | nav .mainMenu li a:hover { |
− | + | background: #f7eee2; | |
− | } | + | } |
− | nav ul ul { | + | nav ul ul { |
− | + | position: absolute; | |
− | + | top: 80px; | |
− | + | display: none; | |
− | + | width: 100%; | |
− | } | + | } |
− | nav ul li:hover>ul { | + | nav ul li:hover>ul { |
− | + | display: block; | |
− | + | visibility: visible; | |
− | + | opacity: 1; | |
− | + | transition: ease-in-out .35s; | |
− | + | pointer-events: all !important; | |
− | } | + | } |
− | nav ul ul li { | + | nav ul ul li { |
− | + | width: 100%; | |
− | + | float: right; | |
− | + | display: list-item; | |
− | + | position: relative; | |
− | + | right: 15px; | |
− | } | + | } |
− | nav ul li ul li { | + | nav ul li ul li { |
− | + | padding: 0 !important; | |
− | + | margin: 0 !important; | |
− | } | + | } |
+ | .titleNav, | ||
+ | .logoNav { | ||
+ | display: inline-block; | ||
+ | } | ||
− | + | #top_title { | |
+ | display: none; | ||
+ | } | ||
− | + | .columnNav { | |
− | + | display: flex; | |
− | + | width: fit-content; | |
− | + | float: left; | |
− | + | padding: 0; | |
− | } | + | } |
− | + | .logoNav { | |
− | + | margin: 5px 5px 5px 30px; | |
− | + | } | |
− | + | ||
− | } | + | |
− | + | .titleNav { | |
− | + | font-family: Montserrat !important; | |
− | + | font-size: 24px; | |
− | + | margin: auto 0 auto 0 !important; | |
− | + | padding-right: 30px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
+ | button.mainMenuMobile { | ||
+ | display: none; | ||
+ | margin: auto 50px auto 50px; | ||
+ | height: fit-content; | ||
+ | border: 0; | ||
+ | background: none; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | . | + | button.mainMenuMobile i { |
− | + | font-size: 24px; | |
− | + | } | |
− | } | + | |
− | + | /*The following code hides p.titleNav when the screen width is less than 1100px.*/ | |
− | + | ||
− | + | ||
− | . | + | @media(max-width: 1100px) { |
− | + | p.titleNav { | |
− | + | display: none; | |
− | + | } | |
− | + | } | |
− | } | + | |
− | . | + | /*The following code put a.dropdwn closer together when the screen is less than 880px*/ |
− | + | ||
− | + | ||
− | . | + | @media(max-width: 880px) { |
− | + | a.dropdwn { | |
− | + | width: 150px; | |
− | + | padding: 0 30px 0 30px; | |
− | + | } | |
− | } | + | } |
− | /* | + | /*The follwing code puts the navigation menu into a mobile version when the screen is less than 750px*/ |
− | @media(max-width: | + | @media(max-width: 750px) { |
− | + | button.mainMenuMobile { | |
− | + | display: block; | |
− | + | } | |
− | + | ||
+ | nav ul.mainMenu { | ||
+ | width: 100%; | ||
+ | display: none; | ||
+ | flex-wrap: wrap; | ||
+ | flex-direction: column; | ||
+ | } | ||
− | } | + | nav ul.mainMenu li { |
+ | width: 100%;; | ||
+ | text-align: center; | ||
+ | } | ||
+ | nav ul.mainMenu>li>a { | ||
+ | width: 100%; | ||
+ | padding:0; | ||
+ | } | ||
+ | nav ul ul { | ||
+ | position: static; | ||
+ | } | ||
− | </style> | + | |
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
Line 246: | Line 234: | ||
<nav> | <nav> | ||
<div class="columnNav"> | <div class="columnNav"> | ||
− | <a href="https://2021.igem.org/Team:Groningen"><img class="logoNav" src="https://static.igem.org/mediawiki/2021/1/17/T--Groningen--LogoByeMonia.png" alt="" width="76" height="auto"></a> | + | <a href="https://2021.igem.org/Team:Groningen"><img class="logoNav" |
− | <p class="titleNav">Groningen | + | src="https://static.igem.org/mediawiki/2021/1/17/T--Groningen--LogoByeMonia.png" alt="" width="76" |
+ | height="auto"></a> | ||
+ | <p class="titleNav">Groningen 2021</p> | ||
</div> | </div> | ||
− | < | + | <button class="mainMenuMobile" type="button"> |
+ | <i class="fas fa-bars"></i> | ||
+ | </button> | ||
<ul class="mainMenu" style="top: -100%"> | <ul class="mainMenu" style="top: -100%"> | ||
<li><a class="dropdwn" href="#">Project</a> | <li><a class="dropdwn" href="#">Project</a> | ||
<ul> | <ul> | ||
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Description">Description</a></li> | + | <li><a class="dropdwnSub" |
+ | href="https://2021.igem.org/Team:Groningen/Description">Description</a></li> | ||
<li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Model">Model</a></li> | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Model">Model</a></li> | ||
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</a></li> | + | <li><a class="dropdwnSub" |
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Implementation">Implementation</a></li> | + | href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</a></li> |
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Medals_and_Awards"> | + | <li><a class="dropdwnSub" |
+ | href="https://2021.igem.org/Team:Groningen/Implementation">Implementation</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Medals_and_Awards">Awards</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li><a class="dropdwn" href="#">Wet lab</a> | <li><a class="dropdwn" href="#">Wet lab</a> | ||
<ul> | <ul> | ||
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Engineering">Engineering</a></li> | + | <li><a class="dropdwnSub" |
+ | href="https://2021.igem.org/Team:Groningen/Engineering">Engineering</a></li> | ||
<li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Notebook">Notebook</a></li> | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Notebook">Notebook</a></li> | ||
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Experiments">Experiments</a></li> | + | <li><a class="dropdwnSub" |
+ | href="https://2021.igem.org/Team:Groningen/Experiments">Experiments</a></li> | ||
<li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Results">Results</a></li> | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Results">Results</a></li> | ||
<li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Parts">Parts</a></li> | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Parts">Parts</a></li> | ||
Line 273: | Line 271: | ||
<ul> | <ul> | ||
<li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Team">Team</a></li> | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Team">Team</a></li> | ||
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Attributions">Attributions</a></li> | + | <li><a class="dropdwnSub" |
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Collaborations">Collaborations</a></li> | + | href="https://2021.igem.org/Team:Groningen/Attributions">Attributions</a></li> |
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Partnership">Partnership</a></li> | + | <li><a class="dropdwnSub" |
+ | href="https://2021.igem.org/Team:Groningen/Collaborations">Collaborations</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Partnership">Partnership</a></li> | ||
<li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Sponsors">Sponsors</a></li> | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Sponsors">Sponsors</a></li> | ||
</ul> | </ul> | ||
Line 281: | Line 282: | ||
<li><a class="dropdwn" href="#">Outreach</a> | <li><a class="dropdwn" href="#">Outreach</a> | ||
<ul> | <ul> | ||
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Human_Practices">Human Practices</a></li> | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Human_Practices">Human |
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Gold_Human_Practices">Integrated Human Practices</a></li> | + | Practices</a></li> |
− | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li> | + | <li><a class="dropdwnSub" |
+ | href="https://2021.igem.org/Team:Groningen/Gold_Human_Practices">Integrated Human | ||
+ | Practices</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
Line 291: | Line 296: | ||
</div> | </div> | ||
</body> | </body> | ||
+ | <script> | ||
+ | var coll = document.getElementsByClassName("mainMenuMobile"); | ||
+ | var i; | ||
+ | |||
+ | for (i = 0; i < coll.length; i++) { | ||
+ | coll[i].addEventListener("click", function () { | ||
+ | this.classList.toggle("active"); | ||
+ | var umainMenu = this.nextElementSibling; | ||
+ | if (umainMenu.style.display === "block") { | ||
+ | umainMenu.style.display = "none"; | ||
+ | } else { | ||
+ | umainMenu.style.display = "block"; | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
</html> | </html> |
Latest revision as of 17:07, 14 December 2021