Line 4: | Line 4: | ||
<style> | <style> | ||
+ | /* Wrapper for the menu */ | ||
+ | |||
+ | a { | ||
+ | color: #23dbdb; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #000; | ||
+ | } | ||
+ | ol, ul { | ||
+ | list-style: none; | ||
+ | padding:0px; | ||
+ | margin:0px; | ||
+ | } | ||
+ | |||
+ | #wrap { | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .inner { | ||
+ | margin: 0 auto; | ||
+ | max-width: 100%;; | ||
+ | padding: 0 40px; | ||
+ | } | ||
+ | |||
+ | .relative { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .right { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | .left { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /* HEADER */ | ||
+ | #wrap > header { | ||
+ | background-color: #0b1b33; | ||
+ | padding-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #navigation { | ||
+ | position: absolute; | ||
+ | right: 40px; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #menu-toggle { | ||
+ | display: none; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | /* HEADER > MENU */ | ||
+ | #main-menu { | ||
+ | float: right; | ||
+ | font-size: 0; | ||
+ | margin: 10px 0; | ||
+ | } | ||
+ | |||
+ | #main-menu > li { | ||
+ | display: inline-block; | ||
+ | margin-left: 30px; | ||
+ | padding: 2px 0; | ||
+ | } | ||
+ | |||
+ | #main-menu > li.parent { | ||
+ | background-image: url(../images/plus-gray.png); | ||
+ | background-size: 7px 7px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: left center; | ||
+ | } | ||
+ | |||
+ | #main-menu > li.parent > a { | ||
+ | padding-left: 14px; | ||
+ | } | ||
+ | |||
+ | #main-menu > li > a { | ||
+ | color: #eee; | ||
+ | font-size: 14px; | ||
+ | line-height: 14px; | ||
+ | padding: 30px 0; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #main-menu > li:hover > a, | ||
+ | #main-menu > li.current-menu-item > a { | ||
+ | color: #23dbdb; | ||
+ | } | ||
+ | |||
+ | /* HEADER > MENU > DROPDOWN */ | ||
+ | #main-menu li { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu { /* level 2 */ | ||
+ | display: none; | ||
+ | left: 0px; | ||
+ | top: 38px; | ||
+ | padding-top: 10px; | ||
+ | position: absolute; | ||
+ | width: 150px; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu ul.sub-menu { /* level 3+ */ | ||
+ | margin-top: -1px; | ||
+ | padding-top: 0; | ||
+ | left: 149px; | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu > li > a { | ||
+ | background-color: #333; | ||
+ | border: 1px solid #444; | ||
+ | border-top: none; | ||
+ | color: #bbb; | ||
+ | display: block; | ||
+ | font-size: 12px; | ||
+ | line-height: 15px; | ||
+ | padding: 10px 12px; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu > li > a:hover { | ||
+ | background-color: #2a2a2a; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu > li:first-child { | ||
+ | border-top: 3px solid #23dbdb; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu ul.sub-menu > li:first-child { | ||
+ | border-top: 1px solid #444; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu > li:last-child > a { | ||
+ | border-radius: 0 0 2px 2px; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu > li > a.parent { | ||
+ | background-image: url(../images/arrow.png); | ||
+ | background-size: 5px 9px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 95% center; | ||
+ | } | ||
+ | |||
+ | #main-menu li:hover > ul.sub-menu { | ||
+ | display: block; /* show the submenu */ | ||
+ | } | ||
+ | |||
+ | @media all and (max-width: 700px) { | ||
+ | |||
+ | #navigation { | ||
+ | position: static; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | #menu-toggle { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #main-menu { | ||
+ | display: block; | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | #main-menu li { | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #main-menu > li { | ||
+ | margin-top: -1px; | ||
+ | } | ||
+ | |||
+ | #main-menu > li:first-child { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | #main-menu > li > a { | ||
+ | background-color: #333; | ||
+ | border: 1px solid #444; | ||
+ | color: #bbb; | ||
+ | display: block; | ||
+ | font-size: 14px;ove | ||
+ | padding: 12px !important; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #main-menu li > a:hover { | ||
+ | background-color: #444; | ||
+ | } | ||
+ | |||
+ | #main-menu > li.parent { | ||
+ | background: none !important; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #main-menu > li:hover > a, | ||
+ | #main-menu > li.current-menu-item > a { | ||
+ | border: 1px solid #444 !important; | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu { | ||
+ | display: block; | ||
+ | margin-top: -1px; | ||
+ | margin-left: 20px; | ||
+ | position: static; | ||
+ | padding: 0; | ||
+ | width: inherit; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu > li:first-child { | ||
+ | border-top: 1px solid #444 !important; | ||
+ | } | ||
+ | |||
+ | ul.sub-menu > li > a.parent { | ||
+ | background: #333 !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <!-- Menu bar --> | ||
+ | <div style="background:#5A5E6B; font-family: 'Architects Daughter', cursive; | ||
+ | font-size:2.5em; text-align:center; color:#DAA520; font-weight:bold; width:100%; height:80px; padding-top:25px">Stargate WCC</div> | ||
+ | <div id="wrap"> | ||
+ | <header> | ||
+ | <div class="inner relative"> | ||
+ | |||
+ | <nav id="navigation"> | ||
+ | <ul id="main-menu"> | ||
+ | <li class="current-menu-item"><a href="https://2016.igem.org/Team:Bordeaux">HOME</a></li> | ||
+ | <li class="parent"> | ||
+ | <a href="#">TEAM</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Team">Meet us!</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Collaborations">Collaborations</a></li> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="parent"> | ||
+ | <a href="#">PROJECT</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Description">Description</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Safety">Safety</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="parent"> | ||
+ | <a href="#">LABWORK</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Experiments">Experiments</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Results">Results</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Notebook">Notebook</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Parts">PARTS</a></li> | ||
+ | |||
+ | <li class="parent"> | ||
+ | <a href="#">BIOINFO WORK</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Model">Model</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Software">Software</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class="parent"> | ||
+ | <a href="#">HUMAN PRACTICES</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Human_Practices">Human Practices Summary</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/HP/Silver">Ethical aspects on CRISPR-CAS9</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/HP/Gold">Popularization and Education</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Integrated_Practices">Integrated Practices</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Engagement">Public Engagement</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Press_Highlights">PRESS</a></li> | ||
+ | |||
+ | <li class="parent"> | ||
+ | <a href="#">GOALS</a> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Achievements">Achievements</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Bordeaux/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | <div class="clear"></div> | ||
+ | </div> | ||
+ | </header> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | ||
<script> | <script> |
Revision as of 14:14, 6 September 2017