Template:CalgaryMenu

From 2011.igem.org

(Difference between revisions)
(Created page with "<html> <head> <script type="text/javascript"> // Copyright 2006-2007 javascript-array.com var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hi...")
 
(17 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<head>
<head>
-
<script type="text/javascript">
+
<style>
 +
/***Master styling of text components, because we like consistency***/
-
// Copyright 2006-2007 javascript-array.com
+
h1, h2, h3, h4, h5, p, a{
 +
text-decoration: none;
 +
border: 0;
 +
font-family: Arial;
 +
}
-
var timeout = 500;
+
#sidetext a, #sidetext p, #sidetext li a{
-
var closetimer = 0;
+
color: white;
-
var ddmenuitem = 0;
+
font-family: Arial;
 +
}
-
// open hidden layer
 
-
function mopen(id)
 
-
{
 
-
// cancel close timer
 
-
mcancelclosetime();
 
-
 
-
// close old layer
 
-
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
-
 
-
// get new layer and show it
 
-
ddmenuitem = document.getElementById(id);
 
-
ddmenuitem.style.visibility = 'visible';
 
-
 
-
}
 
-
// close showed layer
 
-
function mclose()
 
-
{
 
-
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 
-
}
 
-
 
-
// go close timer
 
-
function mclosetime()
 
-
{
 
-
closetimer = window.setTimeout(mclose, timeout);
 
-
}
 
-
 
-
// cancel close timer
 
-
function mcancelclosetime()
 
-
{
 
-
if(closetimer)
 
-
{
 
-
window.clearTimeout(closetimer);
 
-
closetimer = null;
 
-
}
 
-
}
 
-
// close layer when click-out
+
/***End master styling***/
-
document.onclick = mclose;
+
-
</script>
+
/***
 +
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
-
<style>
+
Thanks a lot to the 2011 Brown-Stanford iGEM team for snippets of their code!
 +
Check out their wiki at https://2011.igem.org/Team:Brown-Stanford
 +
***/
-
body{
+
div#top-section{ /*the div containing the entire top bar*/
-
background-color: #808080;
+
height: 20px;
-
}
+
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
margin-top: -14px;
 +
padding:0px 0px 0px 0px;;
 +
border: none;
 +
width: 100%;
 +
background: none;
 +
color: black;
 +
position:absolute;
 +
}
-
p {
+
#p-logo { /*the header image*/
-
font-family: Verdana, sans-serif;
+
height:0px;
-
}
+
overflow:hidden;
 +
border:none;
 +
}
-
a {
+
#content{
-
font-family: Verdana, sans-serif;
+
margin-top: 14px;
-
}
+
}
-
li{
+
#search-controls {
-
font-family: Verdana, sans-serif;
+
overflow:hidden;
-
}
+
display:none;
 +
background: none;
 +
position: absolute;
 +
top: 170px;
 +
right: 40px;
 +
}  
-
h2{
 
-
color:#0066CC;
 
-
}
 
-
h4{
+
div#header {
-
color:#003366;
+
width: 975px;
-
}
+
text-align: left;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
}  
 +
#menubar {
 +
position: absolute;
 +
background: none;
 +
color: black;
 +
}
-
img.bannerImage{
+
.left-menu, .right-menu{
-
margin-top: -56px;
+
position: absolute;
-
margin-left: -5px;
+
background: none;
-
z-index: 0;
+
color: white;
-
}
+
}
 +
.left-menu li, .right-menu li a {
 +
color: transparent !important;
 +
}
-
div.menuBar{
 
-
margin-left: -5px;
 
-
width: 920px;
 
-
height: 25px;
 
-
margin-bottom: 20px;
 
-
margin-top: -45px;
 
-
float: left;
 
-
}
 
 +
.left-menu ul li, .right-menu ul li a{
 +
background: none;
 +
color: white;
 +
}
-
#nav {
+
.right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
-
margin: 0;
+
    color: white !important;
-
padding: 0;
+
}
-
z-index: 30;
+
-
position: relative;
+
-
}
+
-
+
-
#nav li {
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style: none;
+
-
float: left;
+
-
font: bold 12px verdana;
+
-
}
+
-
#nav li a {
+
/***End minimal header***/
-
display: block;
+
-
margin: 0 0 0 0;
+
-
padding: 6px 10px;
+
-
width: 82px;
+
-
background: #8bff35;
+
-
color: #000;
+
-
text-align: center;
+
-
text-decoration: none;
+
-
border-right: 2px solid #131313;
 
-
}
 
-
#nav li .menuend{
+
/***Now for our own stuff: personalized header images and navbar***/
-
border-right: 2px solid #8bff35;
+
-
width: 66px;
+
-
}
+
 +
#headerbar{
 +
margin-left: -5px;
 +
}
-
#nav li a:hover {
+
/*div containing menu bar*/
-
color: #FFF;
+
ul#topnav{
-
}
+
margin: 0; padding: 0;
 +
float: left;
 +
width: 975px;
 +
height: 35px;
 +
list-style: none;
 +
position: relative;
 +
font-size: 1.2em;
 +
background-image: url(https://static.igem.org/mediawiki/2011/7/7b/UCalgary_NavRepeater.png);
 +
background-repeat: repeat-x;
 +
margin-top: -60px; /*moves the bar up into the header image*/
 +
}
-
#nav div {
+
ul#topnav a.navtext{
-
position: absolute;
+
float: left;
-
visibility: hidden;
+
display: block;
-
margin: 0;
+
height: 35px;
-
padding: 0;
+
text-indent: -99999px;
-
background: #131313;
+
background-position: left top;
-
}
+
}
-
#nav div a {
+
ul#topnav li{
-
position: relative;
+
float: left;
-
display: block;
+
margin: 0;
-
margin: 0;
+
padding: 0;
-
padding: 5px 10px;
+
}
-
width: 150px;
+
-
white-space: nowrap;
+
-
text-align: left;
+
-
text-decoration: none;
+
-
left: -2px;
+
ul#topnav li a{
-
background: #8bff35;
+
padding: 0;
-
color: #000;
+
display: block;
-
font: 12px Verdana;
+
color: #f0f0f0;
-
border-left: 2px solid #131313;
+
text-decoration: none;
-
border-right: 3px solid #8bff35;
+
}
-
}
+
-
#nav div a:hover {
+
ul#topnav li:hover{
-
background: #8bff35;
+
background-position: left bottom;
-
color: #FFF;
+
}
-
border-left: 2px solid #131313;
+
-
border-right: 3px solid #8bff35;
+
-
}
+
-
</style>
+
ul#topnav a:hover{
-
</head>
+
background-position: left bottom;
 +
}
 +
ul#topnav li span{
 +
float: left;
 +
padding: 5px 0;
 +
position: absolute;
 +
left: 0; top: 35px;
 +
display: none; /*Default hidden*/
 +
width: 975px;
 +
background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SubNavRepeater.png);
 +
background-repeat: repeat-x;
 +
color: black;
 +
}
-
<body>
+
/*Establish sprites for each individual button*/
 +
#homebutton a{
 +
margin-left: 60px; /*to center the bar*/
 +
background-image: url(https://static.igem.org/mediawiki/2011/2/21/UCalgary_ButtonHome.png);
 +
width: 112px;
 +
}
 +
#teambutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/1/1e/UCalgary_ButtonTeam.png);
 +
width: 103px;
 +
}
 +
#projectbutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/9/90/UCalgary_ButtonProject.png);
 +
width: 118px;
 +
}
-
<img src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Header4.png" class="bannerImage" title="University of Calgary iGEM Team 2010"></img>
+
#partsbutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/c/c5/UCalgary_ButtonParts.png);
 +
width: 100px;
 +
}
-
<div class="menuBar">
+
#notebookbutton a{
-
<ul id="nav">
+
background-image: url(https://static.igem.org/mediawiki/2011/e/eb/UCalgary_ButtonNotebook.png);
 +
width: 143px;
 +
}
-
<li>
+
#outreachbutton a{
-
<a href="https://2010.igem.org/Team:Calgary"
+
background-image: url(https://static.igem.org/mediawiki/2011/5/52/UCalgary_ButtonOutreach.png);
-
onmouseover="mopen('m1')"
+
width: 140px;
-
onmouseout="mclosetime()">
+
}
-
Home</a>
+
-
</li>
+
-
<li>
+
#sponsorsbutton a{
-
<a href="https://2010.igem.org/Team:Calgary/Team"
+
background-image: url(https://static.igem.org/mediawiki/2011/b/b3/UCalgary_ButtonSponsors.png);
-
onmouseover="mopen('m2')"
+
width: 138px;
-
onmouseout="mclosetime()">
+
}
-
Team</a>
+
-
<div id="m2"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://igem.org/Team.cgi?year=2010&team_name=Calgary">Official Team Profile</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Team/Biographies">Biographies</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Team/Facilitators">Facilitators</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Team/About_The_University">About the University</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Team/Acknowledgements">Acknowledgements</a>
+
-
</div>
+
-
</li>
+
-
<li>
+
/*Correction of subnavigation menu backgrounds*/
-
<a href="https://2010.igem.org/Team:Calgary/Project"
+
ul#topnav li#teambutton span a,
-
onmouseover="mopen('m3')"
+
ul#topnav li#projectbutton span a,
-
onmouseout="mclosetime()">
+
ul#topnav li#partsbutton span a,
-
Project</a>
+
ul#topnav li#notebookbutton span a,
-
<div id="m3"
+
ul#topnav li#outreachbutton span a,
-
onmouseover="mcancelclosetime()"
+
ul#topnav li#sponsorsbutton span a{
-
onmouseout="mclosetime()">
+
height: 35px;
-
<a href="https://2010.igem.org/Team:Calgary/Project">Overview</a>
+
background-image: none;
-
<a href="https://2010.igem.org/Team:Calgary/Project/Transcription">Transcription/Translation</a>
+
color: #3c3d3d;
-
<a href="https://2010.igem.org/Team:Calgary/Project/misfolding_overview">Protein Misfolding</a>
+
font-family: Arial;
-
<a href="https://2010.igem.org/Team:Calgary/Project/Controls">Testing Our System</a>
+
font-size: 1.1em;
-
<a href="https://2010.igem.org/Team:Calgary/Project/Achievements">Achievements</a>
+
font-weight: 300;
 +
}
-
</div>
+
ul#topnav li span a{
-
</li>
+
display: inline; /*correction of previous link style*/
-
+
background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SubNavRepeater.png);
 +
background-repeat: repeat-x;
 +
padding-left: 9px;
 +
padding-right: 9px;
 +
}
-
<li><a href="https://2010.igem.org/Team:Calgary/Parts/Parts_Submitted"
+
/*Rollover settings*/
-
onmouseover="mopen('m4')"
+
ul#topnav li:hover span{
-
onmouseout="mclosetime()">
+
display: block;
-
Parts</a>
+
z-index: 999;
-
<div id="m4"
+
}
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2010.igem.org/Team:Calgary/Parts/Parts_Submitted">Parts Submitted</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Parts/Characterization">Characterization</a>
+
-
</div>
+
-
</li>
+
 +
ul#topnav li span a:hover{
 +
text-decoration: underline;
 +
}
-
<li><a href="https://2010.igem.org/Team:Calgary/Notebook"
+
/*Active state settings*/
-
onmouseover="mopen('m5')"
+
#home li#homebutton a,
-
onmouseout="mclosetime()">
+
#team li#teambutton a,
-
Notebook</a>
+
#project li#projectbutton a,
-
<div id="m5"
+
#parts li#partsbutton a,
-
onmouseover="mcancelclosetime()"
+
#notebook li#notebookbutton a,
-
onmouseout="mclosetime()">
+
#outreach li#outreachbutton a,
-
<a href="https://2010.igem.org/Team:Calgary/Notebook/Calendar">Calendar</a>
+
#sponsors li#sponsorsbutton a{
-
<a href="https://2010.igem.org/Team:Calgary/Notebook/Future_Directions">Future Directions</a>
+
background-position: left bottom;
-
<a href="https://2010.igem.org/Team:Calgary/Notebook/Safety_And_Protocols">Protocols</a>
+
}
-
<a href="https://2010.igem.org/Team:Calgary/Notebook/Safety">Safety</a>
+
-
</div>
+
-
</li>
+
-
<li><a href="https://2010.igem.org/Team:Calgary/Modelling"
+
#team li#teambutton span,
-
onmouseover="mopen('m6')"
+
#project li#projectbutton span,
-
onmouseout="mclosetime()">
+
#parts li#partsbutton span,
-
Modelling</a>
+
#notebook li#notebookbutton span,
-
<div id="m6"
+
#outreach li#outreachbutton span,
-
onmouseover="mcancelclosetime()"
+
#sponsors li#sponsorsbutton span{
-
onmouseout="mclosetime()">
+
display: block;
-
<a href="https://2010.igem.org/Team:Calgary/Modelling/MATLAB">MATLAB</a>
+
}
-
<a href="https://2010.igem.org/Team:Calgary/Modelling/Maya">Animation</a>
+
-
</div>
+
-
</li>
+
 +
/***End menu stuff. Onto the rest of the header!***/
-
<li><a href="https://2010.igem.org/Team:Calgary/Community"
+
#headbanner{
-
onmouseover="mopen('m7')"
+
margin-left: -5px;
-
onmouseout="mclosetime()">
+
margin-top: -38px;
-
Community</a>
+
}
-
<div id="m7"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2010.igem.org/Team:Calgary/Community/Ethics">Ethics/Human Practices</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Community/Gallery">Gallery</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Community/Conferences">Conferences</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Community/Suffield">DRDC Suffield</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Community/Podcasts">Podcasts</a>
+
-
<a href="https://2010.igem.org/Team:Calgary/Community/Blog">Visit Our Blog!</a>
+
-
</div>
+
-
</li>
+
-
<li><a href="https://2010.igem.org/Team:Calgary/Sponsors">Sponsors</a></li>
+
#fb-button{
 +
position: absolute;
 +
margin-left: 872px;
 +
margin-top: -170px;
 +
}
-
<li><a class="menuend" href="https://2010.igem.org/Team:Calgary/Extras">Extras</a></li>
+
#twitter-button{
 +
position: absolute;
 +
margin-left: 898px;
 +
margin-top: -170px;
 +
}
-
</ul>
+
#backhome{
 +
color: #07304f;
 +
font-family: Arial;
 +
font-size: 1em;
 +
position: absolute;
 +
margin-left: 755px;
 +
margin-top: -190px;
 +
}
 +
#backhome:hover{
 +
text-decoration: none;
 +
}
-
</div>
+
/*...Not much, was there.*/
-
+
</style>
 +
</head>
 +
 +
<body id="</html>{{{1}}}<html>">
 +
 +
<a href="https://2011.igem.org/Team:Calgary"><img id="headbanner" src="https://static.igem.org/mediawiki/2011/2/25/UCalgary_HeaderImage.png"></img></a>
 +
<a href="https://www.facebook.com/pages/Calgary-iGEM/215971681759173"><img id="fb-button" src="https://static.igem.org/mediawiki/2011/d/d8/UCalgary_FacebookF.png"></img></a>
 +
<a href="http://www.twitter.com/iGEMCalgary"><img id="twitter-button" src="https://static.igem.org/mediawiki/2011/4/4e/UCalgary_TwitterT.png"></img></a>
 +
<a id="backhome" href="https://2011.igem.org"><img src="https://static.igem.org/mediawiki/2011/b/b3/UCalgary_IGEM_official_logo.png"></img></a>
 +
 +
 +
<div id="headerbar">
 +
<ul id="topnav">
 +
<li id="homebutton"><a class="navtext" href="https://2011.igem.org/Team:Calgary">Home</a></li>
 +
<li id="teambutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Team">Team</a>
 +
<span>
 +
<a href="https://2011.igem.org/Team:Calgary/Team/Biographies">Biographies</a> |
 +
<a href="https://2011.igem.org/Team:Calgary/Team/Facilitators">Facilitators</a> |
 +
<a href="https://2011.igem.org/Team:Calgary/Team/About_The_University">The University</a> |
 +
<a href="https://igem.org/Team.cgi?id=640">Official Profile</a> |
 +
</span>
 +
</li>
 +
<li id="projectbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Project">Project</a>
 +
<span>
 +
<a href="#">Overview</a> |
 +
<a href="#">Project Pseudomonas</a> |
 +
<a href="#">Project Electro</a> |
 +
<a href="#">Project Algae</a> |
 +
<a href="#">Software Tools</a> |
 +
<a href="#">Future Directions</a> |
 +
</span>
 +
</li>
 +
<li id="partsbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Parts">Parts</a>
 +
<span>
 +
<a href="#">Parts Submitted</a> |
 +
<a href="#">Characterization</a> |
 +
</span>
 +
</li>
 +
<li id="notebookbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Notebook">Notebook</a>
 +
<span>
 +
<a href="#">Calendar</a> |
 +
<a href="#">Protocols</a> |
 +
<a href="https://2011.igem.org/Team:Calgary/Safety">Safety</a> |
 +
</span>
 +
</li>
 +
<li id="outreachbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Outreach">Outreach</a>
 +
<span>
 +
<a href="#">Human Practices</a> |
 +
<a href="#">Conferences</a> |
 +
<a href="#">Forum</a> |
 +
<a href="#">Follow Us!</a> |
 +
</span>
 +
</li>
 +
<li id="sponsorsbutton">
 +
<a class="navtext" href="https://2011.igem.org/Team:Calgary/Sponsors">Sponsors</a>
 +
<span>
 +
<a href="#">Sponsors</a> |
 +
<a href="#">Acknowledgements</a> |
 +
</span>
 +
</li>
 +
 +
</ul>
 +
</div>
</body>
</body>
 +
</html>
</html>

Latest revision as of 17:24, 27 July 2011

Retrieved from "http://2011.igem.org/Template:CalgaryMenu"