Difference between revisions of "Template:US AFRL CarrollHS NavBar"

Line 1: Line 1:
 
<html>
 
<html>
  
 +
 +
 +
 +
<head>
 
<style>
 
<style>
  
 +
/**************************************************************** MENU ***************************************************************/
 +
/* Wrapper for the menu */
 +
.igem_2017_menu_wrapper {
 +
width: 15%;
 +
height:100vh;
 +
position:fixed;
 +
right:0%;
 +
padding:0px;
 +
float:right;
 +
border-left: 1px solid #d3d3d3;
 +
background-color:#000000;
 +
text-align:left;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
}
 +
 +
ul {
 +
    list-style-type: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    overflow: hidden;
 +
    background-color: #333;
 +
    width: 100%;
 +
}
 +
 +
li {
 +
    float: left;
 +
}
 +
 +
li a, .dropbtn {
 +
    display: inline-block;
 +
    color: #000000;
 +
    text-align: center;
 +
    padding: 14px 16px;
 +
    text-decoration: none;
 +
}
 +
 +
li a:hover, .dropdown:hover .dropbtn {
 +
    background-color: red;
 +
}
 +
 +
li.dropdown {
 +
    display: inline-block;
 +
}
 +
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 +
.dropdown-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
 +
 +
.dropdown-content a:hover {background-color: #f1f1f1}
 +
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 +
/**********************************LAYOUT CLASSES **********************************/
 +
 +
/* general class for column divs */
 +
.igem_2017_content_wrapper .column  {
 +
padding: 10px 0px;
 +
float:left;
 +
}
 +
 +
/* class for a full width column */
 +
.column .full_size {
 +
width:100%;
 +
}
 +
 +
/* styling for images in a full width column*/
 +
.column.full_size img {
 +
width:97%;
 +
padding: 10px 15px;
 +
}
 +
 +
/* class for a half width column */
 +
.column.half_size {
 +
width: 50%;
 +
}
 +
/* styling for images in a half width column*/
 +
.column.half_size img {
 +
width: 94.5%;
 +
padding: 10px 15px;
 +
}
 +
 +
 +
 +
 +
/********************************* SUPPORT CLASSES ********************************/
 +
 +
/* class that clears content below*/
 +
.igem_2017_content_wrapper .clear {
 +
clear:both;
 +
}
 +
 +
 +
/* adds extra spacing when clearing content */
 +
.igem_2017_content_wrapper  .clear.extra_space {
 +
height: 30px;
 +
}
 +
 +
 +
/* highlight class, makes content slightly smaller */
 +
.igem_2017_content_wrapper .highlight {
 +
margin: 0px 15px;
 +
padding: 15px 0px;
 +
}
 +
 +
 +
/* highlight class, adds a gray background */
 +
.igem_2017_content_wrapper .highlight.gray {
 +
background-color: #f2f2f2;
 +
}
 +
 +
/* highlight with decoration blue line on top */
 +
.igem_2017_content_wrapper .highlight.blue_top {
 +
    border-top: 4px solid #3399ff;
 +
}
 +
 +
/* highlight with a full blue border decoration */
 +
.igem_2017_content_wrapper .highlight.blue_border {
 +
    border: 4px solid  #3399ff;
 +
}
 +
 +
/* button class */
 +
.igem_2017_content_wrapper .button{
 +
max-width: 35%;
 +
margin: 30px auto;
 +
padding: 12px 10px;
 +
    background-color: #3399ff;
 +
    text-align: center;
 +
  color: #000000;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
}
 +
 +
 +
/* styling for button on hover */
 +
.igem_2017_content_wrapper .button:hover{
 +
background-color: #3399ff;
 +
    color: #000000;
 +
}
  
  
Line 51: Line 212:
  
 
</style>
 
</style>
−
 
−
 
−
 
−
<head>
 
  
 
<head>
 
<head>
Line 70: Line 227:
 
}
 
}
  
−
li a, .dropdown {
+
li a, .dropbtn {
 
     display: inline-block;
 
     display: inline-block;
 
     color: white;
 
     color: white;
Line 78: Line 235:
 
}
 
}
  
−
li a:hover, .dropdown:hover .dropdown {
+
li a:hover, .dropdown:hover .dropbtn {
 
     background-color: red;
 
     background-color: red;
 
}
 
}
Line 108: Line 265:
 
     display: block;
 
     display: block;
 
}
 
}
 +
 +
 
</style>
 
</style>
 
</head>
 
</head>
Line 114: Line 273:
 
<ul>
 
<ul>
 
   <li><a href="https://2017.igem.org/Team:US_AFRL_CarrollHS">Home</a></li>
 
   <li><a href="https://2017.igem.org/Team:US_AFRL_CarrollHS">Home</a></li>
−
<li class="navbar">
+
<li class="dropdown">
 
 
 
     <a href="javascript:void(0)" class="dropbtn">Team</a>
 
     <a href="javascript:void(0)" class="dropbtn">Team</a>
−
     <div class="navbar-content">
+
     <div class="dropdown-content">
 
<a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Team">Team</a>
 
<a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Team">Team</a>
 
     <a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Collaborations">Collaborations</a>
 
     <a href= "https://2017.igem.org/Team:US_AFRL_CarrollHS/Collaborations">Collaborations</a>
 
      
 
      
−
     <div class="navbar-content">  <li class="navbar">
+
     <div class="dropdown-content">  <li class="dropdown">
 
     <a href="javascript:void(0)" class="dropbtn">Project</a>
 
     <a href="javascript:void(0)" class="dropbtn">Project</a>
−
     <div class="navbar-content">
+
     <div class="dropdown-content">
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Description">Description</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Description">Description</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Design">Design</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Design">Design</a>
Line 134: Line 293:
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Attributions">Atributions</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Attributions">Atributions</a>
 
        
 
        
−
     <div class="navbar-content">  <li class="navbar">
+
     <div class="dropdown-content">  <li class="dropdown">
 
     <a href="javascript:void(0)" class="dropbtn">Parts</a>
 
     <a href="javascript:void(0)" class="dropbtn">Parts</a>
−
     <div class="navbar-content">
+
     <div class="dropdown-content">
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Parts">Parts</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Parts">Parts</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Basic_Part">Basic Parts</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/Basic_Part">Basic Parts</a>
Line 143: Line 302:
 
        
 
        
 
        
 
        
−
       <div class="navbar-content">  <li class="navbar">
+
       <div class="dropdown-content">  <li class="dropdown">
 
     <a href="javascript:void(0)" class="dropbtn">Safety</a>
 
     <a href="javascript:void(0)" class="dropbtn">Safety</a>
−
     <div class="navbar-content">
+
     <div class="dropdown-content">
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS">Safety Steps</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS">Safety Steps</a>
 
        
 
        
−
       <div class="navbar-content">  <li class="navbar">
+
       <div class="dropdown-content">  <li class="dropdown">
 
     <a href="javascript:void(0)" class="dropbtn">Human Practices</a>
 
     <a href="javascript:void(0)" class="dropbtn">Human Practices</a>
−
     <div class="navbar-content">
+
     <div class="dropdown-content">
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Silver">Silver HP</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Silver">Silver HP</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Gold_Integrated">Integrated and Gold</a>
 
       <a href="https://2017.igem.org/Team:US_AFRL_CarrollHS/HP/Gold_Integrated">Integrated and Gold</a>

Revision as of 19:52, 29 June 2017