Template:Team:Yale2013/Templates/Header
From 2013.igem.org
(Difference between revisions)
(30 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<!-- CSS style applied to the header --> | <!-- CSS style applied to the header --> | ||
<head> | <head> | ||
+ | |||
+ | <!-- CSS style sheet for new menu (from CSS menu maker)--> | ||
+ | <style type="text/css"> | ||
+ | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500); | ||
+ | /* 2f4b87 */ | ||
+ | /* 2f4b87 */ | ||
+ | /* #1f325d */ | ||
+ | /* Menu CSS */#cssmenu { | ||
+ | width: auto; | ||
+ | } | ||
+ | #cssmenu, | ||
+ | #cssmenu ul, | ||
+ | #cssmenu ul li, | ||
+ | #cssmenu ul li a { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | line-height: 1; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | font-weight: 500; | ||
+ | font-size: 13px; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: all ease .3s; | ||
+ | -o-transition: all ease .3s; | ||
+ | -moz-transition: all ease .3s; | ||
+ | -ms-transition: all ease .3s; | ||
+ | transition: all ease .3s; | ||
+ | } | ||
+ | #cssmenu:before, | ||
+ | #cssmenu:after, | ||
+ | #cssmenu > ul:before, | ||
+ | #cssmenu > ul:after { | ||
+ | content: ''; | ||
+ | display: table; | ||
+ | } | ||
+ | #cssmenu:after, | ||
+ | #cssmenu > ul:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | #cssmenu a { | ||
+ | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
+ | } | ||
+ | #cssmenu ul { | ||
+ | background: #3b5998; | ||
+ | border-radius: 3px; | ||
+ | border: 1px solid #2b4479; | ||
+ | border: 1px solid #2d4373; | ||
+ | -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15); | ||
+ | -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15); | ||
+ | -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15); | ||
+ | -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15); | ||
+ | box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15); | ||
+ | } | ||
+ | #cssmenu ul > li { | ||
+ | float: left; | ||
+ | list-style: none; | ||
+ | } | ||
+ | #cssmenu ul > li > a { | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | padding: 14px 14px; | ||
+ | position: relative; | ||
+ | } | ||
+ | #cssmenu ul > li > a:hover { | ||
+ | background: #2d4373; | ||
+ | -webkit-box-shadow: inset 0 0 1px #1e2e4f; | ||
+ | -o-box-shadow: inset 0 0 1px #1e2e4f; | ||
+ | -moz-box-shadow: inset 0 0 1px #1e2e4f; | ||
+ | -ms-box-shadow: inset 0 0 1px #1e2e4f; | ||
+ | box-shadow: inset 0 0 1px #1e2e4f; | ||
+ | -webkit-transition: all ease .3s; | ||
+ | -o-transition: all ease .3s; | ||
+ | -moz-transition: all ease .3s; | ||
+ | -ms-transition: all ease .3s; | ||
+ | transition: all ease .3s; | ||
+ | } | ||
+ | #cssmenu ul > li > a:hover:before { | ||
+ | content: ''; | ||
+ | z-index: 2; | ||
+ | position: absolute; | ||
+ | border: 1px solid white; | ||
+ | border-top: 0; | ||
+ | border-bottom: 0; | ||
+ | border-right: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | top: 0; | ||
+ | left: -1px; | ||
+ | opacity: .2; | ||
+ | } | ||
+ | #cssmenu ul > li > a:hover:after { | ||
+ | content: ''; | ||
+ | z-index: 2; | ||
+ | position: absolute; | ||
+ | border: 1px solid white; | ||
+ | border-top: 0; | ||
+ | border-bottom: 0; | ||
+ | border-left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | top: 0; | ||
+ | right: -1px; | ||
+ | opacity: .2; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul { | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #cssmenu > ul > li:hover > ul { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | position: absolute; | ||
+ | border-radius: 0 0 3px 3px; | ||
+ | -webkit-box-shadow: none; | ||
+ | -o-box-shadow: none; | ||
+ | -moz-box-shadow: none; | ||
+ | -ms-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul { | ||
+ | width: 200px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul > li { | ||
+ | float: none; | ||
+ | position: relative; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul > li > ul { | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul > li:hover > ul { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul > li > ul { | ||
+ | left: 200px; | ||
+ | top: 1px; | ||
+ | width: 200px; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul > li > ul > li { | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
.bar a:visited {color:white;} | .bar a:visited {color:white;} | ||
Line 10: | Line 160: | ||
/* CSS from DTU Denmark 2011*/ | /* CSS from DTU Denmark 2011*/ | ||
/* "Removing the Mediawiki look */ | /* "Removing the Mediawiki look */ | ||
- | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | + | #contentSub, #search-controls, .firstHeading, /*#footer-box, #catlinks,*/ #p-logo { |
display:none;} | display:none;} | ||
#top-section { | #top-section { | ||
Line 21: | Line 171: | ||
#menubar > ul > li:last-child { | #menubar > ul > li:last-child { | ||
display: none;} | display: none;} | ||
- | /* Resizes the menubar to | + | /* Resizes the menubar to fix the links (default is 400px) */ |
#menubar { | #menubar { | ||
width: auto;} | width: auto;} | ||
Line 28: | Line 178: | ||
body { | body { | ||
- | margin: | + | margin: 20px 0 0 0; |
padding: 0;} | padding: 0;} | ||
#top-section { | #top-section { | ||
Line 37: | Line 187: | ||
border: none;} | border: none;} | ||
#menubar { | #menubar { | ||
- | font-size: | + | font-size: 100%; |
- | top: - | + | top: -24px;} |
.left-menu:hover { | .left-menu:hover { | ||
background-color: transparent;} | background-color: transparent;} | ||
Line 49: | Line 199: | ||
#menubar:hover li a { | #menubar:hover li a { | ||
color: white;} | color: white;} | ||
+ | |||
+ | /*styling from Imperial College London 2011 */ | ||
+ | #YaleLogo { | ||
+ | position: relative; | ||
+ | text-align:center; | ||
+ | z-index:auto; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
- | |||
- | {| class = "bar" style="color:#3399CC;background-color:#0F4D92;" cellpadding="10" cellspacing="1" border="1" bordercolor="#fff" width=" | + | <a href="https://igem.org/Main_Page" target="_blank">Return to iGEM main page</a> |
+ | |||
+ | <!-- Bit of code from Imperial college london 2011(test) --> | ||
+ | <div id='YaleLogo'> | ||
+ | <a href="https://2013.igem.org/Team:Yale"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/6/61/YaleIgemLogo2.png" style="width:970px;"> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <!-- New CSS Menu --> | ||
+ | |||
+ | <div id='cssmenu'> | ||
+ | <ul> | ||
+ | <li class='active'><a href='https://2013.igem.org/Team:Yale'><span>Home</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Team'><span>Team</span></a></li> | ||
+ | <li><a href='https://igem.org/Team.cgi?year=2013&team_name=Yale'><span>Official Team Profile</span></a></li> | ||
+ | <li class='has-sub'><a href='https://2013.igem.org/Team:Yale/Project_Overview'><span>Project</span></a> | ||
+ | |||
+ | <!-- <ul> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Project_Overview'><span>Project Overview</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Project_Validate'><span>PLA synthesis</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Project_Bioassay'><span>Develop Bioassay</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Project_MAGE'><span>Apply MAGE</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Project_Export'><span>Introduce Export System</span></a></li> | ||
+ | <li class='last'><a href='#'><span>Make a Bioplastic</span></a></li> | ||
+ | </ul> | ||
+ | --> | ||
+ | </li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Parts'><span>Parts Submitted to the Registry</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Modeling'><span>Modeling</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Notebook'><span>Notebook</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Outreach'><span>Outreach</span></a></li> | ||
+ | <li><a href='https://2013.igem.org/Team:Yale/Safety'><span>Safety</span></a></li> | ||
+ | <li class='last'><a href='https://2013.igem.org/Team:Yale/Attributions'><span>Attributions</span></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </html> | ||
+ | <!--- | ||
+ | {| class = "bar" style="color:#3399CC;background-color:#0F4D92;" cellpadding="10" cellspacing="1" border="1" bordercolor="#fff" width="85%" align="center" | ||
!align="center"|[[Team:Yale|Home]] | !align="center"|[[Team:Yale|Home]] | ||
!align="center"|[[Team:Yale/Team|Team]] | !align="center"|[[Team:Yale/Team|Team]] | ||
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Yale Official Team Profile] | !align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Yale Official Team Profile] | ||
- | !align="center"|[[Team:Yale/ | + | !align="center"|[[Team:Yale/Project_Overview|Project]] |
!align="center"|[[Team:Yale/Parts|Parts Submitted to the Registry]] | !align="center"|[[Team:Yale/Parts|Parts Submitted to the Registry]] | ||
!align="center"|[[Team:Yale/Modeling|Modeling]] | !align="center"|[[Team:Yale/Modeling|Modeling]] | ||
!align="center"|[[Team:Yale/Notebook|Notebook]] | !align="center"|[[Team:Yale/Notebook|Notebook]] | ||
+ | !align="center"|[[Team:Yale/Outreach|Outreach]] | ||
!align="center"|[[Team:Yale/Safety|Safety]] | !align="center"|[[Team:Yale/Safety|Safety]] | ||
!align="center"|[[Team:Yale/Attributions|Attributions]] | !align="center"|[[Team:Yale/Attributions|Attributions]] | ||
|} | |} | ||
+ | --> |
Latest revision as of 00:42, 26 September 2013
Return to iGEM main page