Team:Groningen/Templates/Navigationbar

From 2013.igem.org

(Difference between revisions)
 
(166 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
 +
.accordion,
 +
.accordion ul,
 +
.accordion li,
 +
.accordion a,
 +
.accordion span {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: none;
 +
    outline: none;
 +
}
   
   
-
body {
+
.accordion li {
-
  background: #e5e5e7;
+
    list-style: none;
}
}
 +
 +
.accordion li > a {
 +
    display: block;
 +
    height:32px;
 +
    border-bottom: 1px solid rgba(0,0,0,0.3);
 +
    border-top: 1px solid rgba(255,255,255,0.2);
 +
    line-height: 1.5;
 +
    position: relative;
 +
    width: 130px;
 +
    font-size: 15px;
 +
    font-weight: 500;
 +
    padding: 7px 12px;
 +
    /*padding: 0 10px 0 40px;*/
   
   
 +
    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/*/
 +
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 */
 +
}
-
div.menu-item {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;}
 
-
div.menu-item a, div.menu-item h4 {display:block;margin:0 0.5em;}
 
-
nav {
+
.sub-menu li a {
-
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+
    color: #797979;
-
  line-height: 1.5;
+
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
-
  width: 200px;
+
-
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
    background: #e5e5e5;
-
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
    border-bottom: 1px solid #c9c9c9;
-
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
 +
    -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 {
+
.sub-menu li:last-child a { border: none; }
-
  background: #fff;
+
-
  width: 200px;  
+
.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 Header Styles*/
+
.sub-menu em {
-
.menu-item h4 {
+
    position: absolute;
-
  border-bottom: 1px solid rgba(0,0,0,0.3);
+
    top: 0;
-
  border-top: 1px solid rgba(255,255,255,0.2);
+
    left: 0;
-
  color: #fff;
+
    margin-left: 14px;
-
  font-size: 15px;
+
    color: #a6a6a6;
-
  font-weight: 500;
+
    font: normal 10px/32px Arial, sans-serif;
-
  padding: 7px 12px;
+
-
 
+
-
  /*Gradient*/
+
-
  background: #a90329; /* Old browsers */
+
-
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
+
-
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
+
-
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
+
-
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
+
-
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
+
-
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
+
-
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
+
}
}
-
.menu-item:hover ul {
+
.accordion > li:hover > a{
-
   height: 93px;
+
   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 );
-
.menu-item h4:hover { 
+
   background: #F68924;
-
   background: #cc002c; /* Old browsers */
+
/* IE6-9 */
-
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
+
-
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
+
-
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
+
-
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
+
-
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
+
-
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
+
-
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* 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 */}
   
   
-
.menu-item ul a {
+
.accordion > li:hover > a span,
-
  margin-left: 20px;
+
.accordion > li:target > a span {
-
  text-decoration: none;
+
    color: #fdfdfd;
-
  color: #aaa;
+
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
-
  display: block;
+
    background: #3e5706;
-
  width: 200px;
+
}
}
   
   
-
/*li Styles*/
+
.sub-menu li:hover a { background: #F68924; }
-
.menu-item li {
+
 
-
  border-bottom: 1px solid #eee;
+
.accordion li > .sub-menu {
 +
    height: 0;
 +
    overflow: hidden;
 +
 +
    -webkit-transition: all .2s ease-in-out;
 +
    -moz-transition: all .2s ease-in-out;
 +
    -o-transition: all .2s ease-in-out;
 +
    -ms-transition: all .2s ease-in-out;
 +
    transition: all .2s ease-in-out;
}
}
   
   
-
.menu-item li:hover {
+
.accordion li:target > .sub-menu {
-
  background: #eee;
+
    height:100%;
}
}
-
/*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>
</style>
-
 
<nav>
<nav>
-
    <div class="menu-item alpha">
+
 
-
      <h4><a href="#">Home</a></h4>
+
<ul class="accordion">
-
      <p>Lorem ipsum dolor sit...</p>
+
-
    </div>
+
<li id="one" class="files"><a href="https://2013.igem.org/Team:Groningen">Home</a>
-
     
+
-
    <div class="menu-item">
+
<li id="two" class="files" class="navigation"><a href="#two">Team</a>
-
      <h4><a href="#">Team</a></h4>
+
-
      <ul>
+
  <ul class="sub-menu" >
-
         <li><a href="#">iGEM</a></li>
+
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Team#two">Team</a></li>
-
         <li><a href="#">Subs</a></li>
+
        <li><a href="https://igem.org/Team.cgi?id=1085" target="_blank"  >Official profile</a></li>
-
      </ul>
+
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Acknowledgements#two" >Acknowledgements</a></li>
-
    </div>
+
        <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>
-
    <div class="menu-item">
+
  </ul>
-
      <h4><a href="#">Project</a></h4>
+
</li>
-
      <ul>
+
 
-
         <li><a href="#">Discription</a></li>
+
<li id="three" class="files" class="navigation"><a href="#three" >Spider silk</a>
-
         <li><a href="#">other stuff</a></li>
+
-
      </ul>
+
<ul class="sub-menu" >
-
    </div>
+
        <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>
-
    <div class="menu-item">
+
  </ul>
-
      <h4><a href="#">Modeling</a></h4>
+
</li>
-
      <ul>
+
 
-
         <li><a href="#">agenda</a></li>
+
<li id="four" class="sign" class="navigation"><a href="#four">Project</a>
-
         <li><a href="#">total waiting time</a></li>
+
<ul class="sub-menu" >
-
      </ul>
+
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Project#four" >Introduction</a></li>
-
    </div>
+
         <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>
 +
 
 +
<li id="six" class="sign" class="navigation"><a href="#six" target="_top">Modeling</a>
 +
<ul class="sub-menu">
 +
 
 +
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Heatmotility#six" >Heat Motility</a></li>
 +
         <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Codonoptimization#six" >Codon optimization</a></li>
 +
 
 +
  </ul>
 +
</li>
 +
 
 +
<li id="seven" class="sign"><a href="https://2013.igem.org/Team:Groningen/Navigation/Notebook">Labjournal</a></li>
 +
 
 +
<li id="eight" class="sign"><a href="https://2013.igem.org/Team:Groningen/Navigation/Parts">Submitted Parts</a></li>
 +
 
 +
<li id="nine" class="sign" class="navigation"><a href="#nine" target="_top">Outreach</a>
 +
<ul class="sub-menu" >
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/noas#nine" >Night of <br>Art & Science</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Indiansummer#nine" >Indian summer</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/summerschool#nine" >Summerschool</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Symposia#nine" >Symposia</a></li>
 +
  </ul>
 +
</li>
 +
 
 +
<li id="ten" class="sign" class="navigation"><a href="#ten" target="_top">Achievements</a>
 +
<ul class="sub-menu">
 +
        <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>
 +
 
 +
<li id="eleven" class="sign"><a href="https://2013.igem.org/Team:Groningen/Navigation/Safety">Safety</a></li>
 +
 
 +
<li id="twelve" class="sign" class="navigation"><a href="#twelve" >Sponsors</a>
 +
<ul class="sub-menu">
 +
         <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/Donations#twelve" >How to donate</a></li>
 +
  </ul>
 +
</li>
 +
 
 +
<li id="eleven" class="sign"><a <a href="https://2013.igem.org/Team:Groningen/Navigation/Contact">Contact</a></li>
 +
 
</nav>
</nav>
 +
</html>
</html>

Latest revision as of 03:05, 5 October 2013

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