Team:UC Davis
From 2014.igem.org
(Difference between revisions)
(Prototype team page) |
|||
Line 1: | Line 1: | ||
- | + | <!DOCTYPE html> | |
- | + | ||
- | + | ||
<html> | <html> | ||
+ | <head> | ||
+ | <title> UC Davis iGEM 2014 </title> | ||
+ | <style> | ||
+ | .nav, .nav ul { | ||
+ | margin: 0; | ||
+ | margin-bottom: 10px; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | line-height: 1; | ||
+ | z-index: 9999999; | ||
+ | } | ||
- | + | /* The top navigation menu */ | |
- | + | .nav { | |
- | + | /* Layout & positioning */ | |
- | + | display: block; | |
- | + | position: relative; | |
- | + | width: 967px; /*1000px*/ | |
- | + | height: 43px; | |
- | + | border-radius:4px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* Background & effects */ | |
- | + | background: #232323; /* Background for Internet Explorer 9 and older browsers */ | |
- | + | } | |
- | + | ||
- | + | /* The link containers */ | |
- | + | .nav>li { | |
+ | display: block; | ||
+ | float:left; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | |||
+ | } | ||
- | + | /* The main navigation links */ | |
- | + | .nav>li>a { | |
+ | /* Layout & positioning */ | ||
+ | display: block; | ||
+ | width: 159.1px; /* 198 */ | ||
+ | padding: 15px 0px; | ||
+ | /* Typography */ | ||
+ | font-family: Arial, san-serif; | ||
+ | font-size: 20px; | ||
+ | font-weight: normal; | ||
+ | text-decoration: none; | ||
+ | color: rgba(255, 255, 255, .9); | ||
+ | text-shadow: 0 1px 0 #2a2a2a; | ||
+ | text-align: center; | ||
- | + | /* Chaning the background on hover with a smooth transition */ | |
- | + | -webkit-transition: background .35s linear; | |
- | + | -moz-transition: background .35s linear; | |
+ | -ms-transition: background .35s linear; | ||
+ | -o-transition: background .35s linear; | ||
+ | transition: background .35s linear; | ||
+ | } | ||
- | + | /* Centering dotted line dividers */ | |
- | + | .leftbookend { | |
+ | border-right: 1px dotted #393939; | ||
+ | } | ||
+ | |||
+ | .rightbookend { | ||
+ | border-left: 1px dotted #595959; | ||
+ | } | ||
+ | /* Chaning the background on hover */ | ||
+ | .nav>li>a:hover, .nav>li:hover>a { | ||
+ | background: rgba(255, 255, 255, .9); | ||
+ | color: #000; | ||
+ | } | ||
- | + | .nav>li:first-child a { | |
- | + | border-top-left-radius: 3px; | |
+ | } | ||
+ | .arrow:hover { | ||
+ | -moz-transition-duration: 3000s; | ||
+ | -ms-transition-duration: 3000s; | ||
+ | -o-transition-duration: 3000s; | ||
+ | -webkit-transition-duration: 3000s; | ||
+ | transition-duration: 3000s; | ||
+ | } | ||
- | |||
- | + | /* General styling for the submenus */ | |
- | + | .nav ul { | |
- | + | display: block; | |
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | text-align: center; | ||
+ | box-shadow: 0 1px 2px rgba(0, 0, 0, .15); | ||
+ | |||
+ | } | ||
+ | /* Level 1 submenus */ | ||
+ | .nav>li>ul { | ||
+ | cursor: pointer; | ||
+ | padding-top: 0px; | ||
+ | z-index: 200; | ||
+ | top: 43px; | ||
+ | } | ||
- | + | /* Making the level 1 submenu to appear on hover */ | |
- | + | .nav>li:hover>ul { | |
- | + | left: 0px; | |
- | + | } | |
- | |||
- | + | /* The submenu link containers */ | |
- | + | .nav ul li { | |
- | + | position: relative; | |
- | + | display: block; | |
- | + | ||
- | + | /* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */ | |
- | + | height: 0px; | |
- | + | -webkit-transition: height .2s; | |
- | + | -moz-transition: height .2s; | |
- | + | -o-transition: height .2s; | |
- | + | -ms-transition: height .2s; | |
+ | } | ||
- | + | /* Expanding the list elements which contain the links */ | |
+ | .nav li:hover>ul>li { | ||
+ | height: 24px; | ||
+ | } | ||
- | + | .nav>li:hover>ul>li:first-child { | |
+ | height: 27px; | ||
+ | } | ||
- | + | .nav>li>ul>li:first-child>a { | |
- | + | border-top: 3px solid #fff; | |
+ | } | ||
- | + | .nav>li>ul>li.dropdown:first-child>ul { | |
- | + | top: 3px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* The links of the submenus */ | |
- | + | .nav ul li a { | |
+ | /* Layout */ | ||
+ | display: block; | ||
+ | width: 127px; /* 169 */ | ||
+ | padding: 6px 12px 6px 20px; | ||
+ | /* Typography */ | ||
+ | font-size: 13px; | ||
+ | color: #01406e; | ||
+ | font-family: Arial, san-serif; | ||
+ | text-decoration: none; | ||
+ | background: #f0f0f0; | ||
- | + | /* Every change to the links (background, color etc) will be made with a smooth transition */ | |
- | + | -webkit-transition: all .2s; | |
+ | -moz-transition: all .2s; | ||
+ | -ms-transition: all .2s; | ||
+ | -o-transition: all .2s; | ||
+ | transition: all .2s; | ||
+ | } | ||
+ | .nav>li>ul>li:first-child>a::before { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | text-align: center; | ||
+ | width: 100%; | ||
+ | height: 12px; | ||
+ | background: transparent; | ||
+ | top: -8px; | ||
+ | left: 0; | ||
+ | z-index: 9999; | ||
+ | } | ||
- | + | /* The hover state of the links */ | |
- | + | .nav ul li:hover>a, .nav ul li>a:hover { | |
+ | background: #c8c8c8; /*e7e7e7 */ | ||
+ | color: #000000; | ||
+ | } | ||
- | + | /* Changing the color of the arrow on hover */ | |
- | + | .nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after { | |
- | + | border-left-color: #fff; | |
- | + | } | |
- | + | .nav>li>ul>li | |
- | + | { | |
- | + | margin-bottom: 0 | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | + | .nav>li:first-child:hover>ul | |
- | + | { | |
+ | left:0px; | ||
+ | } | ||
- | + | .nav>li:last-child:hover>ul | |
+ | { | ||
+ | left: 0px; | ||
+ | } | ||
- | <ul> | + | .tableCSS |
- | <li> | + | { |
- | <li> | + | background-color:#ffffff; |
- | <li> | + | width:1000px; |
- | <li> | + | } |
- | <li> | + | </style> |
- | <li> | + | </head> |
- | <li> | + | |
- | </ul> | + | <body> |
- | </ | + | <ul class="nav"> |
- | </ | + | <li class="dropdown leftbookend"> |
- | </ | + | <a href="/Team:UC_Davis" style="font-size:13px;">Home</a> |
- | </ | + | </li> |
+ | <li class="dropdown leftbookend rightbookend"> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/Team_Overview" style="font-size:13px;">Team</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:UC_Davis/Team_Overview">Overview</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UC_Davis/Bios">Bios</a></li> | ||
+ | <li><a href='/Team:UC_Davis/Contact'>Contact Us</a></li> | ||
+ | <li><a href="https://igem.org/Team.cgi?id=1212">Official Team Profile</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown leftbookend rightbookend"> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/Project_Overview" style="font-size:13px;">Project</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2013.igem.org/Team:UC_Davis/Project_Overview">Overview</a></li> | ||
+ | <li><a href="/Team:UC_Davis/Modeling">Modeling</a></li> | ||
+ | <li><a href='/Team:UC_Davis/Assembly'>Assembly</a></li> | ||
+ | <li><a href='/Team:UC_Davis/Parts'>Parts</a></li> | ||
+ | <li><a href='/Team:UC_Davis/Safety'>Safety</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown leftbookend rightbookend"> | ||
+ | <a href="/Team:UC_Davis/Data" style="font-size:13px;">Data</a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:UC_Davis/Data">Testing Constructs</a></li> | ||
+ | <li><a href="/Team:UC_Davis/AndersonPromoters">Anderson Promoters</a></li> | ||
+ | <li><a href="/Team:UC_Davis/AndersonPromoters2">Anderson II</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown leftbookend rightbookend"> | ||
+ | <a href='/Team:UC_Davis/Notebook_Overview' style="font-size:13px;">Notebook</a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:UC_Davis/Notebook">Notebook</a></li> | ||
+ | <li><a href="/Team:UC_Davis/Protocols">Protocols</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UC_Davis/Gallery">Gallery</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:UC_Davis/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown rightbookend"> | ||
+ | <a href="/Team:UC_Davis/HumanPracticesOverview" style="font-size:13px;">Human Practices</a> | ||
+ | <ul> | ||
+ | <li><a href='/Team:UC_Davis/HumanPracticesOverview'>Overview</a></li> | ||
+ | <li><a href='/Team:UC_Davis/Outreach'>Outreach</a></li> | ||
+ | <li><a href='/Team:UC_Davis/Database'>The Depot</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </body> | ||
+ | </html> |
Revision as of 22:52, 11 July 2014
<!DOCTYPE html>