Team:Calgary/StyleSheets/Navigation
From 2013.igem.org
(12 intermediate revisions not shown) | |||
Line 14: | Line 14: | ||
***/ | ***/ | ||
- | |||
- | |||
- | |||
- | |||
#TopBar { | #TopBar { | ||
- | background: # | + | background: #231F20; |
width: 100%; | width: 100%; | ||
+ | min-width: 766px; | ||
height: 89px; | height: 89px; | ||
z-index: 10; | z-index: 10; | ||
Line 27: | Line 24: | ||
text-align: center; | text-align: center; | ||
top: 25px; | top: 25px; | ||
+ | } | ||
+ | |||
+ | #TopBar #TopLvlNavLink { | ||
+ | display: none; | ||
} | } | ||
#TopBar ul { | #TopBar ul { | ||
- | background: # | + | background: #231F20; |
list-style: none; | list-style: none; | ||
position: relative; | position: relative; | ||
Line 70: | Line 71: | ||
#TopBar ul ul { | #TopBar ul ul { | ||
display: none; | display: none; | ||
- | background: # | + | background: #231F20; |
- | padding: 0; | + | padding: 0 10px; |
position: absolute; | position: absolute; | ||
- | top: | + | top: 95%; |
z-index: 10; | z-index: 10; | ||
+ | margin-left: -10px; | ||
} | } | ||
Line 87: | Line 89: | ||
#TopBar ul ul a { | #TopBar ul ul a { | ||
- | font-size: | + | font-size: 18px; |
} | } | ||
Line 94: | Line 96: | ||
left: 100%; | left: 100%; | ||
top: 0; | 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 { | @-webkit-keyframes rotate { | ||
Line 104: | Line 116: | ||
to { | to { | ||
-webkit-transform: rotate(59deg); | -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); | ||
} | } | ||
} | } | ||
Line 117: | Line 147: | ||
padding: 8px 0; | padding: 8px 0; | ||
} | } | ||
- | + | ||
#TopBarCollapse { | #TopBarCollapse { | ||
+ | position: fixed; | ||
width: 120px; | width: 120px; | ||
height: 60px; | height: 60px; | ||
+ | top: 25px; | ||
background: orange; | background: orange; | ||
- | + | z-index: 10; | |
+ | } | ||
+ | |||
+ | #TopBarCollapse #TopLvlNavLink { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
} | } | ||
Line 140: | Line 178: | ||
content: ""; | content: ""; | ||
clear: both; | clear: both; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
display: block; | display: block; | ||
} | } | ||
Line 156: | Line 186: | ||
clear: both; | clear: both; | ||
width: 120px; | width: 120px; | ||
- | padding: | + | padding: 0; |
background: green; | background: green; | ||
} | } | ||
Line 168: | Line 198: | ||
display: block; | display: block; | ||
text-decoration: none; | text-decoration: none; | ||
+ | padding: 10px 15px; | ||
} | } | ||
#TopBarCollapse #LogoItem { | #TopBarCollapse #LogoItem { | ||
- | display: none; | + | display: none !important; |
- | } | + | } |
Latest revision as of 01:21, 20 May 2014
/*** 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
- /
- 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; }