Template:Team:Waterloo/TopBar

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style> ul#headings li { float: left; display: block; } .icons{ height: 30px; } a.barheading{ color: #71CCE6; font-size: 15px; font-family: Georgia; f...")
 
(52 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{Team:Waterloo/CSS/TopBar}}
-
<head>
+
-
<style>
+
-
ul#headings li {
+
-
  float: left;
+
-
  display: block;
+
-
}
+
-
.icons{
+
-
  height: 30px;
+
-
}
+
-
a.barheading{
+
-
  color: #71CCE6;
+
-
  font-size: 15px;
+
-
  font-family: Georgia;
+
-
  font-weight: bold;
+
-
  cursor: pointer;
+
-
  vertical-align: -20px;
+
-
}
+
-
a.subheading{
+
-
  color: #FFFFFF;
+
-
  font-size: 14px;
+
-
  font-family: Georgia;
+
-
  cursor: pointer;
+
-
}
+
-
.spacer{
+
-
  height: 80px;
+
-
}
+
-
h1{
+
-
  font-family: Georgia;
+
-
  font-size: 40px;
+
-
  color: #000000;
+
-
  text-align: center;
+
-
  margin: 20px 0px 0px 0px !important;
+
-
  line-height: normal;
+
-
  background: initial;
+
-
  padding: initial;
+
-
  border: none;
+
-
  font-variant: small-caps;
+
-
}
+
-
div.subheading{
+
-
  font-family: Georgia;
+
-
  font-size: 30px;
+
-
  color: #000000;
+
-
  text-align: center;
+
-
}
+
-
ul.projSubs li {
+
-
  list-style: none;
+
-
  line-height: 30px;
+
-
}
+
-
img#toTop{
+
-
  height: 30px;
+
-
  position: fixed;
+
-
  bottom: 5%;
+
-
  float: right;
+
-
  right: 2%;
+
-
-webkit-transition: height 0.5s; /* For Safari 3.1 to 6.0 */
+
-
  transition: height 0.5s;
+
-
  z-index:999;
+
-
}
+
-
div#topbar{
+
-
width: 100%;
+
-
position:fixed;
+
-
left:0px;
+
-
right:0px;
+
-
z-index:999;
+
-
top:16px;
+
-
background: #333;
+
-
height:60px;
+
-
}
+
-
div#topbar > .sections_panel{
+
-
  position:absolute;
+
-
  height:0px;
+
-
  background:#000;
+
-
  top:60px;
+
-
  left:10%;
+
-
  border-radius:0px 0px 8px 8px;
+
-
  overflow:hidden;
+
-
  z-index:10000;
+
-
  transition: height 0.3s linear 0s;
+
-
}
+
-
div#topbar > .sections_panel > div{
+
-
  background:#333;
+
-
  padding:20px;
+
-
  height:258px;
+
-
  margin:10px;
+
-
  color:#71CCE6;
+
-
}
+
-
</style>
+
-
</head>
+
 +
<html>
<div id="topbar">
<div id="topbar">
-
  <!--Headings shown on a large screen-->
 
   <ul id="headings">
   <ul id="headings">
-
     <li><img src="https://static.igem.org/mediawiki/2014/4/49/Waterloo_Igem-logo-small.png" height=50px></li>
+
     <li><a href="https://2014.igem.org/Team:Waterloo"><img src="https://static.igem.org/mediawiki/2014/4/49/Waterloo_Igem-logo-small.png" height=55px></a></li>
-
     <li><a class="barheading" onclick="toggleNavPanel('subs1')">Project <span class="navarrow">&#9662;</span></a></li>
+
     <li>
-
    <li><a class="barheading">Lab Book</a></li>
+
      <a>Project &#9662;</a>
-
     <li><a class="barheading">Outreach</a></li>
+
      <div class="sections_panel">
-
     <li><a class="barheading">Accomplishments</a></li>
+
        <div><ul class="dropdown">
-
    <li><a class="barheading" href="file:///home/lisaw/Desktop/Website/WaterlooTeam.html">Team</a></li>
+
          <li><a href="https://2014.igem.org/Team:Waterloo/Overview">Overview</a></li>
-
     <li><a class="barheading">Sponsors</a></li>
+
          <li><a href="https://2014.igem.org/Team:Waterloo/Deliver">Deliver</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Silence">Silence</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Translate">Translate</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Safety">Safety</a></li>
 +
        </ul></div>
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <a>Notebook &#9662;</a>
 +
      <div class="sections_panel">
 +
        <div><ul class="dropdown">
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Lab_Book">Lab Book</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Protocols">Protocols</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Math_Book">Math Book</a></li>
 +
        </ul></div>
 +
      </div>
 +
    </li>
 +
     <li><a href="https://2014.igem.org/Team:Waterloo/Outreach">Outreach</a></li>
 +
     <li><a>Accomplishments  &#9662;</a>
 +
      <div class="sections_panel">
 +
        <div><ul class="dropdown">
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Biobricks">Biobricks</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Collaborations">Collaborations</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Checklist">Checklist</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Acknowledgements">Acknowledgements</a></li>
 +
        </ul></div>
 +
      </div>
 +
    </li>
 +
     <li><a>Team  &#9662;</a>
 +
      <div class="sections_panel">
 +
        <div><ul class="dropdown">
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Our_Team">Our Team</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Sponsors">Sponsors</a></li>
 +
          <li><a href="https://2014.igem.org/Team:Waterloo/Gallery">Gallery</a></li>
 +
        </ul></div>
 +
      </div>
 +
    </li>
     <li><a href="https://2014.igem.org" target="_blank">
     <li><a href="https://2014.igem.org" target="_blank">
-
         <img src="https://static.igem.org/mediawiki/2014/d/d9/Waterloo_Igemlogo_whiteletters_grey.png" style="height: 50px;"></a></li>
+
         <img src="https://static.igem.org/mediawiki/2014/d/d9/Waterloo_Igemlogo_whiteletters_grey.png" style="height: 55px;"></a></li>
   </ul>
   </ul>
-
  <div class="sections_panel" id="subs1" style="width: 300px;">
 
-
    <div>
 
-
      <ul class="projSubs">
 
-
      <li><a class="subheading">Overview</a></li>
 
-
      <li><a class="subheading">YFP Integration</a></li>
 
-
      <li><a class="subheading">CRISPRi</a></li>
 
-
      <li><a class="subheading">sRNA</a></li>
 
-
      <li><a class="subheading">Conjugation</a></li>
 
-
      <li><a class="subheading">Antibiotic Silencing</a></li>
 
-
      <li><a class="subheading">Appendix</a></li>
 
-
    </ul>
 
-
    </div>
 
-
  </div>
 
-
  <!--Headings shown on a small screen-->
 
-
  <ul id="shortheadings">
 
-
    <li style="width: 20%"><img src="https://static.igem.org/mediawiki/2014/4/49/Waterloo_Igem-logo-small.png" height=50px></li>
 
-
    <li style="width: 40%"><a class="barheading" onclick="toggleNavPanel('subs2')" style="line-height:150%;">Navigate <span class="navarrow">&#9662;</span></a></li>
 
-
    <li style="width: 40%"><table style="margin: auto; margin-right: 10%;">
 
-
      <tr><td><a href="https://www.facebook.com/WaterlooiGEM" target="_blank">
 
-
        <img class="icons" id="fb" src="https://static.igem.org/mediawiki/2014/6/60/Waterloo_Facebook_black.png"
 
-
            onmouseover="onHover(this.id,'https://static.igem.org/mediawiki/2014/f/f3/Waterloo_Facebook_colour.png')"
 
-
            onmouseout="offHover(this.id,'https://static.igem.org/mediawiki/2014/6/60/Waterloo_Facebook_black.png')"/>
 
-
      </a></td>
 
-
      <td><a href="https://twitter.com/Waterloo_iGEM" target="_blank">
 
-
        <img class="icons" id="tw" src="https://static.igem.org/mediawiki/2014/5/56/Waterloo_Twitter_black_64-03.png"
 
-
            onmouseover="onHover(this.id,'https://static.igem.org/mediawiki/2014/8/84/Waterloo_Twitter_colour_64-03.png')"
 
-
            onmouseout="offHover(this.id,'https://static.igem.org/mediawiki/2014/5/56/Waterloo_Twitter_black_64-03.png')"/>
 
-
      </a></td>
 
-
      <td><a href="http://www.youtube.com/user/WaterlooiGEM?feature=watch" target="_blank">
 
-
        <img class="icons" id="yt" src="https://static.igem.org/mediawiki/2014/b/bd/Waterloo_Youtube_black.png"
 
-
            onmouseover="onHover(this.id,'https://static.igem.org/mediawiki/2014/f/f0/Waterloo_Youtube_colour.png')"
 
-
            onmouseout="offHover(this.id,'https://static.igem.org/mediawiki/2014/b/bd/Waterloo_Youtube_black.png')"/>
 
-
      </a></td>
 
-
      <td>
 
-
        <a href="https://2014.igem.org" target="_blank">
 
-
        <img src="https://static.igem.org/mediawiki/2014/d/d9/Waterloo_Igemlogo_whiteletters_grey.png" style="height: 50px;"></a>
 
-
      </td></tr>
 
-
    </table></li>
 
-
  </ul>
 
-
  <div class="sections_panel" id="subs2" style="width: 500px;">
 
-
    <div>
 
-
      <table id="navMenu">
 
-
        <tr>
 
-
          <td rowspan=5><div class="navItems" style="margin-left: 0px;">Project</div>
 
-
          <ul class="projSubs">
 
-
      <li><a class="subheading">Overview</a></li>
 
-
      <li><a class="subheading">YFP Integration</a></li>
 
-
      <li><a class="subheading">CRISPRi</a></li>
 
-
      <li><a class="subheading">sRNA</a></li>
 
-
      <li><a class="subheading">Conjugation</a></li>
 
-
      <li><a class="subheading">Antibiotic Silencing</a></li>
 
-
      <li><a class="subheading">Appendix</a></li>
 
-
    </ul></td>
 
-
          <td><div class="navItems">Lab Book</div></td>
 
-
        </tr>
 
-
        <tr>
 
-
          <td><div class="navItems">Outreach</div></td>
 
-
        </tr>
 
-
        <tr>
 
-
          <td><div class="navItems">Accomplishments</div></td>
 
-
        </tr>
 
-
        <tr>
 
-
          <td><div class="navItems">Team</div></td>
 
-
        </tr>
 
-
        <tr>
 
-
          <td><div class="navItems">Sponsors</div></td>
 
-
        </tr>
 
-
      </table>
 
-
    </div>
 
-
  </div>
 
</div>
</div>
<div style="height: 80px"></div>
<div style="height: 80px"></div>
 +
 +
<!--Back to top button-->
 +
<a href="#TOP"><img id="toTop" src="https://static.igem.org/mediawiki/2014/a/ad/Waterloo_to-top-button.png"></a>
</html>
</html>

Latest revision as of 03:01, 18 October 2014

Retrieved from "http://2014.igem.org/Template:Team:Waterloo/TopBar"