Template:Team:Calgary/TopBarHome

From 2013.igem.org

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

Retrieved from "http://2013.igem.org/Template:Team:Calgary/TopBarHome"