Team:Groningen/Templates/NavigationbarII

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<style>
+
 
-
body {
+
.accordion,
-
  background: white;
+
.accordion ul,
-
}
+
.accordion li,
-
nav {
+
.accordion a,
-
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+
.accordion span {
-
  line-height: 1.5;
+
    margin: 0;
-
  width: 200px;
+
    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);
+
-
  position: fixed;
+
}
}
   
   
-
.menu-item {
+
.accordion li {
-
  background: #F7FDFF;
+
    list-style: none;
-
  width: 200px;
+
}
}
 +
 +
.accordion li > a {
 +
    display: block;
 +
    position: relative;
 +
    min-width: 110px;
 +
    padding: 0 10px 0 40px;
   
   
-
/*Menu Header Styles*/
+
    color: #fdfdfd;
-
.menu-item h4 {
+
    font: bold 12px/32px Arial, sans-serif;
-
  border-bottom: 1px solid rgba(0,0,0,0.3);
+
    text-decoration: none;
-
  border-top: 1px solid rgba(255,255,255,0.2);
+
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
-
  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 {
+
    background: #6c6e74;
-
  height: 130px;
+
    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
-
}
+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
 +
    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
 +
    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
 +
    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
 +
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
   
   
-
.menu-item h4:hover { 
+
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-
  background: rgb(0,71,171); /* Old browsers */
+
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-
background: -moz-linear-gradient(left, rgba(0,71,171,1) 100%, rgba(125,185,232,1) 100%); /* FF3.6+ */
+
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-
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 */
+
}
}
 +
 +
.accordion li > a span {
 +
    display: block;
 +
    position: absolute;
 +
    top: 7px;
 +
    right: 0;
 +
    padding: 0 10px;
 +
    margin-right: 10px;
   
   
-
/*ul Styles*/
+
    font: normal bold 12px/18px Arial, sans-serif;
-
.menu-item ul {
+
    background: #404247;
-
  background: #F7FDFF;
+
-
  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 {
+
    -webkit-border-radius: 15px;
-
  margin-left: 20px;
+
    -moz-border-radius: 15px;
-
  text-decoration: none;
+
    border-radius: 15px;
-
  color: black;
+
-
  display: block;
+
-
  width: 200px;
+
-
}
+
   
   
-
/*li Styles*/
+
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-
.menu-item li {
+
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-
  border-bottom: 1px solid #eee;
+
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
}
 +
 +
.sub-menu li a {
 +
    color: #797979;
 +
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
 +
 +
    background: #e5e5e5;
 +
    border-bottom: 1px solid #c9c9c9;
   
   
-
.menu-item li:hover {
+
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-
  background: #f68924;
+
    -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);
}
}
   
   
-
/*First Item Styles*/
+
.sub-menu li:last-child a { border: none; }
-
.alpha p {
+
-
     font-size: 13px;
+
.sub-menu li > a span {
-
     padding: 8px 12px;
+
     color: #797979;
-
     color: #aaa;
+
    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 h4 a {
+
.sub-menu em {
-
  color: white;
+
    position: absolute;
-
  display: block;
+
    top: 0;
-
  text-decoration: none;
+
    left: 0;
-
  width: 200px;
+
    margin-left: 14px;
 +
    color: #a6a6a6;
 +
    font: normal 10px/32px Arial, sans-serif;
}
}
-
</style>
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<ul class="accordion">
   
   
 +
    <li id="one" class="files"><a href="#one">My Files<span>495</span></a></li>
   
   
-
<nav>
+
     <li id="two" class="mail"><a href="#two">Mail<span>26</span></a></li>
-
     <div class="menu-item alpha">
+
-
      <h4><a href="https://2013.igem.org/Team:Groningen">Home</a></h4>
+
     <li id="three" class="cloud"><a href="#three">Cloud<span>58</span></a></li>
-
 
+
-
    </div>
+
    <li id="four" class="sign"><a href="#four">Sign Out</a></li>
-
     
+
-
     <div class="menu-item">
+
</ul>
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Team" >Team</a></h4>
+
 
-
      <ul>
+
<li id="one" class="files"><a href="#one">My Files<span>495</span></a>
-
        <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/Team/attributions">Attributions</a></li>
+
    <ul class="sub-menu">
-
         <li><a href="https://2013.igem.org/Team:Groningen/Team/Acknowledgements">Acknowledgements</a></li>
+
-
         <li><a href="https://2013.igem.org/Team:Groningen/photos">Gallery</a></li>
+
         <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
 +
 +
         <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>
 +
 +
         <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>
 +
 +
    </ul>
 +
 +
</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>
 
-
      </ul>
 
-
    </div>
 
-
<div class="menu-item">
 
-
      <h4><a href="https://2013.igem.org/Team:Groningen/Lab">Lab Work</a></h4>
 
-
      <ul>
 
-
        <li><a href="https://2013.igem.org/Team:Groningen/Lab/experiments">Experiments</a></li>
 
-
        <li><a href="https://2013.igem.org/Team:Groningen/protocols">Protocols</a></li>
 
-
        <li><a href="https://2013.igem.org/Team:Groningen/Notebook">Labjournal</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/Parts">Submitted parts</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>
 
-
</nav>
 
</html>
</html>

Revision as of 18:42, 4 October 2013

.accordion, .accordion ul, .accordion li, .accordion a, .accordion span { margin: 0; padding: 0; border: none; outline: none; } .accordion li { list-style: none; } .accordion li > a { display: block; position: relative; min-width: 110px; padding: 0 10px 0 40px; color: #fdfdfd; font: bold 12px/32px Arial, sans-serif; text-decoration: none; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #6c6e74; background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)); background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%); -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); } .accordion li > a span { display: block; position: absolute; top: 7px; right: 0; padding: 0 10px; margin-right: 10px; font: normal bold 12px/18px Arial, sans-serif; background: #404247; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); } .sub-menu li a { color: #797979; 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); } .sub-menu li:last-child a { border: none; } .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; } .sub-menu em { position: absolute; top: 0; left: 0; margin-left: 14px; color: #a6a6a6; font: normal 10px/32px Arial, sans-serif; }

  • My Files495

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