Team:Groningen/Templates/Navigationbar

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
 +
<!-- NAVBAR gemaakt door TYCHO weg gecomment achtieve bar begint hierna
 +
<style>
<style>
   
   
Line 138: Line 141:
     </div>
     </div>
</nav>
</nav>
 +
-->
 +
 +
<!-- ACTIEVE MENU -->
 +
<!-- Begin floating menu code-->
 +
 +
 +
<style>
 +
body {
 +
  background: #e5e5e7;
 +
}
 +
nav {
 +
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
 +
  line-height: 1.5;
 +
  width: 200px;
 +
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 +
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 +
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 +
  position: fixed;
 +
}
 +
 +
.menu-item {
 +
  background: #fff;
 +
  width: 200px;
 +
}
 +
 +
/*Menu Header Styles*/
 +
.menu-item h4 {
 +
  border-bottom: 1px solid rgba(0,0,0,0.3);
 +
  border-top: 1px solid rgba(255,255,255,0.2);
 +
  color: #fff;
 +
  font-size: 15px;
 +
  font-weight: 500;
 +
  padding: 7px 12px;
 +
 
 +
  /*Gradient Heb deze site gebruikt om dit te maken: http://www.colorzilla.com/gradient-editor/*/
 +
  background: rgb(0,71,171); /* Old browsers */
 +
background: -moz-linear-gradient(left, rgba(0,71,171,1) 48%, rgba(87,122,168,1) 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(48%,rgba(0,71,171,1)), color-stop(100%,rgba(87,122,168,1))); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(left, rgba(0,71,171,1) 48%,rgba(87,122,168,1) 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(left, rgba(0,71,171,1) 48%,rgba(87,122,168,1) 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(left, rgba(0,71,171,1) 48%,rgba(87,122,168,1) 100%); /* IE10+ */
 +
background: linear-gradient(to right, rgba(0,71,171,1) 48%,rgba(87,122,168,1) 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0047ab', endColorstr='#577aa8',GradientType=1 ); /* IE6-9 */
 +
}
 +
 +
.menu-item:hover ul {
 +
  height: 130px;
 +
}
 +
 +
.menu-item h4:hover { 
 +
  background: rgb(0,71,171); /* Old browsers */
 +
background: -moz-linear-gradient(left, rgba(0,71,171,1) 100%, rgba(125,185,232,1) 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(100%,rgba(0,71,171,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(left, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(left, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(left, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* IE10+ */
 +
background: linear-gradient(to right, rgba(0,71,171,1) 100%,rgba(125,185,232,1) 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0047ab', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
 +
}
 +
 +
/*ul Styles*/
 +
.menu-item ul {
 +
  background: #fff;
 +
  font-size: 13px;
 +
  line-height: 30px;
 +
  height: 0px;
 +
  list-style-type: none;
 +
  overflow: hidden;
 +
  padding: 0px;
 +
 
 +
  /*Animation*/
 +
  -webkit-transition: height 1s ease;
 +
    -moz-transition: height 1s ease;
 +
      -o-transition: height 1s ease;
 +
      -ms-transition: height 1s ease;
 +
          transition: height 1s ease;
 +
}
 +
 +
.menu-item ul a {
 +
  margin-left: 20px;
 +
  text-decoration: none;
 +
  color: #aaa;
 +
  display: block;
 +
  width: 200px;
 +
}
 +
 +
/*li Styles*/
 +
.menu-item li {
 +
  border-bottom: 1px solid #eee;
 +
}
 +
 +
.menu-item li:hover {
 +
  background: #eee;
 +
}
 +
 +
/*First Item Styles*/
 +
.alpha p {
 +
    font-size: 13px;
 +
    padding: 8px 12px;
 +
    color: #aaa;
 +
}
 +
 +
.menu-item h4 a {
 +
  color: white;
 +
  display: block;
 +
  text-decoration: none;
 +
  width: 200px;
 +
}
 +
</style>
 +
 +
 +
<nav>
 +
    <div class="menu-item alpha">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen">Home</a></h4>
 +
 
 +
    </div>
 +
     
 +
    <div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/Team" >Team</a></h4>
 +
      <ul>
 +
        <li><a href="https://igem.org/Team.cgi?year=2013" target="_blank" >Official profile</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/attributions">Attributions</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Acknowledgements">Acknowledgements</a></li>
 +
      </ul>
 +
    </div>
 +
     
 +
    <div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/Project">Project</a></h4>
 +
      <ul>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Project/secretion">Silk Secretion</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Project/Motility">Motility</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Project/Biofilm">Biofilm</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Notebook">Labjournal</a></li>
 +
      </ul>
 +
    </div>
 +
<div class="menu-item">
 +
      <h4><a href="#">Lab Work</a></h4>
 +
      <ul>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/protocols">Protocols</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/experiments">Experiments</a></li>
 +
      </ul>
 +
    </div>
 +
     
 +
    <div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/Modeling">Modeling</a></h4>
 +
      <ul>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Modeling/codonoptimaztion">Codon optimization</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Modeling/folding">Folding</a></li>
 +
        <li><a href="#">More modeling stuff</a></li>
 +
      </ul>
 +
    </div>
 +
<div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/Achievements">Achievements</a></h4>
 +
      <ul>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Achievements/medal">Medal fulfillment</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Achievements/Parts">Submitted parts <br>to the registry</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Achievements/collaboration">Collaboration</a></li>
 +
      </ul>
 +
    </div>
 +
<div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/Safety">Safety</a></h4>
 +
      <ul>
 +
        <li><a href="#">Some text</a></li>
 +
        <li><a href="#">And text</a></li>
 +
      </ul>
 +
    </div>
 +
<div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/outreach">Outreach</a></h4>
 +
      <ul>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/outreach/summerschool">Summerschool</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/outreach/indiansummer">Indian summer</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/outreach/symposia">Symposia</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/outreach/press">Press</a></li>
 +
      </ul>
 +
    </div>
 +
<div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/sponsors">Sponsors</a></h4>
 +
      <ul>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/donation">How to donate</a></li>
 +
      </ul>
 +
    </div>
 +
<div class="menu-item">
 +
      <h4><a href="https://2013.igem.org/Team:Groningen/contact">Contact</a></h4>
 +
    </div>
 +
<div class="menu-item">
 +
      <h4><a href=""> Wiki Development</a></h4>
 +
      <ul>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/TESTPAGE">Testpage I</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/TESTPAGE2">Testpage II</a></li>
 +
      </ul>
 +
    </div>
 +
</nav>
 +
 +
<!-- Einde floating menu code-->
 +
 +
 +
<!-- Begin slideshow code-->
 +
<head>
 +
<script type="text/javascript">
 +
var image1 = new Image()
 +
image1.src = "https://static.igem.org/mediawiki/2013/7/77/Groningen_team.png"
 +
var image2 = new Image()
 +
image2.src = "https://static.igem.org/mediawiki/2013/a/a2/2013_allBlack_BIG_corr.png"
 +
var image3 = new Image()
 +
image3.src = ""
 +
</script>
 +
</head>
 +
<body>
 +
<p><img src="https://static.igem.org/mediawiki/2013/7/77/Groningen_team.png" width="900px" height="302px%" name="slide" /></p>
 +
<script type="text/javascript">
 +
        var step=1;
 +
        function slideit()
 +
        {
 +
            document.images.slide.src = eval("image"+step+".src");
 +
            if(step<2)
 +
                step++;
 +
            else
 +
                step=1;
 +
            setTimeout("slideit()",4000);
 +
        }
 +
        slideit();
 +
</script>
 +
</body>
 +
 +
 +
 +
 +
</html>
</html>

Revision as of 18:49, 16 July 2013

Retrieved from "http://2013.igem.org/Team:Groningen/Templates/Navigationbar"