Team:Groningen/Templates/Navigationbar

From 2013.igem.org

(Difference between revisions)
 
(188 intermediate revisions not shown)
Line 1: Line 1:
-
ul
 
-
{
 
-
list-style-type:none;
 
-
margin:0;
 
-
padding:0;
 
-
}
 
<html>
<html>
-
<ul>
+
<style>
-
<li><a href="default.asp">Home</a></li>
+
.accordion,
-
<li><a href="news.asp">News</a></li>
+
.accordion ul,
-
<li><a href="contact.asp">Contact</a></li>
+
.accordion li,
-
<li><a href="about.asp">About</a></li>
+
.accordion a,
-
</ul>
+
.accordion span {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: none;
 +
    outline: none;
 +
}
 +
 +
.accordion li {
 +
    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 */
 +
}
 +
 
 +
 
 +
.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;
 +
}
 +
 
 +
.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 {
 +
    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; }
 +
 
 +
.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;
 +
}
 +
 +
.accordion li:target > .sub-menu {
 +
    height:100%;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
<nav>
 +
 
 +
<ul class="accordion">
 +
 +
<li id="one" class="files"><a href="https://2013.igem.org/Team:Groningen">Home</a>
 +
 +
<li id="two" class="files" class="navigation"><a href="#two">Team</a>
 +
 +
  <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>
 +
 
 +
<li id="three" class="files" class="navigation"><a href="#three" >Spider silk</a>
 +
 +
<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>
 +
 
 +
<li id="four" class="sign" class="navigation"><a href="#four">Project</a>
 +
<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>
 +
 
 +
<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>
 +
 
</html>
</html>

Latest revision as of 03:05, 5 October 2013

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