Template:CalgaryMenu

From 2011.igem.org

(Difference between revisions)
 
(3 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;
-
    mcancelclosetime();
+
font-family: Arial;
-
    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://i1112.photobucket.com/albums/k499/sjdixon1/2011logo.jpg" 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/Project"
+
background-image: url(https://static.igem.org/mediawiki/2011/5/52/UCalgary_ButtonOutreach.png);
-
        onmouseover="mopen('m3')"
+
width: 140px;
-
        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/Biosensor">Biosensor</a>
+
-
          <a href="https://2011.igem.org/Team:Calgary/Project/Reporter">Reporter</a>
+
-
          <a href="https://2011.igem.org/Team:Calgary/Project/Integration">Integration</a>
+
-
          <a href="https://2011.igem.org/Team:Calgary/Project/Conclusion">Conclusion</a>
+
 +
#sponsorsbutton a{
 +
background-image: url(https://static.igem.org/mediawiki/2011/b/b3/UCalgary_ButtonSponsors.png);
 +
width: 138px;
 +
}
-
        </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;
 +
}
 +
ul#topnav li span a{
 +
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://2011.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://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>
+
 +
ul#topnav li span a:hover{
 +
text-decoration: underline;
 +
}
-
      <li><a href="https://2011.igem.org/Team:Calgary/Notebook/Calendar"
+
/*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://2011.igem.org/Team:Calgary/Notebook/Calendar">Journal</a>
+
#sponsors li#sponsorsbutton a{
-
          <a href="https://2011.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a>
+
background-position: left bottom;
-
          <a href="https://2011.igem.org/Team:Calgary/Notebook/Conferences">Conferences</a>
+
}
-
          <a href="https://2011.igem.org/Team:Calgary/Notebook/Models">Computational Models</a>
+
-
        </div>
 
-
      </li>
 
-
      <li><a href="https://2011.igem.org/Team:Calgary/Considerations"
+
#team li#teambutton span,
-
        onmouseover="mopen('m6')"
+
#project li#projectbutton span,
-
        onmouseout="mclosetime()">
+
#parts li#partsbutton span,
-
        Considerations</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://2011.igem.org/Team:Calgary/Consider/Ethics">Ethics</a>
+
}
-
          <a href="https://2011.igem.org/Team:Calgary/Consider/Safety">Safety</a>
+
 
-
          <a href="https://2011.igem.org/Team:Calgary/Consider/Security">Security</a>
+
/***End menu stuff. Onto the rest of the header!***/
-
          <a href="https://2011.igem.org/Team:Calgary/Consider/Future">Future Directions</a></a>
+
 
-
        </div>
+
#headbanner{
-
      </li>
+
margin-left: -5px;
 +
margin-top: -38px;
 +
}
 +
 
 +
#fb-button{
 +
position: absolute;
 +
margin-left: 872px;
 +
margin-top: -170px;
 +
}
 +
 
 +
#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;
 +
}
 +
 
 +
#backhome:hover{
 +
text-decoration: none;
 +
}
 +
 
 +
/*...Not much, was there.*/
 +
 
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
<body id="</html>{{{1}}}<html>">
-
      <li>
+
<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://2011.igem.org/Team:Calgary/Team"
+
<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>
-
        onmouseover="mopen('m2')"
+
<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>
-
        onmouseout="mclosetime()">
+
<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>
-
        Team</a>
+
-
        <div id="m2"
+
-
          onmouseover="mcancelclosetime()"
+
-
          onmouseout="mclosetime()">
+
-
          <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/Photos">Photo Gallery</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>
+
-
          <a href="https://igem.org/Team.cgi?id=640">Official Team Profile</a>
+
-
        </div>
+
-
      </li>
+
-
      <li><a href="https://2011.igem.org/Team:Calgary/Sponsors">Sponsors</a></li>
 
-
    </ul>
+
<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>
-
  </div>
+
</ul>
 +
</div>
</body>
</body>
</html>
</html>

Latest revision as of 17:24, 27 July 2011

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