Team:Calgary/StyleSheets/Navigation

From 2013.igem.org

(Difference between revisions)
Line 15: Line 15:
***/
***/
-
/* Start: Style for making drop down header*/
+
/* Start: Style for making top bar */
-
.NavMain * {
+
.TopBar * {
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-moz-box-sizing: border-box;
}
}
-
.NavMain {
+
.TopBar {
display: inline-block;
display: inline-block;
-
background: #000000;
 
width: 100%;
width: 100%;
-
padding: 0 auto;
+
padding: 0;
 +
width: 100%;
 +
min-width: 954px;
 +
margin-top: 5px;
 +
margin-bottom: -18px;
 +
float: left;
}
}
-
 
-
.NavMain ul {
 
-
list-style: none;
 
-
position: relative;
 
-
display: inline-table;
 
-
padding: 0;
 
-
margin-left: 173px;
 
-
}
 
-
.NavMain ul:after {
+
#HexLogo {
-
content: "";
+
float: left;
-
clear: both;
+
margin-left: 44px;
-
display: block;
+
}
-
}
+
-
.NavMain ul li {
+
#HexLogo .HexL3 a {
-
float: left;
+
background: url(HexLogo.png) 473A34 no-repeat;
-
padding: 0 5px;
+
visibility: visible;
-
}
+
display: block;
-
/* End: Style for making drop down header*/
+
width: 100%;
 +
height: 100%;
 +
}
-
/* Start: Style for making diagonal highlight*/
+
.TopBar ul {
-
#MainLinks {
+
list-style: none;
-
-webkit-transform: skew(-45deg);
+
position: relative;
-
-moz-transform: skew(-45deg);
+
display: inline-block;
-
-ms-transform: skew(-45deg);
+
padding: 0;
-
-o-transform: skew(-45deg);
+
margin-left: 25px;
-
transform: skew(-45deg);
+
}
-
}
+
-
+
-
#MainLinks a, #MainLinks ul {
+
-
-webkit-transform: skew(45deg);
+
-
-moz-transform: skew(45deg);
+
-
-ms-transform: skew(45deg);
+
-
-o-transform: skew(45deg);
+
-
transform: skew(45deg);
+
-
}
+
-
+
-
#MainLinks ul li a {
+
-
-webkit-transform: skew(0deg);
+
-
-moz-transform: skew(0deg);
+
-
-ms-transform: skew(0deg);
+
-
-o-transform: skew(0deg);
+
-
transform: skew(0deg);
+
-
}
+
-
+
-
#MainLinks ul ul {
+
-
-webkit-transform: skew(0deg);
+
-
-moz-transform: skew(0deg);
+
-
-ms-transform: skew(0deg);
+
-
-o-transform: skew(0deg);
+
-
transform: skew(0deg);
+
-
}
+
-
#MainLinks:hover {
+
.TopBar > ul {
-
background: #00FFFF;
+
background: url(UnderlineNav.png) no-repeat center bottom;
-
}
+
margin-top: 10px;
-
+
}
-
#MainLinks:hover > a {
+
-
color: #000000;
+
-
}
+
-
/* End: Style for making diagonal highlight*/
+
-
/* Start: Style for aligning sub-menus with header link*/
+
.TopBar ul:after {
-
#MainProjectNav {
+
content: "";
-
left: 176px;
+
clear: both;
-
}
+
display: block;
-
+
}
-
#MainTeamNav {
+
-
left: 88px;
+
-
}
+
-
+
-
#MainNotebookNav {
+
-
left: 66px;
+
-
}
+
-
+
-
#MainOutreachNav {
+
-
left: 66px;
+
-
}
+
-
/* End: Style for aligning sub-menus with header link*/
+
-
/* Start: Style for link attributes and sub-menu drop down links*/
+
.TopBar li {
-
.NavMain ul li a {
+
float: left;
-
display: block;
+
}
-
width: 159;
+
-
font: 20px 'Raleway', Helvetica, Arial, sans-serif;
+
-
text-decoration: none;
+
-
text-align: center;
+
-
color: #FFFFFF;
+
-
padding: 10px;
+
-
background: none;
+
-
}
+
-
+
-
.NavMain ul li:hover > ul {
+
-
display: block;
+
-
}
+
-
.NavMain ul ul {
+
.TopBar .ProjectLink > ul {
-
display: none;
+
left: 114px;
-
position: absolute;
+
}
-
top: 100%;
+
-
margin: 0;
+
-
}
+
-
+
-
.NavMain ul li:hover {
+
-
background: #00FFFF;
+
-
}
+
-
.NavMain ul li:hover > a {
+
.TopBar .OurTeamLink > ul {
-
color: #000000;
+
left: 264px;
-
}
+
}
-
+
-
.NavMain ul ul li:hover > a {
+
-
background: #00FFFF;
+
-
}
+
-
+
-
.NavMain ul ul li {
+
-
float: none;
+
-
position: relative;
+
-
width: 200px;
+
-
padding: 0;
+
-
}
+
-
+
-
.NavMain ul ul li a {
+
-
width: auto;
+
-
text-align: left;
+
-
background: #000000;
+
-
}
+
-
+
-
.NavMain ul ul li a:hover {
+
-
background: none;
+
-
}
+
-
+
-
.NavMain ul ul ul {
+
-
position: absolute;
+
-
left: 100%;
+
-
top: 0;
+
-
}
+
-
+
-
.NavMain ul ul ul li {
+
-
padding: 0;
+
-
}
+
-
+
-
.NavMain ul ul ul li:first-child {
+
-
margin-top: 0;
+
-
}
+
-
/* End: Style for link attributes*/
+
-
/* Start: Style for making sidebar */
+
.TopBar .NotebookLink > ul {
-
.NavSide * {
+
left: 427px;
-
box-sizing: border-box;
+
-
-moz-box-sizing: border-box;
+
}
}
-
.NavSide {
+
.TopBar .OutreachLink > ul {
-
background: #000000;
+
left: 587px;
-
width: 150px;
+
-
padding: 10px 0;
+
-
float: left;
+
-
margin: 0 20px 0 0;
+
}
}
 +
.TopBar #HomeLink {
 +
background: url('UnderlineHome.png') center bottom;
 +
}
-
.NavSide ul {
+
.TopBar #ProjectLink {
-
list-style-type: none;
+
background: url('UnderlineProject.png') center bottom;
-
padding: 0;
+
-
margin: 0;
+
}
}
-
.NavSide ul ul {
+
.TopBar #OurTeamLink {
-
padding-left: 15px;
+
background: url('UnderlineOurTeam.png') center bottom;
}
}
-
.NavSide ul ul li a {
+
.TopBar #NotebookLink {
-
font-size: 15px;
+
background: url('UnderlineNotebook.png') center bottom;
}
}
-
.NavSide ul li a {
+
.TopBar #OutreachLink {
 +
background: url('UnderlineOutreach.png') center bottom;
 +
}
 +
 
 +
.TopBar li a {
display: block;
display: block;
-
font: 18px 'Raleway';
+
font: 20px 'Raleway', Helvetica, Arial, sans-serif;
text-decoration: none;
text-decoration: none;
-
color: #FFFFFF;
+
text-align: center;
-
padding: 10px;
+
color: #00A78D;
 +
font-weight: bold;
 +
padding: 10px 34px;
background: none;
background: none;
}
}
-
.NavSide ul li:first-child a {
+
.TopBar > ul > li > a:hover {
-
font-size: 22px;
+
transform: scale(1.25);
 +
-webkit-transform: scale(1.25);
 +
-moz-transform: scale(1.25);
 +
-o-transform: scale(1.25);
 +
-ms-transform: scale(1.25);
}
}
-
.NavSide ul ul li:first-child a {
+
.TopBar li ul {
-
font-size: 15px;
+
display: none;
 +
position: absolute;
 +
top: 100%;
 +
margin: 0;
 +
background: #473A34;
}
}
-
.NavSide ul li a:hover {
+
.TopBar li:hover > ul {
-
background: #00FFFF;
+
display: block;
-
color: #000000;
+
}
}
-
/* End: Style for making sidebar */
 
-
/* Start: Style for week selector */
+
.TopBar li li {
-
/*
+
float: none;
-
.NavWeek * {
+
position: relative;
 +
width: 160px;
 +
padding: 0;
 +
}
 +
 
 +
.TopBar li li a {
 +
width: 100%;
 +
color: #FFFFFF;
 +
font-weight: normal;
 +
padding: 10px 20px;
 +
}
 +
 +
.TopBar li li a:hover {
 +
font-weight: bold;
 +
}
 +
 +
.TopBar li li ul {
 +
position: absolute;
 +
left: 100%;
 +
top: 0;
 +
}
 +
 
 +
.TopBar li li li {
 +
padding: 0;
 +
}
 +
/* End: Style for making top bar */
 +
 
 +
/* Start: Style for making sidebar */
 +
.SideBar * {
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-moz-box-sizing: border-box;
}
}
-
.NavWeek table {
+
.SideBar {
-
border-collapse: collapse;
+
margin: 5px 15px 5px 5px;
-
background: #000000;
+
padding: 0 0 25px 5px;
 +
width: 119px;
 +
float: left;
 +
clear: left;
}
}
-
.NavWeek td {
+
.HexL1 {
-
width: 100px;
+
overflow: hidden;
-
text-align: center;
+
visibility: hidden;
-
vertical-align: middle;
+
width: 75px;
-
color: #FFFFFF;
+
height: 87px;
 +
-webkit-transform: rotate(120deg);
 +
-moz-transform: rotate(120deg);
 +
-o-transform: rotate(120deg);
 +
transform: rotate(120deg);
}
}
-
.NavWeek ul {
+
.HexL2 {
-
list-style-type: none;
+
overflow: hidden;
-
margin: 0;
+
width: 100%;
 +
height: 100%;
 +
-webkit-transform: rotate(-60deg);
 +
-moz-transform: rotate(-60deg);
 +
-o-transform: rotate(-60deg);
 +
transform: rotate(-60deg);
 +
}
 +
 
 +
.HexL3 {
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transform: rotate(-60deg);
 +
-moz-transform: rotate(-60deg);
 +
-o-transform: rotate(-60deg);
 +
transform: rotate(-60deg);
 +
}
 +
 
 +
.SideBar ul {
padding: 0;
padding: 0;
}
}
-
.NavWeek a {
+
.SideBar li {
 +
display: inline-block;
 +
clear: both;
 +
position: relative;
 +
}
 +
 
 +
.SideBar li:hover > ul {
 +
display: block;
 +
}
 +
 
 +
.SideBar a {
 +
display: block;
 +
width: 100%;
 +
height: 100%;
color: #FFFFFF;
color: #FFFFFF;
 +
font: bold 12px Raleway, Helvetica, Arial, sans-serif;
 +
text-align: center;
text-decoration: none;
text-decoration: none;
-
font-size: 18px;
+
-
display: block;
+
}
 +
 
 +
.SideBar .HexLink {
 +
padding: 37px 0 37px 0;
 +
}
 +
 
 +
.SideBar .HexLinkTwoLine {
 +
padding: 27px 0 27px 0;
 +
}
 +
 
 +
.SideBar .HexLinkFirst a {
 +
font-size: 15px;
 +
}
 +
 
 +
.SideBar li li a {
 +
background: url(SubMenu.png) top;
padding: 5px;
padding: 5px;
 +
color: #FFFFFF;
}
}
-
.NavWeek a:hover {
+
.SideBar li li a:hover {
-
color: #000000;
+
background-position: bottom;
-
background: #00FFFF;
+
}
-
}
+
-
.NavWeek b {
+
.SideBar li li {
-
font-size: 20px;
+
width: 152px;
-
font-weight: bold;
+
height: 30px;
 +
margin-bottom: 5px;
}
}
-
*/
+
 
-
/* End: Style for week selector */
+
.SideBar li li:last-of-type {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.SideBar li ul {
 +
display: none;
 +
position: relative;
 +
top: -15px;
 +
left: 55px;
 +
}
 +
 
 +
.SideBar .HexBox {
 +
margin-bottom: -17px;
 +
}
 +
 
 +
.SideBar .HexBoxList:hover {
 +
margin-bottom: -7px;
 +
}
 +
 
 +
.SideBar .HexBox:nth-of-type(even) {
 +
margin-left: 38px;
 +
}
 +
 
 +
.SideBar .HexL3 a {
 +
background: #00A78D;
 +
visibility: visible;
 +
}
 +
 
 +
.SideBar > ul > li:hover > div > div > div > a {
 +
background: #66CABA;
 +
}
 +
/* End: Style for making sidebar */

Revision as of 20:05, 12 July 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

      • /

/* Start: Style for making top bar */ .TopBar * { box-sizing: border-box; -moz-box-sizing: border-box; }

.TopBar { display: inline-block; width: 100%; padding: 0; width: 100%; min-width: 954px; margin-top: 5px; margin-bottom: -18px; float: left; }

  1. HexLogo {

float: left; margin-left: 44px; }

  1. HexLogo .HexL3 a {

background: url(HexLogo.png) 473A34 no-repeat; visibility: visible; display: block; width: 100%; height: 100%; }

.TopBar ul { list-style: none; position: relative; display: inline-block; padding: 0; margin-left: 25px; }

.TopBar > ul { background: url(UnderlineNav.png) no-repeat center bottom; margin-top: 10px; }

.TopBar ul:after { content: ""; clear: both; display: block; }

.TopBar li { float: left; }

.TopBar .ProjectLink > ul { left: 114px; }

.TopBar .OurTeamLink > ul { left: 264px; }

.TopBar .NotebookLink > ul { left: 427px; }

.TopBar .OutreachLink > ul { left: 587px; }

.TopBar #HomeLink { background: url('UnderlineHome.png') center bottom; }

.TopBar #ProjectLink { background: url('UnderlineProject.png') center bottom; }

.TopBar #OurTeamLink { background: url('UnderlineOurTeam.png') center bottom; }

.TopBar #NotebookLink { background: url('UnderlineNotebook.png') center bottom; }

.TopBar #OutreachLink { background: url('UnderlineOutreach.png') center bottom; }

.TopBar li a { display: block; font: 20px 'Raleway', Helvetica, Arial, sans-serif; text-decoration: none; text-align: center; color: #00A78D; font-weight: bold; padding: 10px 34px; background: none; }

.TopBar > ul > li > a:hover { transform: scale(1.25); -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); }

.TopBar li ul { display: none; position: absolute; top: 100%; margin: 0; background: #473A34; }

.TopBar li:hover > ul { display: block; }

.TopBar li li { float: none; position: relative; width: 160px; padding: 0; }

.TopBar li li a { width: 100%; color: #FFFFFF; font-weight: normal; padding: 10px 20px; }

.TopBar li li a:hover { font-weight: bold; }

.TopBar li li ul { position: absolute; left: 100%; top: 0; }

.TopBar li li li { padding: 0; } /* End: Style for making top bar */

/* Start: Style for making sidebar */ .SideBar * { box-sizing: border-box; -moz-box-sizing: border-box; }

.SideBar { margin: 5px 15px 5px 5px; padding: 0 0 25px 5px; width: 119px; float: left; clear: left; }

.HexL1 { overflow: hidden; visibility: hidden; width: 75px; height: 87px; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); }

.HexL2 { overflow: hidden; width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); }

.HexL3 { width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); }

.SideBar ul { padding: 0; }

.SideBar li { display: inline-block; clear: both; position: relative; }

.SideBar li:hover > ul { display: block; }

.SideBar a { display: block; width: 100%; height: 100%; color: #FFFFFF; font: bold 12px Raleway, Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;

}

.SideBar .HexLink { padding: 37px 0 37px 0; }

.SideBar .HexLinkTwoLine { padding: 27px 0 27px 0; }

.SideBar .HexLinkFirst a { font-size: 15px; }

.SideBar li li a { background: url(SubMenu.png) top; padding: 5px; color: #FFFFFF; }

.SideBar li li a:hover { background-position: bottom; }

.SideBar li li { width: 152px; height: 30px; margin-bottom: 5px; }

.SideBar li li:last-of-type { margin-bottom: 0; }

.SideBar li ul { display: none; position: relative; top: -15px; left: 55px; }

.SideBar .HexBox { margin-bottom: -17px; }

.SideBar .HexBoxList:hover { margin-bottom: -7px; }

.SideBar .HexBox:nth-of-type(even) { margin-left: 38px; }

.SideBar .HexL3 a { background: #00A78D; visibility: visible; }

.SideBar > ul > li:hover > div > div > div > a { background: #66CABA; } /* End: Style for making sidebar */

Retrieved from "http://2013.igem.org/Team:Calgary/StyleSheets/Navigation"