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

Line 1: Line 1:
 
<html>
 
<html>
  
 +
<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, .dropdownr: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;
 +
}
 +
 +
 +
 +
 +
/***************************************************** RESPONSIVE STYLING ****************************************************/
 +
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
 +
@media only screen and (max-width: 1200px) {
 +
 +
#content {width:100%; }
 +
.igem_2017_menu_wrapper {width:15%; right:0;}
 +
.highlight {padding:10px 0px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 +
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 +
 +
}
 +
 +
/* IF THE SCREEN IS LESS THAN 800PX */
 +
@media only screen and (max-width: 800px) {
 +
 +
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 +
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 +
.column.half_size  {width:100%; }
 +
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 +
.highlight {padding:15px 5px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:block; }
 +
#menu_content { display:none;}
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
.menu_bottom_padding {display:none;}
 +
.menu_button.direct_to_page { padding-left: 36px; }
 +
}
 +
 +
 +
 +
/* special class that the system uses to make sure the team wants a page to be evaluated */
 +
.judges-will-not-evaluate {
 +
    width: 96.6%;
 +
  margin: 5px 15px;
 +
  display: block;
 +
border: 4px solid #3399ff;
 +
    font-weight: bold;
 +
        font-color: #000000;
 +
}
 +
 +
 +
 +
</style>
  
  
Line 20: Line 227:
 
}
 
}
  
−
li a, .navbar {
+
li a, .dropdown {
 
     display: inline-block;
 
     display: inline-block;
 
     color: white;
 
     color: white;
Line 28: Line 235:
 
}
 
}
  
−
li a:hover, .navbar:hover .navbar {
+
li a:hover, .dropdown:hover .dropdown {
 
     background-color: red;
 
     background-color: red;
 
}
 
}
  
−
li.navbar {
+
li.dropdown {
 
     display: inline-block;
 
     display: inline-block;
 
}
 
}
  
−
.navbar-content {
+
.dropdown-content {
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
Line 45: Line 252:
 
}
 
}
  
−
.navbar-content a {
+
.dropdown-content a {
 
     color: black;
 
     color: black;
 
     padding: 12px 16px;
 
     padding: 12px 16px;
Line 53: Line 260:
 
}
 
}
  
−
.navbar-content a:hover {background-color: #f1f1f1}
+
.dropdown-content a:hover {background-color: #f1f1f1}
  
−
.navbar:hover .navbar-content {
+
.dropdown:hover .dropdown-content {
 
     display: block;
 
     display: block;
 
}
 
}

Revision as of 19:48, 29 June 2017