Team:Groningen/Templates/Navigationbar

From 2013.igem.org

(Difference between revisions)
 
(52 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
 
-
 
<style>
<style>
-
body {
+
.accordion,
-
  background: #e5e5e7;
+
.accordion ul,
-
}
+
.accordion li,
-
nav {
+
.accordion a,
-
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+
.accordion span {
-
  line-height: 1.5;
+
    margin: 0;
-
  width: 160px;
+
    padding: 0;
-
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
    border: none;
-
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
    outline: none;
-
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
}
}
   
   
-
.menu-item {
+
.accordion li {
-
  background: #fff;
+
    list-style: none;
-
  width: 160px;  
+
}
}
-
.menu-item-link {
+
.accordion li > a {
-
  background: #fff;
+
    display: block;
-
  width: 160px;  
+
    height:32px;
-
}
+
    border-bottom: 1px solid rgba(0,0,0,0.3);
-
 
+
    border-top: 1px solid rgba(255,255,255,0.2);
-
/*Menu Header Styles*/
+
    line-height: 1.5;
-
.menu-item h4 {
+
    position: relative;
-
  border-bottom: 1px solid rgba(0,0,0,0.3);
+
    width: 130px;
-
  border-top: 1px solid rgba(255,255,255,0.2);
+
    font-size: 15px;
-
  color: #fff;
+
    font-weight: 500;
-
  font-size: 15px;
+
    padding: 7px 12px;
-
  font-weight: 500;
+
    /*padding: 0 10px 0 40px;*/
-
  padding: 7px 12px;
+
-
 
+
    color: #fdfdfd;
 +
    font: normal bold 12px/18px Arial, sans-serif;
 +
    text-decoration: none;
 +
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
 +
   /*Gradient Heb deze site gebruikt om dit te maken: http://www.colorzilla.com/gradient-editor/*/
   /*Gradient Heb deze site gebruikt om dit te maken: http://www.colorzilla.com/gradient-editor/*/
background: rgb(0,71,171); /* Old browsers */
background: rgb(0,71,171); /* Old browsers */
Line 45: Line 45:
}
}
-
/*Menu Header Styles*/
 
-
.menu-item-link 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 */
 
-
}
 
-
 
+
.sub-menu li a {
-
.menu-item:hover ul {
+
    color: #797979;
-
  height: 132px;
+
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
 +
 +
    background: #e5e5e5;
 +
    border-bottom: 1px solid #c9c9c9;
 +
 +
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 +
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 +
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
}
-
 
+
-
#menu-item-1:hover ul {
+
.sub-menu li:last-child a { border: none; }
-
height: 32px;
+
 +
.sub-menu li > a span {
 +
    color: #797979;
 +
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
 +
    background: transparent;
 +
    border: 1px solid #c9c9c9;
 +
 +
    -webkit-box-shadow: none;
 +
    -moz-box-shadow: none;
 +
    box-shadow: none;
}
}
-
#menu-item-2:hover ul {
+
-
height: 63px;
+
.sub-menu em {
-
}
+
    position: absolute;
-
#menu-item-3:hover ul {
+
    top: 0;
-
height: 93px;
+
    left: 0;
-
}
+
    margin-left: 14px;
-
#menu-item-4:hover ul {
+
    color: #a6a6a6;
-
height: 127px;
+
    font: normal 10px/32px Arial, sans-serif;
-
}
+
-
#menu-item-5:hover ul {
+
-
height: 153px;
+
-
}
+
-
#menu-item-6:hover ul {
+
-
height: 183px;
+
}
}
-
.menu-item-link:hover ul {
+
.accordion > li:hover > a{
-
   height: 132px;
+
   background: rgb(0,71,171); /* Old browsers */
-
}
+
-
 
+
-
#menu-item-1-link:hover ul {
+
-
height: 32px;
+
-
}
+
-
#menu-item-2-link:hover ul {
+
-
height: 63px;
+
-
}
+
-
#menu-item-3-link:hover ul {
+
-
height: 93px;
+
-
}
+
-
#menu-item-4-link:hover ul {
+
-
height: 127px;
+
-
}
+
-
#menu-item-5-link:hover ul {
+
-
height: 153px;
+
-
}
+
-
#menu-item-6-link:hover ul {
+
-
height: 183px;
+
-
}
+
-
 
+
-
 
+
-
.menu-item-link 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: -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-gradient(linear, left top, right top, color-stop(100%,rgba(0,71,171,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
Line 125: Line 92:
   background: #F68924;
   background: #F68924;
/* IE6-9 */
/* IE6-9 */
-
}
 
-
 
-
.menu-item h4:hover { 
 
-
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 */
 
-
 
-
}
 
-
 
-
 
-
 
-
 
-
 
-
/*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;
 
}
}
 +
.accordion > li:target > a {
 +
    color: #fff;
 +
   
 +
/* IE6-9 */}
 +
 +
.accordion > li:hover > a span,
 +
.accordion > li:target > a span {
 +
    color: #fdfdfd;
 +
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
 +
    background: #3e5706;
 +
}
 +
 +
.sub-menu li:hover a { background: #F68924; }
-
.menu-item-link ul {
+
.accordion li > .sub-menu {
-
  background: #fff;
+
    height: 0;
-
  font-size: 13px;
+
    overflow: hidden;
-
  line-height: 30px;
+
-
  height: 0px;
+
    -webkit-transition: all .2s ease-in-out;
-
  list-style-type: none;
+
    -moz-transition: all .2s ease-in-out;
-
  overflow: hidden;
+
    -o-transition: all .2s ease-in-out;
-
  padding: 0px;
+
    -ms-transition: all .2s ease-in-out;
-
 
+
    transition: all .2s ease-in-out;
-
  /*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;
+
.accordion li:target > .sub-menu {
-
  text-decoration: none;
+
    height:100%;
-
  color: black;
+
-
  display: block;
+
-
  width: 160px;
+
}
}
-
.menu-item-link ul a {
 
-
  margin-left: 20px;
 
-
  text-decoration: none;
 
-
  color: black;
 
-
  display: block;
 
-
  width: 160px;
 
-
}
 
 +
</style>
 +
<nav>
 +
 +
<ul class="accordion">
   
   
-
/*li Styles*/
+
<li id="one" class="files"><a href="https://2013.igem.org/Team:Groningen">Home</a>
-
.menu-item li {
+
-
  border-bottom: 1px solid #eee;
+
-
}
+
   
   
-
/*li Styles*/
+
<li id="two" class="files" class="navigation"><a href="#two">Team</a>
-
.menu-item-link li {
+
-
  border-bottom: 1px solid #eee;
+
  <ul class="sub-menu" >
-
}
+
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Team#two">Team</a></li>
 +
        <li><a href="https://igem.org/Team.cgi?id=1085" target="_blank"  >Official profile</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Acknowledgements#two" >Acknowledgements</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Attributions#two" >Attributions</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/photos#two" >Gallery</a></li>
 +
  </ul>
 +
</li>
-
.menu-item-link li:hover {
+
<li id="three" class="files" class="navigation"><a href="#three" >Spider silk</a>
-
  background: #F68924;
+
-
}
+
<ul class="sub-menu" >
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Silk#three" >Overview</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Background#three" >Background</a></li>
 +
  </ul>
 +
</li>
-
.menu-item li:hover {
+
<li id="four" class="sign" class="navigation"><a href="#four">Project</a>
-
  background: #F68924;
+
<ul class="sub-menu" >
-
}
+
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Project#four" >Introduction</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Construct#four" >Backbone</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/SilkAssemblyShop#four" >Silk Assembly Shop</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Motility#four" >Stay Warm, Stay Close</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/SilkSecretion#four" >The Future</a></li>
 +
  </ul>
 +
</li>
 +
 +
<li id="five" class="sign" class="navigation"><a href="#five" target="_self">Wet Lab</a>
 +
<ul class="sub-menu">
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/experiments#five" target="_self">Experiments</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Protocols#five" target="_self">Protocols</a></li>
 +
  </ul>
 +
</li>
-
/*First Item Styles*/
+
<li id="six" class="sign" class="navigation"><a href="#six" target="_top">Modeling</a>
-
.alpha p {
+
<ul class="sub-menu">
-
    font-size: 13px;
+
-
    padding: 8px 12px;
+
-
    color: #aaa;
+
-
}
+
-
.menu-item h4 a {
+
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Heatmotility#six" >Heat Motility</a></li>
-
  color: white;
+
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Codonoptimization#six" >Codon optimization</a></li>
-
  display: block;
+
-
  text-decoration: none;
+
-
  width: 160px;
+
-
}
+
-
.menu-item-link h4 a {
+
  </ul>
-
  color: white;
+
</li>
-
  display: block;
+
-
  text-decoration: none;
+
-
  width: 160px;
+
-
}
+
-
</style>
+
 +
<li id="seven" class="sign"><a href="https://2013.igem.org/Team:Groningen/Navigation/Notebook">Labjournal</a></li>
-
<nav>
+
<li id="eight" class="sign"><a href="https://2013.igem.org/Team:Groningen/Navigation/Parts">Submitted Parts</a></li>
-
    <div class="menu-item-link alpha">
+
-
      <h4><a href="https://2013.igem.org/Team:Groningen">Home</a></h4>
+
-
 
+
-
    </div>
+
-
     
+
-
    <div class="menu-item-link" id="menu-item-4">
+
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Navigation/Team" >Team</a></h4>
+
-
      <ul>
+
-
        <li><a href="https://igem.org/Team.cgi?id=1085" target="_blank" >Official profile</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Acknowledgements">Acknowledgements</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Attributions">Attributions</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:Groningen/photos">Gallery</a></li>
+
-
      </ul>
+
<li id="nine" class="sign" class="navigation"><a href="#nine" target="_top">Outreach</a>
-
    </div>
+
<ul class="sub-menu" >
-
     
+
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/noas#nine" >Night of <br>Art & Science</a></li>
-
    <div class="menu-item-link" id="menu-item-4">
+
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Indiansummer#nine" >Indian summer</a></li>
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Navigation/Project">Project</a></h4>
+
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/summerschool#nine" >Summerschool</a></li>
-
      <ul>
+
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Symposia#nine" >Symposia</a></li>
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Silk">Silk</a></li>
+
  </ul>
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/SilkSecretion">Silk Secretion</a></li>
+
</li>
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Motility">Coating Mechanism</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Backbone">Backbone</a></li>
+
-
<!-- old page for ../Backbone = ../Biofilm -->
+
-
      </ul>
+
-
    </div>
+
-
<div class="menu-item" id="menu-item-2">
+
-
      <h4>Wet Lab</a></h4>
+
-
      <ul>
+
-
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/experiments">Experiments</a></li>
+
-
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Protocols">Protocols</a></li>
+
-
      </ul>
+
-
    </div>
+
-
     
+
-
    <div class="menu-item" id="menu-item-2">
+
-
      <h4>Modeling</a></h4>
+
-
      <ul>
+
-
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Codonoptimization">Codon optimization</a></li>
+
-
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Heatmotility"">Heat Motility</a></li>
+
-
      </ul>
+
-
    </div>
+
-
<div class="menu-item-link">
+
<li id="ten" class="sign" class="navigation"><a href="#ten" target="_top">Achievements</a>
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Navigation/Notebook">Labjournal</a></h4>
+
<ul class="sub-menu">
-
    </div>    
+
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Medals#ten" >Medal fulfillment</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/PartsCollaboration#ten" >Collaboration</a></li>
 +
  </ul>
 +
</li>
-
<div class="menu-item-link">
+
<li id="eleven" class="sign"><a href="https://2013.igem.org/Team:Groningen/Navigation/Safety">Safety</a></li>
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Navigation/Parts">Submitted Parts</a></h4>
+
-
    </div>  
+
-
    <div class="menu-item" id="menu-item-5">
+
<li id="twelve" class="sign" class="navigation"><a href="#twelve" >Sponsors</a>
-
      <h4>Outreach</a></h4>
+
<ul class="sub-menu">
-
      <ul>
+
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Sponsors#twelve">Sponsors</a></li>
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/noas">Night of <br>Art & Science</a></li>
+
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Donations#twelve" >How to donate</a></li>
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Indiansummer">Indian summer</a></li>
+
  </ul>
-
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/summerschool">Summerschool</a></li>
+
</li>
-
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Symposia">Symposia</a></li>
+
-
      </ul>
+
-
    </div>
+
-
   
+
<li id="eleven" class="sign"><a <a href="https://2013.igem.org/Team:Groningen/Navigation/Contact">Contact</a></li>
-
   
+
</nav>
-
<div class="menu-item" id="menu-item-2">
+
-
      <h4>Achievements</h4>
+
-
      <ul>
+
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Medals">Medal fulfillment</a></li>
+
-
        <!--<li><a href="https://2013.igem.org/Team:Groningen/Navigation/Parts">Submitted parts</a></li>-->
+
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/PartsCollaboration">Collaboration</a></li>
+
-
      </ul>
+
-
    </div>
+
-
<div class="menu-item-link">
+
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Navigation/Safety">Safety</a></h4>
+
-
    </div>
+
-
 
+
</html>
-
<div class="menu-item-link" id="menu-item-1">
+
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Navigation/Sponsors"</a>Sponsors</h4>
+
-
      <ul>
+
-
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Donations">How to donate</a></li>
+
-
      </ul>
+
-
    </div>
+
-
<div class="menu-item-link">
+
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Navigation/Contact">Contact</a></h4>
+
-
    </div>
+
-
</nav>
+

Latest revision as of 03:05, 5 October 2013

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