Difference between revisions of "Template:TPHS San Diego/Navbar"

Line 2: Line 2:
 
<head>
 
<head>
  
 +
<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>
 
<style>
  
−
.logo
+
#navbar
 
{
 
{
−
  display:inline-block;
+
    margin: auto;
−
  position:relative;
+
    width: 100%;
−
  top:-55px;
+
    text-align: center;
−
  left:30px;
+
−
  padding-top:20px;
+
−
  padding-bottom:20px;
+
−
  height:150px;
+
−
  width:180px;
+
−
  float:left;
+
−
  background-color:#FFF;
+
−
  border-bottom-style:solid;
+
−
  border-bottom-color:#ffffb1;
+
−
  border-radius:50%;
+
−
  background-color:#ffffb1;
+
 
}
 
}
  
−
 
+
#navbar-fill {
−
.navbar  
+
  width:100%;  
−
{  
+
  margin-top: 0px;
−
  margin-top:-8px;
+
  background-color: #333333;
−
  overflow: hidden;
+
  z-index: 2;
−
  background-color:#FFF;
+
−
  font-family: Arial;
+
−
  font-size:16px;
+
−
  padding-top:15px;
+
−
  padding-bottom:20px;
+
−
  padding-left:220px;
+
−
  border-bottom-style:solid;
+
−
  border-bottom-color:#ffffb1;
+
−
  border-bottom-width:thick;
+
 
}
 
}
  
−
/* Links inside the navbar */
+
.dropbtn {
−
.navbar a
+
    background-color: #333333;
−
{
+
    color: white;
 +
    width: 180px;
 +
    padding: 13px;
 +
    font-size: 16px;
 +
    border: none;
 +
    cursor: pointer;
 +
font-family: 'Montserrat', sans-serif;
 +
 
 
    
 
    
−
  position:relative;
 
−
  top:-10px;
 
−
  float: left;
 
−
  font-size: 18px;
 
−
  font-weight:450;
 
−
  color:black;
 
−
  text-align: center;
 
−
  padding: 14px 16px;
 
−
  margin-right:200px;
 
−
  text-decoration: none;
 
 
}
 
}
  
−
/* The dropdown container */
+
button.dropbtn:hover
−
.dropdown
+
 
{
 
{
−
  float: left;
+
  background-color: black;
−
  overflow: hidden;
+
}
  
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
    font-family: 'Montserrat', sans-serif;
 
}
 
}
  
−
/* Dropdown button */
+
.dropdown-content {
−
.dropdown .dropbtn
+
    display: none;
−
{
+
    position: absolute;
−
  display:inline-block;
+
    width: 180px;
−
  font-size: 16px;  
+
    background-color: #333333;
−
  border: none;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
  outline: none;
+
    z-index: 2;
−
  color: black;
+
    text-align: center;
−
  font-weight:700;
+
    font-family: 'Montserrat', sans-serif;
−
  font-size:20px;
+
−
  padding: 14px 16px;
+
−
  background-color: inherit;
+
−
  font-family: inherit; /* Important for vertical align on mobile phones */
+
−
  margin: 0; /* Important for vertical align on mobile phones */
+
−
  margin-right:75px;
+
 
}
 
}
  
−
/* Add a red background color to navbar links on hover */
+
 
−
.navbar a:hover, .dropdown:hover .dropbtn
+
#title
 
{
 
{
−
  background-color:rgba(255, 229, 7, 0.47);
+
    color: white;
 +
    text-decoration: none;
 
}
 
}
  
−
/* Dropdown content (hidden by default) */
+
.dropdown-content a {
−
.dropdown-content  
+
  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: none;
+
    position: absolute;
−
  position: absolute;
+
    top: 0px;
−
  background-color: #f9f9f9;
+
    left: 0px;
−
  min-width: 120px;
+
    width: 1px;
−
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
    height: 0px;
−
  z-index: 1;
+
    background: #FFF;
 +
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 
}
 
}
  
−
/* Links inside the dropdown */
+
div.animation a:after
−
.dropdown-content a  
+
 
{
 
{
−
  float: none;
+
    position: absolute;
−
  color: black;
+
    top: 0px;
−
  padding: 12px 16px;
+
    left: 0px;
−
  text-decoration: none;
+
    width: 100%;
−
  display: block;
+
    height: 1px;
−
  text-align: left;
+
    background: #FFF;
 +
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 
}
 
}
  
−
/* Add a grey background color to dropdown links on hover */
+
div.animation a:hover:before
−
.dropdown-content a:hover  
+
 
{
 
{
−
  background-color: #ddd;
+
    height: 100%;
 
}
 
}
  
−
/* Show the dropdown menu on hover */
+
div.animation a:hover:after
−
.dropdown:hover .dropdown-content
+
 
{
 
{
−
  display: block;
+
    opacity: 0;
 +
    top: 10%;
 
}
 
}
−
 
  
  
Line 125: Line 128:
 
</head>
 
</head>
 
<body>
 
<body>
−
<img  class = "logo" src = "https://static.igem.org/mediawiki/2018/5/55/T--TPHS_San_Diego--Logo3.png" alt = "logo" >
+
<div id = "navbar">
−
     
+
<div id="navbar-fill">
−
        <div class = "navbar">
+
<div class="dropdown nav-animation">
−
           
+
  <a href = "https://2017.igem.org/Team:TP-CC_San_Diego"> <button class = "dropbtn" class id = "title" style = "color: white"> Home </button> </a>
−
            <div class = "dropdown">
+
 
−
                <button class = "dropbtn">Project
+
</div>
−
                    <i class = "fa fa-caret-down"></i>
+
 
−
                </button>
+
<div class="dropdown">
−
                <div class = "dropdown-content">
+
  <button class="dropbtn"> Project </button>
−
                    <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Description">Description</a>
+
  <div class="dropdown-content" style="left:0;">
−
                    <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Design">Design</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Description">Description</a>
−
                    <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Model">Model</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Results">Results</a>
−
                    <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Parts">Parts</a>
+
 
−
                    <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Results">Results</a>
+
        <a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Model">Modeling</a>
−
                </div>
+
  </div>
−
            </div>
+
</div>
−
           
+
 
−
            <div class = "dropdown">
+
<div class="dropdown">
−
                <button class = "dropbtn">Notebook
+
  <button class="dropbtn"> Notebook </button>
−
                    <i class = "fa fa-caret-down"></i>
+
  <div class="dropdown-content">
−
                </button>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/LabBook">Lab Notebook</a>
−
               
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/InterLab">Interlab Study</a>
−
                <div class = "dropdown-content">
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Protocols">Protocols</a>
−
                    <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Notebook">Notebook</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/MedalCriteria">Medal Criteria</a>
−
                    <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Experiments">Experiments</a>
+
  </div>
−
                </div>
+
</div>
−
            </div>
+
 
−
               
+
<div class="dropdown">
−
                <div class = "dropdown">
+
  <button class="dropbtn"> Human Practices </button>
−
                    <button class = "dropbtn">Human Practices
+
  <div class="dropdown-content">
−
                    <i class = "fa fa-caret-down"></i>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/HP/Silver">Human Practices</a>
−
                    </button>
+
<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 class = "dropdown-content">
+
  </div>
−
                        <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Human_Practices">Human Practices</a>
+
</div>
−
                        <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Collaborations">Collaborations</a>
+
 
−
                    </div>
+
<div class="dropdown">
−
                </div>
+
  <button class="dropbtn"> Team </button>
−
               
+
  <div class="dropdown-content">
−
                <div class = "dropdown">
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Team">Team</a>
−
                    <button class = "dropbtn">Team
+
        <a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Attributions">Attributions</a>
−
                    <i class = "fa fa-caret-down"></i>
+
  </div>
−
                    </button>
+
</div>
−
                   
+
 
−
                    <div class = "dropdown-content">
+
</div>
−
                        <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Team">Team</a>
+
 
−
                        <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Attributions">Attributions</a>
+
−
                    </div>
+
−
            </div>
+
  
−
                <div class = "dropdown">
+
</div>
−
                    <button class = "dropbtn">Judging
+
−
                    <i class = "fa fa-caret-down"></i>
+
−
                    </button>
+
−
                   
+
−
                    <div class = "dropdown-content">
+
−
                        <a href = "https://2018.igem.org/Team:TPHS_San_Diego/Medal Criteria">Medal Criteria</a>
+
−
                    </div>
+
−
                </div>
+
−
           
+
−
           
+
−
        </div>  
+
−
       
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 04:27, 12 October 2018