Difference between revisions of "Team:TP-CC San Diego/Templates/NavBar"

 
(287 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
<html onmouseover="show()">
+
{{:Team:TP-CC_San_Diego/Templates/MainCSS}}
 +
<html>
 
<head>
 
<head>
−
<style>
+
 
−
body
+
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:600" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 +
 
 +
<style>
 +
 
 +
#navbar
 
{
 
{
−
background-color: #aed8e2;
+
    margin: auto;
 +
    width: 100%;
 +
    text-align: center;
 
}
 
}
  
−
h1
+
#navbar-fill {
−
{
+
  width:100%;  
−
float: center;
+
  margin-top: 0px;
−
text-align: center;
+
  background-color: #333333;
−
color: blue;
+
  z-index: 2;
−
border: solid blue 2px;
+
−
width: 300px;
+
 
}
 
}
  
−
nav
+
.dropbtn {
 +
    background-color: #333333;
 +
    color: white;
 +
    width: 180px;
 +
    padding: 13px;
 +
    font-size: 16px;
 +
    border: none;
 +
    cursor: pointer;
 +
font-family: 'Montserrat', sans-serif;
 +
 
 +
 
 +
}
 +
 
 +
button.dropbtn:hover
 
{
 
{
−
position: fixed;
+
  background-color: black;
−
display: block;
+
−
  margin: 0 auto;
+
−
  padding: 0;
+
−
  background-color: #5396ac;
+
−
width: 100%;
+
−
top: 0;
+
−
height: 50px;
+
−
text-color: #ecd9c6;
+
 
}
 
}
  
−
a.button {
+
.dropdown {
−
     -webkit-appearance: button;
+
     position: relative;
−
     -moz-appearance: button;
+
    display: inline-block;
−
     appearance: button;
+
    font-family: 'Montserrat', sans-serif;
 +
}
 +
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    width: 180px;
 +
     background-color: #333333;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
     z-index: 2;
 +
    text-align: center;
 +
    font-family: 'Montserrat', sans-serif;
 +
}
 +
 
 +
 
 +
#title
 +
{
 +
    color: white;
 
     text-decoration: none;
 
     text-decoration: none;
−
    color: #5396ac;;
 
 
}
 
}
  
−
#nav-item
+
.dropdown-content a {
 +
  color: white;
 +
  border-bottom-style: solid;
 +
  border-bottom-color: white;
 +
  border-bottom-width: 1px;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  font-family: 'Raleway', sans-serif;
 +
}
 +
 
 +
.dropdown-content a:hover {
 +
background-color:  #6e6e6e
 +
}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
.dropdown:hover .dropbtn {
 +
    background-color: #333333;
 +
}
 +
 
 +
div.animation a:before
 
{
 
{
−
display: inline-block;
+
    position: absolute;
−
color: black;
+
    top: 0px;
−
text-align: center;
+
    left: 0px;
−
  padding: 14px 50px;
+
    width: 1px;
−
  text-decoration: none;
+
    height: 0px;
−
font-family: "Open Sans Condensed";
+
    background: #FFF;
−
font-size: 18px;
+
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 
}
 
}
  
−
#nav-item:hover
+
div.animation a:after
 
{
 
{
−
background-color: #0086b3;
+
    position: absolute;
−
color: blue;
+
    top: 0px;
 +
    left: 0px;
 +
    width: 100%;
 +
    height: 1px;
 +
    background: #FFF;
 +
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 
}
 
}
  
−
                nav
+
div.animation a:hover:before
−
{
+
{
−
top: 20px;
+
    height: 100%;
−
                        width: 100%;
+
}
−
                        margin-bottom: 20px;
+
 
−
width: 101%;
+
div.animation a:hover:after
−
position: fixed;
+
{
−
display: block;
+
    opacity: 0;
−
margin: 0px;
+
    top: 10%;
−
padding: 0px;
+
}
−
+
−
}
+
−
+
−
.dropbutton
+
−
{
+
−
background-color: #000066;
+
−
color: white;
+
−
padding: 10px;
+
−
font-size: 16px;
+
−
border: none;
+
−
float: left;
+
−
}
+
−
+
−
.dropbutton:hover, .dropbutton:focus
+
−
{
+
−
background-color: black;
+
−
}
+
−
+
−
.drop-content
+
−
{
+
−
                        margin-top: 37px;
+
−
display: none;
+
−
position: absolute;
+
−
background-color: #000066;
+
−
z-index: 1;
+
−
}
+
  
−
.drop-contentlate
 
−
{
 
−
                        margin-right: 50px;
 
−
}
 
−
 
−
.drop-content a
 
−
{
 
−
color: white;
 
−
padding: 12px 16px;
 
−
text-decoration: none;
 
−
display: block;
 
−
}
 
  
−
                .drop-content a:hover
 
−
{
 
−
color: white;
 
−
                        background-color: black;
 
−
padding: 12px 16px;
 
−
text-decoration: none;
 
−
display: block;
 
−
}
 
−
 
−
.show
 
−
{
 
−
display: inline;
 
−
}
 
−
.show2
 
−
{
 
−
display: inline;
 
−
}
 
−
.show3
 
−
{
 
−
display: inline;
 
−
}
 
−
.show4
 
−
{
 
−
display: inline;
 
−
}
 
−
.show5
 
−
{
 
−
display: inline;
 
−
}
 
−
.show6
 
−
{
 
−
display: block;
 
−
}
 
−
 
−
h1
 
−
{
 
−
padding-top: 60px;
 
−
}
 
 
</style>
 
</style>
−
<script>
+
</head>
−
function show()
+
<body>
−
{
+
<div id = "navbar">
−
document.getElementById("myDropdown").classList.toggle("show");
+
<div id="navbar-fill">
−
}
+
<div class="dropdown nav-animation">
−
function show2()
+
  <a href = "https://2017.igem.org/Team:TP-CC_San_Diego"> <button class = "dropbtn" class id = "title" style = "color: white"> Home </button> </a>
−
{
+
 
−
document.getElementById("myDropdown2").classList.toggle("show2");
+
</div>
−
}
+
 
−
function show3()
+
<div class="dropdown">
−
{
+
  <button class="dropbtn"> Project </button>
−
document.getElementById("myDropdown3").classList.toggle("show3");
+
  <div class="dropdown-content" style="left:0;">
−
}
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Description">Description</a>
−
function show4()
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Results">Results</a>
−
{
+
 
−
document.getElementById("myDropdown4").classList.toggle("show4");
+
        <a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Model">Modeling</a>
−
}
+
  </div>
−
function show5()
+
</div>
−
{
+
 
−
document.getElementById("myDropdown5").classList.toggle("show5");
+
<div class="dropdown">
−
}
+
  <button class="dropbtn"> Notebook </button>
−
function show6()
+
  <div class="dropdown-content">
−
{
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/LabBook">Lab Notebook</a>
−
document.getElementById("myDropdown6").classList.toggle("show6");
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/InterLab">Interlab Study</a>
−
}
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Protocols">Protocols</a>
−
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/MedalCriteria">Medal Criteria</a>
−
window.onclick = function(event) {
+
  </div>
−
if (!event.target.matches('.dropbutton')) {
+
</div>
−
var dropdowns = document.getElementsByClassName("dropdown-content");
+
 
−
var i;
+
<div class="dropdown">
−
for (i = 0; i < dropdowns.length; i++) {
+
  <button class="dropbtn"> Human Practices </button>
−
var openDropdown = dropdowns[i];
+
  <div class="dropdown-content">
−
if (openDropdown.classList.contains('show')) {
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/HP/Silver">Human Practices</a>
−
openDropdown.classList.remove('show');
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/HP/Gold_Integrated">Integrated Practices</a>
−
}
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Collaborations">Collaborations</a>
−
}
+
  </div>
−
}
+
</div>
−
}
+
 
−
</script>
+
<div class="dropdown">
−
</head>
+
  <button class="dropbtn"> Team </button>
−
<nav>
+
  <div class="dropdown-content">
−
<button onmouseover="show6()" onmouseout="show6()" class="dropbutton">Project</button>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Team">Team</a>
−
<div id="myDropdown" onmouseover="show()" onmouseout="show()" class="drop-content">
+
        <a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Attributions">Attributions</a>
−
<a href="">Overview</a>
+
  </div>
−
<a href="">Single Cell Model</a>
+
</div>
−
<a href="">Population Model</a>
+
 
−
</div>
+
</div>
−
+
 
−
<button onmouseover="show()" onmouseout="show()" class="dropbutton">Modelling</button>
+
 
−
<div id="myDropdown2" onmouseover="show2()" onmouseout="show2()" class="drop-content">
+
</div>
−
</div>
+
</body>
−
+
</html>
−
<button onmouseover="show2()" onmouseout="show2()" class="dropbutton">Software Tools</button>
+
−
<div id="myDropdown3" onmouseover="show3()" onmouseout="show3()" class="drop-content">
+
−
<a href="">Lab Book</a>
+
−
<a href="">Protocols</a>
+
−
<a href="">Medal Criteria</a>
+
−
                                <a href="">Brainstorm</a>
+
−
</div>
+
−
+
−
<button onmouseover="show3()" onmouseout="show3()" class="dropbutton">Notebook</button>
+
−
<div id="myDropdown4" onmouseover="show4()" onmouseout="show4()" class="drop-content">
+
−
<a href="">Human Practices</a>
+
−
<a href="">Integrated Practices</a>
+
−
<a href="">Public Engagement</a>
+
−
                                <a href="">Collaborations</a>
+
−
</div>
+
−
+
−
<button onmouseover="show4()" onmouseout="show4()" class="dropbutton">Human Practices</button>
+
−
<div id="myDropdown5" onmouseover="show5()" onmouseout="show5()" class="drop-content">
+
−
<a href=""></a>
+
−
<a href=""></a>
+
−
</div>
+
−
+
−
<button onmouseover="show5()" onmouseout="show5()" class="dropbutton">Team</button>
+
−
<div id="myDropdown6" onmouseover="show6()" onmouseout="show6()" class="drop-content">
+
−
<a href="">Description</a>
+
−
<a href="">Results</a>
+
−
                                <a href="">Proof</a>
+
−
                                <a href="">Basic Parts</a>
+
−
</div>
+
−
</nav>
+

Latest revision as of 12:57, 1 November 2017