Difference between revisions of "Template:UNSW Australia/Navbar"

m
 
(112 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<div id="navbar">
 
<div id="navbar">
−
<a href="https://2018.igem.org/Team:UNSW_Australia"><img height="55px" width="55px" src="https://static.igem.org/mediawiki/2018/b/b6/T--UNSW_Australia--Logo.png">
+
<div id="logo-navbar">
−
<div id="menu"></a>
+
<a href="https://2018.igem.org/Team:UNSW_Australia"><img height="55px" width="55px" src="https://static.igem.org/mediawiki/2018/b/b6/T--UNSW_Australia--Logo.png"></a>
−
<input type="checkbox" class="navToggle" id="navToggle">
+
</div>
 +
<div id="menu">
 +
                <input type="checkbox" class="navToggle" id="navToggle">
 +
                <div class="main-menu">
 +
<label for="navToggle" id="navigation">Navigation</label>
 +
</div>
 
<div class="main-menu first-menu">
 
<div class="main-menu first-menu">
 +
<a href="https://2018.igem.org/Team:UNSW_Australia"><button id="home" class="dropbutton">Home</button></a>
 +
</div>
 +
<div class="main-menu">
 
<button id="project" class="dropbutton">Project</button>
 
<button id="project" class="dropbutton">Project</button>
 
<div id="project-sub" class="sub-menu">
 
<div id="project-sub" class="sub-menu">
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Description">Description</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Description">Description</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Design">Design</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Design">Design</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Experiments">Protocols</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Experiments">Experimental Protocols</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Lab" class="submenu-header">Lab Work</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Lab" class="submenu-header">Lab Overview</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Cloning" class="submenu-sub submenu-sub-first">Cloning</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Cloning" class="submenu-sub submenu-sub-first">Cloning</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/ProteinExpression" class="submenu-sub">Protein Expression and Purification</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Protein" class="submenu-sub">Protein Production</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/ProteinConjugation" class="submenu-sub">Protein Conjugation</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Assembly" class="submenu-sub">Assembly</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/FRET" class="submenu-sub">FRET</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/FRET" class="submenu-sub">FRET</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Assays" class="submenu-sub">Assays</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Assays" class="submenu-sub">Enzyme Assays</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Plants" class="submenu-sub submenu-sub-last">Plants</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/Lab/Plants" class="submenu-sub submenu-sub-last">Plants</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Results">Results</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Results">Results</a>
−
                              <a href="https://2018.igem.org/Team:UNSW_Australia/Interlab">Interlab</a>
+
                <a href="https://2018.igem.org/Team:UNSW_Australia/InterLab">Interlab</a>
 
</div>
 
</div>
 
</div>
 
</div>
Line 25: Line 33:
 
<div id="modelling-sub" class="sub-menu">
 
<div id="modelling-sub" class="sub-menu">
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Model">Overview</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Model">Overview</a>
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Model/EKD">Enzyme Kinetics and Diffusion</a>
+
<a href="https://2018.igem.org/Team:UNSW_Australia/Model/EKD">Enzyme Kinetics & Diffusion</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Model/MD">Molecular Dynamics</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Model/MD">Molecular Dynamics</a>
 
</div>
 
</div>
Line 42: Line 50:
 
<div id="hp-sub" class="sub-menu">
 
<div id="hp-sub" class="sub-menu">
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices">Overview</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices">Overview</a>
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Outreach">Outreach</a>
+
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Commercialisation">Commercialisation</a>
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Education">Education</a>
+
                                      <a href="https://2018.igem.org/Team:UNSW_Australia/Public_Engagement">Education & Engagement</a>
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Legal">Legal</a>
+
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Law">Law & Regulation</a>
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Industry">Commercialisation</a>
+
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Ethics">Ethics and Diversity</a>
+
 
                                       <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Integrate">Integration</a>
 
                                       <a href="https://2018.igem.org/Team:UNSW_Australia/Human_Practices/Integrate">Integration</a>
 
</div>
 
</div>
Line 56: Line 62:
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Collaborations">Collaborations</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Collaborations">Collaborations</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Attributions">Attributions</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Attributions">Attributions</a>
 +
<a href="https://2018.igem.org/Team:UNSW_Australia/Journal">Experts</a>
 
</div>
 
</div>
 
</div>
 
</div>
Line 63: Line 70:
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Notebook">Notebook</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Notebook">Notebook</a>
 
                                       <a href="https://2018.igem.org/Team:UNSW_Australia/Safety">Safety</a>
 
                                       <a href="https://2018.igem.org/Team:UNSW_Australia/Safety">Safety</a>
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Journal">Journal</a>
 
 
</div>
 
</div>
 
</div>
 
</div>
Line 70: Line 76:
 
<div id="judging-sub" class="sub-menu">
 
<div id="judging-sub" class="sub-menu">
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Medals">Medals</a>
 
<a href="https://2018.igem.org/Team:UNSW_Australia/Medals">Medals</a>
−
<a href="https://2018.igem.org/Team:UNSW_Australia/Judging_Form">Judging Form</a>
+
<a target="_blank" href="https://igem.org/2018_Judging_Form?id=2710">Judging Form</a>
 
</div>
 
</div>
 +
                </div>
 +
<label for="navToggle" class="navToggleLabel">
 +
<span></span>
 +
</label>
 +
<div id="mobile-background"></div>
 
</div>
 
</div>
−
</div>
 
 
</div>
 
</div>
  
 +
<div id="footer">
 +
  <p>&copy; 2018 UNSW Australia iGEM</p>
 +
</div>
  
 
<style>
 
<style>
−
@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif");
+
@import url('https://fonts.googleapis.com/css?family=Lato');
 
/* iGEM format */
 
/* iGEM format */
 
#content {
 
#content {
 
         width: 100%;
 
         width: 100%;
 +
        min-height: 80vh;
 
         margin: 0;
 
         margin: 0;
 
         padding: 0;
 
         padding: 0;
 
         background-color: white;
 
         background-color: white;
−
        min-height: 100vh;
 
 
         padding-top: 60px;
 
         padding-top: 60px;
−
         font-family: 'Lato';
+
         font-family: "Lato";
 +
        padding-bottom: 30px;
 
}
 
}
  
 
#globalWrapper {
 
#globalWrapper {
 
         padding: 0;
 
         padding: 0;
 +
        height: 100vh;
 
}
 
}
  
 
#mw-content-text {
 
#mw-content-text {
−
        height: 100%;
 
 
}
 
}
  
Line 104: Line 118:
 
#bodyContent h1, #bodyContent h2 {
 
#bodyContent h1, #bodyContent h2 {
 
         margin-bottom: 0;
 
         margin-bottom: 0;
−
         font-family: 'Lato';
+
         font-family: "Lato";
 
}
 
}
  
 
#contentContainer h1, h2, h3, h4, h5, h6, p {
 
#contentContainer h1, h2, h3, h4, h5, h6, p {
−
         font-family: 'Lato';
+
         font-family: "Lato";
 
}
 
}
  
 
#HQ_page p {
 
#HQ_page p {
−
         font-family: 'Lato';
+
         font-family: "Lato";
 
         font-size: 1rem;
 
         font-size: 1rem;
 
}
 
}
Line 121: Line 135:
  
 
/* NAVBAR */
 
/* NAVBAR */
 +
 +
html, body {
 +
    max-width: 100%;
 +
    overflow-x: hidden;
 +
}
  
 
body {
 
body {
 
margin: 0;
 
margin: 0;
 +
}
 +
 +
button:hover {
 +
color: #9C3132;
 +
}
 +
 +
.sub-menu {
 +
display: none;
 
}
 
}
  
Line 138: Line 165:
 
display: flex;
 
display: flex;
 
align-items: center;
 
align-items: center;
 +
z-index: 11;
 
}
 
}
  
Line 144: Line 172:
 
.navToggleLabel span:after {
 
.navToggleLabel span:after {
 
display: block;
 
display: block;
−
background: black;
+
background: white;
 
height: 2px;
 
height: 2px;
 
width: 2em;
 
width: 2em;
Line 153: Line 181:
 
.navToggleLabel span:before,
 
.navToggleLabel span:before,
 
.navToggleLabel span:after {
 
.navToggleLabel span:after {
−
content: '';
+
content: ' ';
 
position: absolute;
 
position: absolute;
 
}
 
}
Line 165: Line 193:
 
}
 
}
  
−
.navToggle:checked ~ #menu {
+
.navToggle:checked ~ .main-menu button {
−
transform: scale(1, 1);
+
        transform: scale(1, 1);
 +
display: inline-block;
 
}
 
}
  
−
.navToggle:checked ~ #menu {
+
.main-menu button {
−
opacity: 1;
+
color: white;
−
transition: opacity 250ms ease-in-out 250ms;
+
text-align: left;
 +
background: #1E1E1E;
 +
text-decoration: none;
 +
width: 230px;
 +
font-size: 1.2rem;
 +
text-transform: uppercase;
 +
border: none;
 +
padding: 5px 10px;
 +
z-index: 3;
 +
margin: 0;
 +
}
 +
 
 +
#mobile-background {
 +
width: 230px;
 +
height: 90vh;
 +
background-color: #1E1E1E;
 +
z-index: 2;
 +
        position: absolute;
 +
        left: 0;
 +
        transform: scale(0,0);
 
}
 
}
  
 +
a {
 +
padding-right: 0px !important;
 +
}
 
#navbar {
 
#navbar {
 
top: 18px;
 
top: 18px;
−
        background-color: #1E1E1E;
+
background-color: #1E1E1E;
 
height: 60px;
 
height: 60px;
 
color: white;
 
color: white;
 
position: fixed;
 
position: fixed;
 
width: 100%;
 
width: 100%;
 +
    z-index: 10;
 
}
 
}
  
−
.sub-menu {
+
#logo-navbar {
−
    position: absolute;
+
display: flex;
−
    background-color: #f9f9f9;
+
justify-content: center;
−
    min-width: 160px;
+
padding-top: 2px;
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
margin-bottom: 0;
−
    z-index: 1;
+
−
    font-size: 0.9rem;
+
 
}
 
}
  
−
.sub-menu a {
+
.main-menu button {
−
    float: none;
+
display: none;
−
    color: black;
+
−
    padding: 8px 10px;
+
−
    text-decoration: none;
+
−
    display: block;
+
−
    text-align: left;
+
 
}
 
}
  
−
.sub-menu a:hover {
+
.main-menu button:hover {
−
background-color: #DBDBDB;
+
color: #d12e38;
 
}
 
}
  
−
.submenu-sub {
+
#project-sub a:hover ~ #project {
−
        font-size: 0.8rem;
+
color: #d12e38;
−
        padding: 4px 10px 2px 20px !important;
+
−
        text-transform: none;
+
 
}
 
}
  
−
.submenu-header {
+
#navigation {
−
        border-top: 1px solid grey;
+
display: none;
−
        text-decoration: underline;
+
−
        padding: 8px 10px 4px 10px !important;
+
 
}
 
}
  
−
.submenu-sub-last {
+
.sub-menu {
−
        border-bottom: 1px solid grey;
+
float: none;
 +
    color: black;
 +
text-decoration: none;
 +
text-align: left;
 
}
 
}
  
−
@media screen and (min-width: 1020px) {
+
.sub-menu a {
−
.navToggleLabel {
+
padding: 5px 10px;
−
display: hide;
+
clear: both;
−
}
+
display: block;
 +
background-color: #f0f0f0;
 +
width: 210px;
 +
margin: 0px;
 +
text-decoration: none;
 +
}
  
−
#navbar {
+
@media screen and (min-width: 500px) {
−
height: 43px;
+
.navToggleLabel span {
−
}
+
−
 
+
−
.sub-menu {
+
−
top: 43px;
+
 
display: none;
 
display: none;
 
}
 
}
  
−
.sub-menu:hover {
+
#navigation {
 
display: block;
 
display: block;
 +
font-size: 1.35rem;
 +
padding-top: 7px;
 +
border: none;
 +
                width: 150px;
 
}
 
}
  
−
.main-menu:hover {
+
#logo-navbar {
−
color: #9C3132;
+
display: inline-block;
−
}
+
−
 
+
−
#people:hover ~ #people-sub,
+
−
#project:hover ~ #project-sub,
+
−
#parts:hover ~ #parts-sub,
+
−
#modelling:hover ~ #modelling-sub,
+
−
#hp:hover ~ #hp-sub,
+
−
#doc:hover ~ #doc-sub,
+
−
#judging:hover ~ #judging-sub {
+
−
display: block;
+
−
}
+
−
 
+
−
#navbar img {
+
−
padding: 10px 10px 10px 10px;
+
−
margin-left: 70px;
+
−
top: -5px;
+
−
border-radius: 100px;
+
−
position: absolute;
+
−
background-color: #1E1E1E;
+
 
}
 
}
  
Line 266: Line 296:
 
overflow: hidden;
 
overflow: hidden;
 
font-family: 'Lato';
 
font-family: 'Lato';
−
        margin-right: 50px;
 
 
}
 
}
  
 
.main-menu {
 
.main-menu {
 +
    display: inline-block;
 
float: left;
 
float: left;
 
    overflow: hidden;
 
    overflow: hidden;
Line 276: Line 306:
 
    border: none;
 
    border: none;
 
    outline: none;
 
    outline: none;
−
    color: white;
+
color: white;
 
    padding: 2px 5px 12px 0px;
 
    padding: 2px 5px 12px 0px;
 
    background-color: inherit;
 
    background-color: inherit;
Line 286: Line 316:
 
background: none;
 
background: none;
 
border: none;
 
border: none;
−
color: inherit;
+
color: white;
 
font: inherit;
 
font: inherit;
 
font-size: inherit;
 
font-size: inherit;
 
text-transform: uppercase;
 
text-transform: uppercase;
 
padding: 11px 5px;
 
padding: 11px 5px;
 +
outline: none;
 +
}
 +
 +
#navbar {
 +
height: 43px;
 +
}
 +
 +
#navbar img {
 +
padding: 7px;
 +
margin-left: 70px;
 +
top: -3px;
 +
border-radius: 100px;
 +
position: absolute;
 +
background-color: #1E1E1E;
 +
}
 +
 +
.main-menu:hover {
 +
color: #9C3132;
 
}
 
}
 
}
 
}
  
 +
@media screen and (min-width: 1020px) {
 +
        #people:hover ~ #people-sub,
 +
#project:hover ~ #project-sub,
 +
#parts:hover ~ #parts-sub,
 +
#modelling:hover ~ #modelling-sub,
 +
#doc:hover ~ #doc-sub,
 +
#hp:hover ~ #hp-sub,
 +
        #judging:hover ~ #judging-sub {
 +
display: block;
 +
}
 +
 +
        #menu {
 +
margin-right: 50px;
 +
}
 +
 +
.navToggleLabel {
 +
display: hide;
 +
}
 +
 +
.sub-menu {
 +
top: 43px;
 +
display: none;
 +
}
 +
 +
.sub-menu:hover {
 +
display: block;
 +
}
 +
 +
#navigation {
 +
display: none;
 +
}
 +
 +
.main-menu button {
 +
display: inline-block;
 +
width: auto;
 +
font-size: 1rem;
 +
                padding: 11px 5px;
 +
}
 +
 +
.sub-menu {
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 8;
 +
    font-size: 0.9rem;
 +
  }
 +
 +
.sub-menu a {
 +
    float: none;
 +
    color: black;
 +
    padding: 8px 10px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
 +
 +
.sub-menu a:hover {
 +
background-color: #DBDBDB;
 +
}
 +
 +
.submenu-sub {
 +
        font-size: 0.8rem;
 +
        padding: 4px 0px 2px 20px !important;
 +
        text-transform: none;
 +
                width: 200px !important;
 +
}
 +
 +
.submenu-header {
 +
        border-top: 1px solid grey;
 +
        text-decoration: underline;
 +
}
 +
 +
.submenu-sub-last {
 +
        border-bottom: 1px solid grey;
 +
}
 +
}
  
 
/* END NAVBAR */
 
/* END NAVBAR */
 +
 +
 +
#footer {
 +
  position: absolute;
 +
  bottom: 0px;
 +
  width: 100%;
 +
  height: 20px;
 +
  background-color: #333;
 +
  margin-top: 50px;
 +
}
 +
 +
#footer p {
 +
  color: #dbdbdb;
 +
  text-align: right !important;
 +
  font-size: 10px;
 +
  margin-right: 10%;
 +
}
 +
 
</style>
 
</style>
 +
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 +
<script>
 +
var isEven = function(number) {
 +
return (number % 2 === 0) ? true : false;
 +
};
 +
 +
var clickProject=0;
 +
var clickModelling=0;
 +
var clickParts=0;
 +
var clickHP=0;
 +
var clickPeople=0;
 +
var clickDoc=0;
 +
var clickJudging=0;
 +
 +
function setZero() {
 +
    clickProject=0;
 +
    clickModelling=0;
 +
    clickParts=0;
 +
    clickHP=0;
 +
    clickPeople=0;
 +
    clickDoc=0;
 +
    clickJudging=0;
 +
}
 +
 +
$('#project').click(function() {
 +
clickProject++;
 +
if (isEven(clickProject) === true) {
 +
$('#project-sub').css({"display": "none"});
 +
} else {
 +
$('.sub-menu').css({"display": "none"});
 +
                setZero();
 +
                clickProject++;
 +
$('#project-sub').css({"display": "block"});
 +
}});
 +
 +
$('#modelling').click(function() {
 +
clickModelling++;
 +
if (isEven(clickModelling) === true) {
 +
$('#modelling-sub').css({"display": "none"});
 +
} else {
 +
$('.sub-menu').css({"display": "none"});
 +
                setZero();
 +
                clickModelling++;
 +
$('#modelling-sub').css({"display": "block"});
 +
}});
 +
 +
$('#parts').click(function() {
 +
clickParts++;
 +
if (isEven(clickParts) === true) {
 +
$('#parts-sub').css({"display": "none"});
 +
} else {
 +
$('.sub-menu').css({"display": "none"});
 +
                setZero();
 +
                clickParts++;
 +
$('#parts-sub').css({"display": "block"});
 +
}});
 +
 +
$('#hp').click(function() {
 +
clickHP++;
 +
if (isEven(clickHP) === true) {
 +
$('#hp-sub').css({"display": "none"});
 +
} else {
 +
$('.sub-menu').css({"display": "none"});
 +
                setZero();
 +
                clickHP++;
 +
$('#hp-sub').css({"display": "block"});
 +
}});
 +
 +
$('#people').click(function() {
 +
clickPeople++;
 +
if (isEven(clickPeople) === true) {
 +
$('#people-sub').css({"display": "none"});
 +
} else {
 +
$('.sub-menu').css({"display": "none"});
 +
                setZero();
 +
                clickPeople++;
 +
$('#people-sub').css({"display": "block"});
 +
}});
 +
 +
$('#doc').click(function() {
 +
clickDoc++;
 +
if (isEven(clickDoc) === true) {
 +
$('#doc-sub').css({"display": "none"});
 +
} else {
 +
$('.sub-menu').css({"display": "none"});
 +
                setZero();
 +
                clickDoc++;
 +
$('#doc-sub').css({"display": "block"});
 +
}});
 +
 +
$('#judging').click(function() {
 +
clickJudging++;
 +
if (isEven(clickJudging) === true) {
 +
$('#judging-sub').css({"display": "none"});
 +
} else {
 +
$('.sub-menu').css({"display": "none"});
 +
                setZero();
 +
                clickJudging++;
 +
                $('#judging-sub').css({"display": "block"});
 +
}});
 +
</script>
 
</html>
 
</html>

Latest revision as of 19:08, 17 October 2018