Template:Team:TPHS/Main
From 2014hs.igem.org
(Difference between revisions)
Line 26: | Line 26: | ||
<!-- CSS --> | <!-- CSS --> | ||
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet"> | ||
- | < | + | <style> |
+ | #TopBar { | ||
+ | background: #231F20; | ||
+ | width: 100%; | ||
+ | min-width: 766px; | ||
+ | height: 89px; | ||
+ | z-index: 10; | ||
+ | position: fixed; | ||
+ | text-align: center; | ||
+ | top: 25px; | ||
+ | } | ||
+ | |||
+ | #TopBar #TopLvlNavLink { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #TopBar ul { | ||
+ | background: #231F20; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | display: inline-table; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #TopBar ul:after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #TopBar li { | ||
+ | float: left; | ||
+ | width: 124px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #TopBar li:hover > a { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | #TopBar a { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 15px 0; | ||
+ | color: #FFFFFF; | ||
+ | text-decoration: none; | ||
+ | font: 24px Raleway, Arial, san-serif; | ||
+ | } | ||
+ | |||
+ | #TopBar > #TopLvlNav > li > a { | ||
+ | padding: 29px 0; | ||
+ | } | ||
+ | |||
+ | #TopBar ul ul { | ||
+ | display: none; | ||
+ | background: #231F20; | ||
+ | padding: 0 10px; | ||
+ | position: absolute; | ||
+ | top: 95%; | ||
+ | z-index: 10; | ||
+ | margin-left: -10px; | ||
+ | } | ||
+ | |||
+ | #TopBar ul li:hover > ul { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #TopBar ul ul li { | ||
+ | float: none; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #TopBar ul ul a { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | #TopBar ul ul ul { | ||
+ | position: absolute; | ||
+ | left: 100%; | ||
+ | top: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | @keyframes rotate { | ||
+ | from { | ||
+ | transform: rotate(0deg); | ||
+ | -ms-transform: rotate(0deg); | ||
+ | } | ||
+ | to { | ||
+ | transform: rotate(59deg); | ||
+ | -ms-transform: rotate(59deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes rotate { | ||
+ | from { | ||
+ | -webkit-transform: rotate(0deg); | ||
+ | } | ||
+ | to { | ||
+ | -webkit-transform: rotate(59deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-moz-keyframes rotate { | ||
+ | from { | ||
+ | transform: rotate(0deg); | ||
+ | } | ||
+ | to { | ||
+ | transform: rotate(59deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-o-keyframes rotate { | ||
+ | from { | ||
+ | transform: rotate(0deg); | ||
+ | } | ||
+ | to { | ||
+ | transform: rotate(59deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #TopBar #LogoItem:hover > img { | ||
+ | -webkit-animation-name: rotate; | ||
+ | -webkit-animation-duration: .5s; | ||
+ | -webkit-animation-iteration-count: infinite; | ||
+ | -webkit-animation-timing-function: linear; | ||
+ | } | ||
+ | |||
+ | #TopBar #LogoItem { | ||
+ | padding: 8px 0; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse { | ||
+ | position: fixed; | ||
+ | width: 120px; | ||
+ | height: 60px; | ||
+ | top: 25px; | ||
+ | background: orange; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse #TopLvlNavLink { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse:after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse ul { | ||
+ | display: none; | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse ul:after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse li { | ||
+ | float: left; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | width: 120px; | ||
+ | padding: 0; | ||
+ | background: green; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse li:hover { | ||
+ | background: pink; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse a { | ||
+ | color: #FFFFFF; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | |||
+ | #TopBarCollapse #LogoItem { | ||
+ | display: none !important; | ||
+ | }</style> | ||
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Content?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2013.igem.org/Team:Calgary/StyleSheets/Content?action=raw&ctype=text/css" rel="stylesheet"> | ||
Revision as of 22:51, 1 March 2014