Template:Team:Waterloo/TopBar

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<head>
<head>
<style>
<style>
-
div#topbar {
+
#topbar {
width: 100%;
width: 100%;
position:fixed;
position:fixed;
Line 12: Line 12:
height:60px;
height:60px;
}
}
-
div#topbar > .sections_panel {
+
#topbar > .sections_panel {
-
  position:absolute;
+
position:absolute;
-
  height:0px;
+
height:0px;
-
  background:#000;
+
background:#000;
-
  top:60px;
+
top:60px;
-
  left:10%;
+
left:10%;
-
  border-radius:0px 0px 8px 8px;
+
border-radius:0px 0px 8px 8px;
-
  overflow:hidden;
+
overflow:hidden;
-
  z-index:10000;
+
z-index:10000;
-
  transition: height 0.3s linear 0s;
+
transition: height 0.3s linear 0s;
}
}
-
div#topbar > .sections_panel > div {
+
#topbar > .sections_panel > div {
-
  background:#333;
+
background:#333;
-
  padding:20px;
+
padding:20px;
-
  height:258px;
+
height:258px;
-
  margin:10px;
+
margin:10px;
-
  color:#71CCE6;
+
color:#71CCE6;
}
}
-
ul#headings li {
+
#headings li {
-
  float: left;
+
float: left;
-
  display: block;
+
display: block;
}
}
-
.icons {
+
#headings li > a {
-
  height: 30px;
+
color: #71CCE6;
-
}
+
font-size: 15px;
-
a.barheading {
+
font-family: Georgia;
-
  color: #71CCE6;
+
font-weight: bold;
-
  font-size: 15px;
+
cursor: pointer;
-
  font-family: Georgia;
+
vertical-align: -20px;
-
  font-weight: bold;
+
-
  cursor: pointer;
+
-
  vertical-align: -20px;
+
}
}
ul.projSubs li {
ul.projSubs li {
-
  list-style: none;
+
list-style: none;
-
  line-height: 30px;
+
line-height: 30px;
}
}
a.subheading {
a.subheading {
-
  color: #FFFFFF;
+
color: #FFFFFF;
-
  font-size: 14px;
+
font-size: 14px;
-
  font-family: Georgia;
+
font-family: Georgia;
-
  cursor: pointer;
+
cursor: pointer;
}
}
div.subheading {
div.subheading {
-
  font-family: Georgia;
+
font-family: Georgia;
-
  font-size: 30px;
+
font-size: 30px;
-
  color: #000000;
+
color: #000000;
-
  text-align: center;
+
text-align: center;
}
}
.spacer {
.spacer {
-
  height: 80px;
+
height: 80px;
}
}
</style>
</style>
Line 68: Line 65:
<div id="topbar">
<div id="topbar">
-
  <!--Headings shown on a large screen-->
+
<!--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><img src="https://static.igem.org/mediawiki/2014/4/49/Waterloo_Igem-logo-small.png" height=50px></li>
-
    <li><a class="barheading" onclick="toggleNavPanel('subs1')">Project <span class="navarrow">&#9662;</span></a></li>
+
<li><a onclick="toggleNavPanel('subs1')">Project <span class="navarrow">&#9662;</span></a></li>
-
    <li><a class="barheading">Lab Book</a></li>
+
<li><a>Lab Book</a></li>
-
    <li><a class="barheading">Outreach</a></li>
+
<li><a>Outreach</a></li>
-
    <li><a class="barheading">Accomplishments</a></li>
+
<li><a>Accomplishments</a></li>
-
    <li><a class="barheading" href="file:///home/lisaw/Desktop/Website/WaterlooTeam.html">Team</a></li>
+
<li><a>Team</a></li>
-
    <li><a class="barheading">Sponsors</a></li>
+
<li><a>Sponsors</a></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: 50px;"></a></li>
-
  </ul>
+
</ul>
-
  <div class="sections_panel" id="subs1" style="width: 300px;">
+
<div class="sections_panel" id="subs1" style="width: 300px;">
-
    <div>
+
<div>
-
      <ul class="projSubs">
+
<ul class="projSubs">
-
      <li><a class="subheading">Overview</a></li>
+
<li><a class="subheading">Overview</a></li>
-
      <li><a class="subheading">YFP Integration</a></li>
+
<li><a class="subheading">YFP Integration</a></li>
-
      <li><a class="subheading">CRISPRi</a></li>
+
<li><a class="subheading">CRISPRi</a></li>
-
      <li><a class="subheading">sRNA</a></li>
+
<li><a class="subheading">sRNA</a></li>
-
      <li><a class="subheading">Conjugation</a></li>
+
<li><a class="subheading">Conjugation</a></li>
-
      <li><a class="subheading">Antibiotic Silencing</a></li>
+
<li><a class="subheading">Antibiotic Silencing</a></li>
-
      <li><a class="subheading">Appendix</a></li>
+
<li><a class="subheading">Appendix</a></li>
-
    </ul>
+
</ul>
-
    </div>
+
</div>
-
  </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>
</html>
</html>

Revision as of 01:33, 16 October 2014

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