Team:Groningen/Templates/Navigationbar
From 2013.igem.org
(Difference between revisions)
(62 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; | |
- | + | ||
} | } | ||
- | . | + | .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/*/ | /*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 40: | Line 45: | ||
} | } | ||
- | |||
- | |||
- | |||
- | + | .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: 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 76: | Line 92: | ||
background: #F68924; | background: #F68924; | ||
/* IE6-9 */ | /* 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> | </style> | ||
- | |||
<nav> | <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><a href="https://2013.igem.org/Team:Groningen/Navigation/ | + | |
- | <li><a href="https:// | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <li><a href="https://2013.igem.org/Team:Groningen/Navigation/ | + | |
- | <li><a href="https://2013.igem.org/Team:Groningen/ | + | |
- | + | ||
- | + | ||
- | < | + | <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><a href="https://2013.igem.org/Team:Groningen/Navigation/ | + | |
- | < | + | <li id="eight" class="sign"><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> | + | |
- | + | <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> |
Latest revision as of 03:05, 5 October 2013