Template:CalgaryMenu

From 2011.igem.org

(Difference between revisions)
 
(8 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***/
-
var timeout = 500;
+
h1, h2, h3, h4, h5, p, a{
-
var closetimer = 0;
+
text-decoration: none;
-
var ddmenuitem = 0;
+
border: 0;
 +
font-family: Arial;
 +
}
-
// open hidden layer
+
#sidetext a, #sidetext p, #sidetext li a{
-
function mopen(id)
+
color: white;
-
{
+
font-family: Arial;
-
mcancelclosetime();
+
}
-
+
-
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
 
-
document.onclick = mclose;
 
-
</script>
+
/***End master styling***/
-
<style>
+
/***
 +
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
-
body{
+
Thanks a lot to the 2011 Brown-Stanford iGEM team for snippets of their code!
-
background-color: #808080;
+
Check out their wiki at https://2011.igem.org/Team:Brown-Stanford
-
}
+
***/
-
p {
+
div#top-section{ /*the div containing the entire top bar*/
-
font-family: Verdana, sans-serif;
+
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;
 +
}
-
a {
+
#p-logo { /*the header image*/
-
font-family: Verdana, sans-serif;
+
height:0px;
-
}
+
overflow:hidden;
 +
border:none;
 +
}
-
li{
+
#content{
-
font-family: Verdana, sans-serif;
+
margin-top: 14px;
-
}
+
}
-
h2{
+
#search-controls {
-
color:#0066CC;
+
overflow:hidden;
-
}
+
display:none;
 +
background: none;
 +
position: absolute;
 +
top: 170px;
 +
right: 40px;
 +
}  
-
h4{
 
-
color:#003366;
 
-
}
 
 +
div#header {
 +
width: 975px;
 +
text-align: left;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
} 
-
img.bannerImage{
+
#menubar {
-
margin-top: -56px;
+
position: absolute;
-
margin-left: -5px;
+
background: none;
-
z-index: 0;
+
color: black;
-
}
+
}
 +
.left-menu, .right-menu{
 +
position: absolute;
 +
background: none;
 +
color: white;
 +
}
-
div.menuBar{
+
.left-menu li, .right-menu li a {
-
margin-left: -5px;
+
color: transparent !important;
-
width: 920px;
+
}
-
height: 25px;
+
-
margin-bottom: 20px;
+
-
margin-top: -45px;
+
-
float: left;
+
-
}
+
-
#nav {
+
.left-menu ul li, .right-menu ul li a{
-
margin: 0;
+
background: none;
-
padding: 0;
+
color: white;
-
z-index: 30;
+
}
-
position: relative;
+
-
}
+
-
+
-
#nav li {
+
-
margin: 0;
+
-
padding: 0;
+
-
list-style: none;
+
-
float: left;
+
-
font: bold 12px verdana;
+
-
}
+
-
#nav li a {
+
.right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
-
display: block;
+
    color: white !important;
-
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;
+
/***End minimal header***/
-
}
+
-
#nav li .menuend{
 
-
border-right: 2px solid #8bff35;
 
-
width: 66px;
 
-
}
 
 +
/***Now for our own stuff: personalized header images and navbar***/
-
#nav li a:hover {
+
#headerbar{
-
color: #FFF;
+
margin-left: -5px;
-
}
+
}
-
#nav div {
+
/*div containing menu bar*/
-
position: absolute;
+
ul#topnav{
-
visibility: hidden;
+
margin: 0; padding: 0;
-
margin: 0;
+
float: left;
-
padding: 0;
+
width: 975px;
-
background: #131313;
+
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 a {
+
ul#topnav a.navtext{
-
position: relative;
+
float: left;
-
display: block;
+
display: block;
-
margin: 0;
+
height: 35px;
-
padding: 5px 10px;
+
text-indent: -99999px;
-
width: 150px;
+
background-position: left top;
-
white-space: nowrap;
+
}
-
text-align: left;
+
-
text-decoration: none;
+
-
left: -2px;
+
ul#topnav li{
-
background: #8bff35;
+
float: left;
-
color: #000;
+
margin: 0;
-
font: 12px Verdana;
+
padding: 0;
-
border-left: 2px solid #131313;
+
}
-
border-right: 3px solid #8bff35;
+
-
}
+
-
#nav div a:hover {
+
ul#topnav li a{
-
background: #8bff35;
+
padding: 0;
-
color: #FFF;
+
display: block;
-
border-left: 2px solid #131313;
+
color: #f0f0f0;
-
border-right: 3px solid #8bff35;
+
text-decoration: none;
-
}
+
}
-
</style>
+
ul#topnav li:hover{
-
</head>
+
background-position: left bottom;
 +
}
 +
ul#topnav a:hover{
 +
background-position: left bottom;
 +
}
-
<body>
+
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;
 +
}
 +
/*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;
 +
}
-
<img src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Header4.png" class="bannerImage" title="University of Calgary iGEM Team 2010"></img>
+
#projectbutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/9/90/UCalgary_ButtonProject.png);
 +
width: 118px;
 +
}
-
<div class="menuBar">
+
#partsbutton a{
-
<ul id="nav">
+
background-image: url(https://static.igem.org/mediawiki/2011/c/c5/UCalgary_ButtonParts.png);
 +
width: 100px;
 +
}
-
<li>
+
#notebookbutton a{
-
<a href="https://2011.igem.org/Team:Calgary"
+
background-image: url(https://static.igem.org/mediawiki/2011/e/eb/UCalgary_ButtonNotebook.png);
-
onmouseover="mopen('m1')"
+
width: 143px;
-
onmouseout="mclosetime()">
+
}
-
Home</a>
+
-
</li>
+
-
<li>
+
#outreachbutton a{
-
<a href="https://2011.igem.org/Team:Calgary/Team"
+
background-image: url(https://static.igem.org/mediawiki/2011/5/52/UCalgary_ButtonOutreach.png);
-
onmouseover="mopen('m2')"
+
width: 140px;
-
onmouseout="mclosetime()">
+
}
-
Team</a>
+
-
<div id="m2"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://igem.org/Team.cgi?id=640">Official Team Profile</a>
+
-
<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">About the University</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Team/Acknowledgements">Acknowledgements</a>
+
-
</div>
+
-
</li>
+
-
<li>
+
#sponsorsbutton a{
-
<a href="https://2011.igem.org/Team:Calgary/Project"
+
background-image: url(https://static.igem.org/mediawiki/2011/b/b3/UCalgary_ButtonSponsors.png);
-
onmouseover="mopen('m3')"
+
width: 138px;
-
onmouseout="mclosetime()">
+
}
-
Project</a>
+
-
<div id="m3"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Project">Overview</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/Transcription">Transcription/Translation</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/misfolding_overview">Protein Misfolding</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/Controls">Testing Our System</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Project/Achievements">Achievements</a>
+
-
</div>
+
/*Correction of subnavigation menu backgrounds*/
-
</li>
+
ul#topnav li#teambutton span a,
-
+
ul#topnav li#projectbutton span a,
 +
ul#topnav li#partsbutton span a,
 +
ul#topnav li#notebookbutton span a,
 +
ul#topnav li#outreachbutton span a,
 +
ul#topnav li#sponsorsbutton span a{
 +
height: 35px;
 +
background-image: none;
 +
color: #3c3d3d;
 +
font-family: Arial;
 +
font-size: 1.1em;
 +
font-weight: 300;
 +
}
-
<li><a href="https://2011.igem.org/Team:Calgary/Parts/Parts_Submitted"
+
ul#topnav li span a{
-
onmouseover="mopen('m4')"
+
display: inline; /*correction of previous link style*/
-
onmouseout="mclosetime()">
+
background-image: url(https://static.igem.org/mediawiki/2011/6/69/UCalgary_SubNavRepeater.png);
-
Parts</a>
+
background-repeat: repeat-x;
-
<div id="m4"
+
padding-left: 9px;
-
onmouseover="mcancelclosetime()"
+
padding-right: 9px;
-
onmouseout="mclosetime()">
+
}
-
<a href="https://2011.igem.org/Team:Calgary/Parts/Parts_Submitted">Parts Submitted</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Parts/Characterization">Characterization</a>
+
-
</div>
+
-
</li>
+
 +
/*Rollover settings*/
 +
ul#topnav li:hover span{
 +
display: block;
 +
z-index: 999;
 +
}
-
<li><a href="https://2011.igem.org/Team:Calgary/Notebook/Calendar"
+
ul#topnav li span a:hover{
-
onmouseover="mopen('m5')"
+
text-decoration: underline;
-
onmouseout="mclosetime()">
+
}
-
Notebook</a>
+
-
<div id="m5"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Notebook/Calendar">Calendar</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Notebook/Future_Directions">Future Directions</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a>
+
-
</div>
+
-
</li>
+
 +
/*Active state settings*/
 +
#home li#homebutton a,
 +
#team li#teambutton a,
 +
#project li#projectbutton a,
 +
#parts li#partsbutton a,
 +
#notebook li#notebookbutton a,
 +
#outreach li#outreachbutton a,
 +
#sponsors li#sponsorsbutton a{
 +
background-position: left bottom;
 +
}
-
<li><a href="https://2011.igem.org/Team:Calgary/Modelling"
 
-
onmouseover="mopen('m6')"
 
-
onmouseout="mclosetime()">
 
-
Modelling</a>
 
-
<div id="m6"
 
-
onmouseover="mcancelclosetime()"
 
-
onmouseout="mclosetime()">
 
-
<a href="https://2011.igem.org/Team:Calgary/Modelling/MATLAB">MATLAB</a>
 
-
<a href="https://2011.igem.org/Team:Calgary/Modelling/Maya">Animation</a>
 
-
</div>
 
-
</li>
 
 +
#team li#teambutton span,
 +
#project li#projectbutton span,
 +
#parts li#partsbutton span,
 +
#notebook li#notebookbutton span,
 +
#outreach li#outreachbutton span,
 +
#sponsors li#sponsorsbutton span{
 +
display: block;
 +
}
-
<li><a href="https://2011.igem.org/Team:Calgary/Community"
+
/***End menu stuff. Onto the rest of the header!***/
-
onmouseover="mopen('m7')"
+
-
onmouseout="mclosetime()">
+
-
Community</a>
+
-
<div id="m7"
+
-
onmouseover="mcancelclosetime()"
+
-
onmouseout="mclosetime()">
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Ethics">Ethics/Human Practices</a>
+
-
                                        <a href="https://2011.igem.org/Team:Calgary/Community/Safety">Safety</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Gallery">Gallery</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Conferences">Conferences</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Suffield">DRDC Suffield</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Podcasts">Podcasts</a>
+
-
<a href="https://2011.igem.org/Team:Calgary/Community/Blog">Visit Our Blog!</a>
+
-
</div>
+
-
</li>
+
-
<li><a href="https://2011.igem.org/Team:Calgary/Sponsors">Sponsors</a></li>
+
#headbanner{
 +
margin-left: -5px;
 +
margin-top: -38px;
 +
}
-
<li><a class="menuend" href="https://2011.igem.org/Team:Calgary/Extras">Extras</a></li>
+
#fb-button{
 +
position: absolute;
 +
margin-left: 872px;
 +
margin-top: -170px;
 +
}
-
</ul>
+
#twitter-button{
 +
position: absolute;
 +
margin-left: 898px;
 +
margin-top: -170px;
 +
}
 +
#backhome{
 +
color: #07304f;
 +
font-family: Arial;
 +
font-size: 1em;
 +
position: absolute;
 +
margin-left: 755px;
 +
margin-top: -190px;
 +
}
-
</div>
+
#backhome:hover{
 +
text-decoration: none;
 +
}
 +
/*...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"