Team:Groningen/Templates/NavigationbarII

From 2013.igem.org

(Difference between revisions)
 
(56 intermediate revisions not shown)
Line 19: Line 19:
.accordion li > a {
.accordion li > a {
     display: block;
     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;
     position: relative;
-
     min-width: 110px;
+
     width: 160px;
-
     padding: 0 10px 0 40px;
+
    font-size: 15px;
 +
    font-weight: 500;
 +
    padding: 7px 12px;
 +
     /*padding: 0 10px 0 40px;*/
   
   
     color: #fdfdfd;
     color: #fdfdfd;
-
     font: bold 12px/32px Arial, sans-serif;
+
     font: normal bold 12px/18px Arial, sans-serif;
     text-decoration: none;
     text-decoration: none;
     text-shadow: 0px 1px 0px rgba(0,0,0, .35);
     text-shadow: 0px 1px 0px rgba(0,0,0, .35);
   
   
-
    background: #6c6e74;
+
  /*Gradient Heb deze site gebruikt om dit te maken: http://www.colorzilla.com/gradient-editor/*/
-
    background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
+
background: rgb(0,71,171); /* Old browsers */
-
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
+
background: -moz-linear-gradient(left, rgba(0,71,171,1) 48%, rgba(87,122,168,1) 100%); /* FF3.6+ */
-
    background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
+
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: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
+
background: -webkit-linear-gradient(left, rgba(0,71,171,1) 48%,rgba(87,122,168,1) 100%); /* Chrome10+,Safari5.1+ */
-
    background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
+
background: -o-linear-gradient(left, rgba(0,71,171,1) 48%,rgba(87,122,168,1) 100%); /* Opera 11.10+ */
-
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
+
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 */
-
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0047ab', endColorstr='#577aa8',GradientType=1 ); /* IE6-9 */
-
    -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 {
.sub-menu li a {
Line 95: Line 81:
}
}
-
.accordion > li:hover > a,
+
.accordion > li:hover > a{
 +
  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 );
 +
 
 +
  background: #F68924;
 +
/* IE6-9 */
 +
}
.accordion > li:target > a {
.accordion > li:target > a {
-
     color: #3e5706;
+
     color: #fff;
-
     text-shadow: 1px 1px 1px rgba(255,255,255, .2);
+
      
-
+
/* IE6-9 */}
-
    /*background: url(../img/active.png) repeat-x;*/
+
-
    background: #a5cd4e;
+
-
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
+
-
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
+
-
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
+
-
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
+
-
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
+
-
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
+
-
}
+
   
   
.accordion > li:hover > a span,
.accordion > li:hover > a span,
Line 117: Line 106:
}
}
   
   
-
.sub-menu li:hover a { background: #efefef; }
+
.sub-menu li:hover a { background: #F68924; }
.accordion li > .sub-menu {
.accordion li > .sub-menu {
Line 131: Line 120:
   
   
.accordion li:target > .sub-menu {
.accordion li:target > .sub-menu {
-
     height: 98px;
+
     height: 100%;
}
}
 +
 +
Source: http://designmodo.com/css3-accordion-menu/#ixzz2gmcjwHdy
</style>
</style>
 +
 +
<div width="200px">
 +
 +
<ul class="accordion">
 +
 +
<li id="one" class="files"><a href="https://2013.igem.org/Team:Groningen">Home</a>
 +
 +
<li id="two" class="files"><a href="#two" target="_top">Team</a>
 +
 +
  <ul class="sub-menu" >
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Team" >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">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>
 +
 +
<li id="three" class="files"><a href="#three" target="_top">Spider silk</a>
 +
 +
<ul class="sub-menu" >
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Background">Background</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/BiomedicalProperties">Biomedical    <br>Properties</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Protein">Spider Silk Protein</a></li>
 +
  </ul>
 +
</li>
 +
 +
<li id="four" class="sign"><a href="#four" target="_top">Project</a>
 +
<ul class="sub-menu" >
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Project">Project</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Construct">Backbone</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/SilkAssemblyShop">Silk Assembly Shop</a></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/SilkSecretion">Final Setup</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Conclusion">Conclusion</a></li>
 +
  </ul>
 +
</li>
 +
 +
<li id="five" class="sign"><a href="#five" target="_top">Wet Lab</a>
 +
<ul class="sub-menu">
 +
        <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>
 +
</li>
 +
 +
<li id="six" class="sign"><a href="six" target="_top" >Modeling</a>
 +
<ul class="sub-menu">
 +
        <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>
 +
</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"><a href="#nine" target="_top">Outreach</a>
 +
<ul class="sub-menu" >
 +
        <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/Indiansummer">Indian summer</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/summerschool">Summerschool</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Symposia">Symposia</a></li>
 +
  </ul>
 +
</li>
 +
 +
<li id="ten" class="sign"><a href="#ten" target="_top">Achievements</a>
 +
<ul class="sub-menu">
 +
        <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/PartsCollaboration">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"><a href="#twelve" target="_top">Sponsors</a>
 +
<ul class="sub-menu">
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Sponsors">Sponsors</a></li>
 +
        <li><a href="https://2013.igem.org/Team:Groningen/Navigation/Donations">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>
 +
 +
</div>
 +
 +
<br><br><br>
<ul class="accordion">
<ul class="accordion">
   
   
-
<li id="one" class="files"><a href="#one">My Files<span>495</span></a>
+
    <li id="one" class="files"><a href="#one">My Files<span>495</span></a>
   
   
     <ul class="sub-menu">
     <ul class="sub-menu">
Line 159: Line 236:
   
   
</ul>
</ul>
-
 
-
 
-
Source: http://designmodo.com/css3-accordion-menu/#ixzz2gmSGuGAM
 
-
 
-
 

Latest revision as of 20:35, 4 October 2013




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