Template:Team:Calgary/TopBarHome

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
/***
-
<head>
+
Name: Wm. Keith van der Meulen
-
<meta charset="utf-8">
+
Date: Summer 2013
-
<!-- saved from url=(0014)about:internet -->
+
Organization: University of Calgary iGEM Team 2013
-
+
-
<!-- Fonts -->
+
-
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
+
-
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
+
-
<!-- Stylesheets -->
+
---Purpose---
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet">
+
CSS code to define navigation stylings.
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Typography?action=raw&ctype=text/css" rel="stylesheet">
+
-------------
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Layout?action=raw&ctype=text/css" rel="stylesheet">
+
 
-
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css" rel="stylesheet">
+
Cite:
-
+
Wm. Keith van der Meulen
-
<!-- Reset for BodyContent -->
+
University of Calgary iGEM 2013
-
<style>
+
https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css
-
#content{
+
 
-
width: 1007px;
+
***/
-
padding: 0px 0px 0px 0px;
+
 
-
background-color:transparent;
+
/* Start: Style for making top bar */
-
border: none;
+
.TopBar * {
-
}
+
box-sizing: border-box;
-
+
-moz-box-sizing: border-box;
-
#bodyContent{
+
}
-
width: 1007px;
+
 
-
padding: 0px 0px 0px 0px;
+
.TopBar {
-
background-color:transparent;
+
display: inline-block;
-
border: none;
+
width: 100%;
-
}
+
padding: 0;
-
</style>
+
width: 100%;
-
+
min-width: 954px;
-
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+
margin-top: 5px;
-
<script src="Navigation.js"></script>
+
margin-bottom: -18px;
-
</head>
+
float: left;
 +
}
 +
 
 +
#HexLogo {
 +
float: left;
 +
margin-left: 44px;
 +
}
 +
 
 +
#HexLogo .HexL3 a {
 +
background: url(https://static.igem.org/mediawiki/2013/1/15/2013UCalgaryHexLogo.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(https://static.igem.org/mediawiki/2013/9/9d/2013UCalgaryUnderlineNav.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('https://static.igem.org/mediawiki/2013/3/39/2013UCalgaryUnderlineHome.png') center bottom;
 +
}
 +
 
 +
.TopBar #ProjectLink {
 +
background: url('https://static.igem.org/mediawiki/2013/2/26/2013UCalgaryUnderlineProject.png') center bottom;
 +
}
 +
 
 +
.TopBar #OurTeamLink {
 +
background: url('https://static.igem.org/mediawiki/2013/6/68/2013UCalgaryUnderlineOurTeam.png') center bottom;
 +
}
 +
 
 +
.TopBar #NotebookLink {
 +
background: url('https://static.igem.org/mediawiki/2013/7/7d/2013UCalgaryUnderlineNotebook.png') center bottom;
 +
}
 +
 
 +
.TopBar #OutreachLink {
 +
background: url('https://static.igem.org/mediawiki/2013/4/49/2013UCalgaryUnderlineOutreach.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;
 +
}
-
<body>
+
.TopBar li li a:hover {
-
<a name="PageTop"></a>
+
font-weight: bold;
 +
}
-
<nav class="TopBar">
+
.TopBar li li ul {
-
<div id="HexLogo"><div class="HexL1"><div class="HexL2"><div class="HexL3">
+
position: absolute;
-
<a href="https://2013.igem.org/Team:Calgary"></a>
+
left: 100%;
-
</div></div></div></div>
+
top: 0;
-
+
}
-
<ul>
+
 
-
<li id="HomeLink" class="HomeLink">
+
.TopBar li li li {
-
<a href="https://2013.igem.org/Team:Calgary">Home</a>
+
padding: 0;
-
</li>
+
}
-
<li class="ProjectLink">
+
/* End: Style for making top bar */
-
<a href="https://2013.igem.org/Team:Calgary/Project">Project</a>
+
 
-
<ul>
+
/* Start: Style for making sidebar */
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Tales">Tales</a>
+
.SideBar * {
-
<ul>
+
box-sizing: border-box;
-
<li><a href="#">Sub-Page</a></li>
+
-moz-box-sizing: border-box;
-
<li><a href="#">Sub-Page</a></li>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
</ul>
+
.SideBar {
-
</li>
+
margin: 5px 15px 5px 5px;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Ferritin">Ferritin</a>
+
padding: 0 0 25px 5px;
-
<ul>
+
width: 119px;
-
<li><a href="#">Sub-Page</a></li>
+
float: left;
-
<li><a href="#">Sub-Page</a></li>
+
clear: left;
-
<li><a href="#">Sub-Page</a></li>
+
}
-
</ul>
+
 
-
</li>
+
.HexL1 {
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Linker">Linker</a>
+
overflow: hidden;
-
<ul>
+
visibility: hidden;
-
<li><a href="#">Sub-Page</a></li>
+
width: 75px;
-
<li><a href="#">Sub-Page</a></li>
+
height: 87px;
-
<li><a href="#">Sub-Page</a></li>
+
-webkit-transform: rotate(120deg);
-
</ul>
+
-moz-transform: rotate(120deg);
-
</li>
+
-o-transform: rotate(120deg);
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Engineering">Engineering</a>
+
transform: rotate(120deg);
-
<ul>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
<li><a href="#">Sub-Page</a></li>
+
.HexL2 {
-
<li><a href="#">Sub-Page</a></li>
+
overflow: hidden;
-
</ul>
+
width: 100%;
-
</li>
+
height: 100%;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/HumanPractices">Human Practices</a>
+
-webkit-transform: rotate(-60deg);
-
<ul>
+
-moz-transform: rotate(-60deg);
-
<li><a href="#">Sub-Page</a></li>
+
-o-transform: rotate(-60deg);
-
<li><a href="#">Sub-Page</a></li>
+
transform: rotate(-60deg);
-
<li><a href="#">Sub-Page</a></li>
+
}
-
</ul>
+
 
-
</li>
+
.HexL3 {
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/References">References</a></li>
+
width: 100%;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Attribution">Attribution</a></li>
+
height: 100%;
-
<li><a href="https://2013.igem.org/Team:Calgary/Project/Sponsors">Sponsors</a></li>
+
-webkit-transform: rotate(-60deg);
-
</ul>
+
-moz-transform: rotate(-60deg);
-
</li>
+
-o-transform: rotate(-60deg);
-
<li class="OurTeamLink">
+
transform: rotate(-60deg);
-
<a href="https://2013.igem.org/Team:Calgary/OurTeam">Our Team</a>
+
}
-
<ul>
+
 
-
<li><a href="https://2013.igem.org/Team:Calgary/OurTeam/TeamMembers">Team Members</a></li>
+
.SideBar ul {
-
<li><a href="https://igem.org/Team.cgi?id=1189" target="_blank">Our Profile</a></li>
+
padding: 0;
-
<li><a href="https://2013.igem.org/Team:Calgary/OurTeam/TheUniversity">The University</a></li>
+
}
-
<li><a href="https://2013.igem.org/Team:Calgary/OurTeam/ContactUs">Contact Us</a></li>
+
 
-
</ul>
+
.SideBar li {
-
</li>
+
display: inline-block;
-
<li class="NotebookLink">
+
clear: both;
-
<a href="https://2013.igem.org/Team:Calgary/Notebook">Notebook</a>
+
position: relative;
-
<ul>
+
}
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal">Journal</a>
+
 
-
<ul>
+
.SideBar li:hover > ul {
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/TalesJournal">Tales</a></li>
+
display: block;
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/FerritinJournal">Ferritin</a></li>
+
}
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/LinkerJournal">Linker</a></li>
+
 
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/EngineeringJournal">Engineering</a></li>
+
.SideBar a {
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Journal/HumanPracticesJournal">Human Practices</a></li>
+
display: block;
-
</ul>
+
width: 100%;
-
</li>
+
height: 100%;
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a>
+
color: #FFFFFF;
-
<ul>
+
font: bold 12px Raleway, Helvetica, Arial, sans-serif;
-
<li><a href="#">Sub-Page</a></li>
+
text-align: center;
-
<li><a href="#">Sub-Page</a></li>
+
text-decoration: none;
-
<li><a href="#">Sub-Page</a></li>
+
-
</ul>
+
}
-
</li>
+
 
-
<li><a href="https://2013.igem.org/Team:Calgary/Notebook/Parts">Parts</a></li>
+
.SideBar .HexLink {
-
</ul>
+
padding: 37px 0 37px 0;
-
</li>
+
}
-
<li class="OutreachLink">
+
 
-
<a href="https://2013.igem.org/Team:Calgary/Outreach">Outreach</a>
+
.SideBar .HexLinkTwoLine {
-
<ul>
+
padding: 27px 0 27px 0;
-
<li><a href="#">Sub-Page</a></li>
+
}
-
<li><a href="#">Sub-Page</a></li>
+
 
-
<li><a href="#">Sub-Page</a></li>
+
.SideBar .HexLinkFirst a {
-
</ul>
+
font-size: 15px;
-
</li>
+
}
-
<li class="iGEMLink">
+
 
-
<a href="https://2013.igem.org" target="_blank">iGEM</a>
+
.SideBar li li a {
-
</li>
+
background: url(SubMenu.png) top;
-
</ul>
+
padding: 5px;
-
</nav>
+
color: #FFFFFF;
-
</body>
+
}
-
</html>
+
 
 +
.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 */

Revision as of 20:21, 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(2013UCalgaryHexLogo.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(2013UCalgaryUnderlineNav.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('https://static.igem.org/mediawiki/2013/3/39/2013UCalgaryUnderlineHome.png') center bottom; }

.TopBar #ProjectLink { background: url('https://static.igem.org/mediawiki/2013/2/26/2013UCalgaryUnderlineProject.png') center bottom; }

.TopBar #OurTeamLink { background: url('https://static.igem.org/mediawiki/2013/6/68/2013UCalgaryUnderlineOurTeam.png') center bottom; }

.TopBar #NotebookLink { background: url('https://static.igem.org/mediawiki/2013/7/7d/2013UCalgaryUnderlineNotebook.png') center bottom; }

.TopBar #OutreachLink { background: url('https://static.igem.org/mediawiki/2013/4/49/2013UCalgaryUnderlineOutreach.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/Template:Team:Calgary/TopBarHome"