Team:Calgary/StyleSheets/Navigation
From 2013.igem.org
Line 15: | Line 15: | ||
***/ | ***/ | ||
- | + | #NavHeight { | |
- | + | height: 106px; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #TopBar { | |
- | + | background: #000000; | |
width: 100%; | width: 100%; | ||
- | + | height: 87px; | |
- | + | z-index: 10; | |
- | + | position: fixed; | |
- | + | top: 25px; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #TopBar ul { |
- | + | background: #000000; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | background: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
list-style: none; | list-style: none; | ||
position: relative; | position: relative; | ||
- | display: inline- | + | display: inline-table; |
padding: 0; | padding: 0; | ||
- | margin | + | margin: 0; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #TopBar ul:after { | |
content: ""; | content: ""; | ||
clear: both; | clear: both; | ||
Line 64: | Line 43: | ||
} | } | ||
- | + | #TopBar li { | |
float: left; | float: left; | ||
+ | width: 124px; | ||
+ | text-align: center; | ||
} | } | ||
- | + | #TopBar li:hover > a { | |
- | + | text-decoration: underline; | |
} | } | ||
- | + | #TopBar a { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: block; | display: block; | ||
- | + | width: 100%; | |
+ | height: 100%; | ||
+ | padding: 15px 0; | ||
+ | color: #FFFFFF; | ||
text-decoration: none; | text-decoration: none; | ||
- | + | font: 24px Raleway, Arial, san-serif; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #TopBar > #TopLvlNav > li > a { | |
- | + | padding: 29px 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #TopBar ul ul { | |
display: none; | display: none; | ||
+ | background: #000000; | ||
+ | padding: 0; | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 99%; |
- | + | z-index: 10; | |
- | + | ||
} | } | ||
- | + | #TopBar ul li:hover > ul { | |
display: block; | display: block; | ||
} | } | ||
- | + | #TopBar ul ul li { | |
float: none; | float: none; | ||
position: relative; | position: relative; | ||
- | |||
- | |||
} | } | ||
- | + | #TopBar ul ul a { | |
- | + | font-size: 20px; | |
- | + | } | |
- | + | ||
- | + | #TopBar ul ul ul { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
left: 100%; | left: 100%; | ||
Line 159: | Line 95: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | + | ||
- | + | @-webkit-keyframes rotate { | |
- | + | from { | |
- | + | -webkit-transform: rotate(0deg); | |
+ | } | ||
+ | to { | ||
+ | -webkit-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 { | |
- | + | width: 120px; | |
- | width: | + | height: 60px; |
- | height: | + | background: orange; |
- | + | position: relative; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #TopBarCollapse:after { | |
- | + | content: ""; | |
- | + | clear: both; | |
- | + | display: block; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #TopBarCollapse ul { | |
+ | display: none; | ||
+ | list-style: none; | ||
padding: 0; | padding: 0; | ||
} | } | ||
- | + | #TopBarCollapse ul:after { | |
- | + | content: ""; | |
clear: both; | clear: both; | ||
- | + | display: block; | |
} | } | ||
- | + | #TopBarCollapse:hover > ul { | |
display: block; | display: block; | ||
} | } | ||
- | + | #TopBarCollapse li:hover > ul { | |
display: block; | display: block; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | #TopBarCollapse li { | |
- | padding: | + | float: left; |
+ | display: block; | ||
+ | clear: both; | ||
+ | width: 120px; | ||
+ | padding: 10px 15px; | ||
+ | background: green; | ||
} | } | ||
- | + | #TopBarCollapse li:hover { | |
- | + | background: pink; | |
} | } | ||
- | + | #TopBarCollapse a { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
color: #FFFFFF; | color: #FFFFFF; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
} | } | ||
- | + | #TopBarCollapse #LogoItem { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: none; | display: none; | ||
- | + | }*/ | |
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 22:03, 16 August 2013
/*** Name: Wm. Keith van der Meulen Date: Summer 2013 Organization: University of Calgary iGEM Team 2013
---Purpose--- CSS code to define navigation stylings.
Cite: Wm. Keith van der Meulen University of Calgary iGEM 2013 https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css
- /
- NavHeight {
height: 106px; }
- TopBar {
background: #000000; width: 100%; height: 87px; z-index: 10; position: fixed; top: 25px; }
- TopBar ul {
background: #000000; 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: #000000; padding: 0; position: absolute; top: 99%; z-index: 10; }
- TopBar ul li:hover > ul {
display: block; }
- TopBar ul ul li {
float: none; position: relative; }
- TopBar ul ul a {
font-size: 20px; }
- TopBar ul ul ul {
position: absolute; left: 100%; top: 0; }
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); } to { -webkit-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 {
width: 120px; height: 60px; background: orange; position: relative; }
- 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:hover > ul {
display: block; }
- TopBarCollapse li:hover > ul {
display: block; }
- TopBarCollapse li {
float: left; display: block; clear: both; width: 120px; padding: 10px 15px; background: green; }
- TopBarCollapse li:hover {
background: pink; }
- TopBarCollapse a {
color: #FFFFFF; display: block; text-decoration: none; }
- TopBarCollapse #LogoItem {
display: none; }*/