Difference between revisions of "Template:Freiburg/Menubar"
| (26 intermediate revisions by 3 users not shown) | |||
| Line 4: | Line 4: | ||
<title>""</title> | <title>""</title> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
<style> | <style> | ||
/* ============= BEGIN: Stylesheet for navigation menu ============= */ | /* ============= BEGIN: Stylesheet for navigation menu ============= */ | ||
| Line 21: | Line 21: | ||
/* ==== End General Settings ==== */ | /* ==== End General Settings ==== */ | ||
| + | @media screen and (min-width: 911px){ | ||
#naviconwrapper { | #naviconwrapper { | ||
| Line 156: | Line 157: | ||
} | } | ||
/* ==== End classes for icons ==== */ | /* ==== End classes for icons ==== */ | ||
| − | |||
/* ==== Begin running chip ==== */ | /* ==== Begin running chip ==== */ | ||
| Line 343: | Line 343: | ||
#project-sub { | #project-sub { | ||
display: none; | display: none; | ||
| − | left: 22. | + | left: 22.1%; |
} | } | ||
| Line 364: | Line 364: | ||
#notebook-sub{ | #notebook-sub{ | ||
display: none; | display: none; | ||
| − | left: | + | left: 76%; |
| + | width: 120px; | ||
} | } | ||
| Line 410: | Line 411: | ||
.navsub2 { | .navsub2 { | ||
| − | background-color: # | + | background-color: #1962AB; |
opacity: 1; | opacity: 1; | ||
} | } | ||
.navsub2before { | .navsub2before { | ||
| − | background-color: # | + | background-color: #1962AB; |
border-top-right-radius: 8px; | border-top-right-radius: 8px; | ||
opacity: 0.6; | opacity: 0.6; | ||
| Line 435: | Line 436: | ||
/* ==== End Settings Submenu Level 2 ==== */ | /* ==== End Settings Submenu Level 2 ==== */ | ||
| + | |||
| + | #smallnav{ | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | } /* end media query*/ | ||
| + | |||
| + | @media screen and (max-width: 910px){ | ||
| + | #header{ | ||
| + | top: -9000px; | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | /* avoid space to content box */ | ||
| + | .content_background_wrapper{ | ||
| + | padding-top: 20px; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | /* Styles for smallnav */ | ||
| + | |||
| + | /* Clearfix */ | ||
| + | .clearfix:before, | ||
| + | .clearfix:after { | ||
| + | content: " "; | ||
| + | display: table; | ||
| + | } | ||
| + | .clearfix:after { | ||
| + | clear: both; | ||
| + | } | ||
| + | .clearfix { | ||
| + | *zoom: 1; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* Basic Styles */ | ||
| + | |||
| + | #smallnav { | ||
| + | height: 40px; | ||
| + | width: 100%; | ||
| + | background: #0051A2; | ||
| + | font-size: 11pt; | ||
| + | font-family: 'PT Sans', Arial, sans-serif; | ||
| + | font-weight: bold; | ||
| + | position: fixed; | ||
| + | border-bottom: 2px solid #CFCFCF; | ||
| + | z-index: 3000; | ||
| + | opacity: 0.9; | ||
| + | } | ||
| + | #smallnav ul { | ||
| + | padding: 0; | ||
| + | margin: 0 auto; | ||
| + | width: 720px; | ||
| + | height: 40px; | ||
| + | } | ||
| + | #smallnav li { | ||
| + | display: inline; | ||
| + | float: left; | ||
| + | } | ||
| + | #smallnav a { | ||
| + | color: #fff; | ||
| + | display: inline-block; | ||
| + | width: 120px; | ||
| + | text-align: center; | ||
| + | text-decoration: none; | ||
| + | line-height: 40px; | ||
| + | } | ||
| + | #smallnav li a { | ||
| + | box-sizing:border-box; | ||
| + | -moz-box-sizing:border-box; | ||
| + | -webkit-box-sizing:border-box; | ||
| + | } | ||
| + | #smallnav li:last-child a { | ||
| + | border-right: 0; | ||
| + | } | ||
| + | #smallnav a:hover, #smallnav a:active { | ||
| + | background-color: #1D629F; | ||
| + | } | ||
| + | #smallnav a#pull { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /*Styles for screen 600px and lower*/ | ||
| + | @media screen and (max-width: 720px) { | ||
| + | #smallnav { | ||
| + | height: auto; | ||
| + | background: #3B7EBF; | ||
| + | } | ||
| + | #smallnav ul { | ||
| + | width: 100%; | ||
| + | display: block; | ||
| + | height: auto; | ||
| + | } | ||
| + | #smallnav li { | ||
| + | width: 50%; | ||
| + | float: left; | ||
| + | position: relative; | ||
| + | margin-bottom: 0; | ||
| + | } | ||
| + | |||
| + | #smallnav a { | ||
| + | text-align: left; | ||
| + | width: 100%; | ||
| + | text-indent: 25px; | ||
| + | } | ||
| + | |||
| + | #smallnav { | ||
| + | border-bottom: 0; | ||
| + | } | ||
| + | #smallnav ul { | ||
| + | display: none; | ||
| + | height: auto; | ||
| + | } | ||
| + | #smallnav a#pull { | ||
| + | display: block; | ||
| + | background-color: #0051A2; | ||
| + | width: 100%; | ||
| + | position: relative; | ||
| + | } | ||
| + | #smallnav a#pull:after { | ||
| + | content:""; | ||
| + | background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat; | ||
| + | background-size: auto 90%; | ||
| + | width: 30px; | ||
| + | height: 30px; | ||
| + | display: inline-block; | ||
| + | position: absolute; | ||
| + | right: 15px; | ||
| + | top: 5px; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* ==== classes for icons ==== */ | ||
| + | #home_small { | ||
| + | background-color: #3673AF; | ||
| + | |||
| + | } | ||
| + | |||
| + | #home_small a { | ||
| + | background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat; | ||
| + | background-position: left; | ||
| + | background-size: auto 100%; | ||
| + | background-repeat: no-repeat; | ||
| + | padding-left: 40px; | ||
| + | color: #FFF; | ||
| + | } | ||
| + | |||
| + | #project_small { | ||
| + | background-color: #3673AF; | ||
| + | |||
| + | } | ||
| + | |||
| + | #project_small a { | ||
| + | background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat; | ||
| + | background-position: left; | ||
| + | background-size: auto 90%; | ||
| + | background-repeat: no-repeat; | ||
| + | padding-left: 40px; | ||
| + | color: #FFF; | ||
| + | } | ||
| + | |||
| + | #team_small { | ||
| + | background-color: #3673AF; | ||
| + | |||
| + | } | ||
| + | |||
| + | #team_small a { | ||
| + | background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat; | ||
| + | background-position: left; | ||
| + | background-size: auto 90%; | ||
| + | background-repeat: no-repeat; | ||
| + | padding-left: 40px; | ||
| + | color: #FFF; | ||
| + | } | ||
| + | |||
| + | #results_small { | ||
| + | background-color: #3673AF; | ||
| + | |||
| + | } | ||
| + | |||
| + | #results_small a { | ||
| + | background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat; | ||
| + | background-position: left; | ||
| + | background-size: auto 90%; | ||
| + | background-repeat: no-repeat; | ||
| + | padding-left: 40px; | ||
| + | color: #FFF; | ||
| + | } | ||
| + | |||
| + | #policy_small { | ||
| + | background-color: #3673AF; | ||
| + | } | ||
| + | |||
| + | #policy_small a { | ||
| + | color: #FFF; | ||
| + | padding-left: 40px; | ||
| + | background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png); | ||
| + | background-position: left; | ||
| + | background-size: auto 90%; | ||
| + | background-repeat: no-repeat; | ||
| + | } | ||
| + | |||
| + | #notebook_small { | ||
| + | background-color: #3673AF; | ||
| + | } | ||
| + | |||
| + | #notebook_small a { | ||
| + | background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat; | ||
| + | background-position: left; | ||
| + | background-size: auto 90%; | ||
| + | background-repeat: no-repeat; | ||
| + | padding-left: 40px; | ||
| + | color: #FFF; | ||
| + | } | ||
| + | /* ==== End classes for icons ==== */ | ||
| + | |||
| + | |||
| + | }/* end media query | ||
| + | |||
| + | /*Smartphone*/ | ||
| + | @media only screen and (max-width : 320px) { | ||
| + | #smallnav li { | ||
| + | display: block; | ||
| + | float: none; | ||
| + | width: 100%; | ||
| + | } | ||
| + | } | ||
| − | |||
</style> | </style> | ||
| − | <! | + | <!-- BEGIN: jQuery --> |
| − | + | ||
| − | $(function() { | + | |
| − | + | <script> | |
| + | // FOR SMALLNAV | ||
| + | $(function() { | ||
| + | var pull = $('#pull'); | ||
| + | menu = $('#smallnav ul'); | ||
| + | menuHeight = menu.height(); | ||
| + | |||
| + | $(pull).on('click', function(e) { | ||
| + | e.preventDefault(); | ||
| + | menu.slideToggle(); | ||
| + | }); | ||
| + | |||
| + | $(window).resize(function(){ | ||
| + | var w = $(window).width(); | ||
| + | if(w > 320) { | ||
| + | if (menu.is(':hidden')) { | ||
| + | menu.removeAttr('style'); | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function(){ | ||
// make submenus appear // | // make submenus appear // | ||
| − | + | $("#home").hover(function(){ | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#project").hover(function(){ | |
| − | + | $("#project-sub") .show(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#project-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#team").hover(function(){ | |
| − | + | $("#team-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#team-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#results").hover(function(){ | |
| − | + | $("#results-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#policy").hover(function(){ | |
| − | + | $("#policy-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#notebook").hover(function(){ | |
| − | + | $("#notebook-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible// | // make chip stay over main menu point when its submenu appears and makes the submenu stay visible// | ||
| − | + | $("#project-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','18.6%'); | |
| − | + | $("#project-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#team-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','35.5%'); | |
| − | + | $("#team-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#results-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','52%'); | |
| − | + | $("#results-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#policy-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','68.9%'); | |
| − | + | $("#policy-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#notebook-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','85.5%'); | |
| − | + | $("#notebook-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
| − | + | }); | |
| − | + | </script> | |
| − | + | ||
| Line 576: | Line 827: | ||
}); | }); | ||
| − | + | /*Fix for when a link targets an id -> check the position on pageload*/ | |
| + | $(window).scroll(); | ||
}); | }); | ||
| − | + | </script> | |
| + | |||
| + | <!-- END: jQuery --> | ||
| + | |||
| + | |||
| + | </head> | ||
| − | |||
| − | + | <!-- BEGIN: Body content --> | |
| + | <body> | ||
| + | <!-- BEGIN: Normal Menubar --> | ||
| − | |||
| − | |||
<div id="header"> | <div id="header"> | ||
<!-- Begin navigation menu icons --> | <!-- Begin navigation menu icons --> | ||
| Line 625: | Line 881: | ||
<li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li> | <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li> | ||
<li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li> | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li> | ||
| − | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System"> | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">Overview</a></li> |
| − | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/ | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Design">Diagnostics today</a></li> |
<li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a> | <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a> | ||
<ul> | <ul> | ||
| − | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/ | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/DNA_Engineering">DNA Engineering</a></li> |
| − | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression">Cell- | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression">Cell-Free Expression</a></li> |
<li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Protein Purification</a></li> | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Protein Purification</a></li> | ||
<li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Surface Chemistry</a></li> | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Surface Chemistry</a></li> | ||
| Line 650: | Line 906: | ||
<li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results">Main Results</a></li> | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results">Main Results</a></li> | ||
<li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">Diagnostics</a></li> | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">Diagnostics</a></li> | ||
| − | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Own_Device"> | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Own_Device">Our Device</a></li> |
| − | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Immobilization">DNA | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Immobilization">DNA Array</a></li> |
| − | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Cellfree"> | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Cellfree">Cell-Free Expression</a></li> |
<li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Surface">Binding on Surface</a></li> | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Surface">Binding on Surface</a></li> | ||
<li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Modeling">Modeling</a></li> | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Modeling">Modeling</a></li> | ||
| Line 677: | Line 933: | ||
<ul> | <ul> | ||
<li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li> | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li> | ||
| − | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains" | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains">E.coli Strains</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
<li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li> | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li> | ||
| − | <li><a class="navsub1" href="">Materials</a></li> | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Materials">Materials</a></li> |
<li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li> | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li> | ||
<li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li> | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li> | ||
| Line 694: | Line 950: | ||
<!-- End of header --> | <!-- End of header --> | ||
| + | <!-- END: normal Menubar --> | ||
| + | |||
| + | |||
| + | <!-- BEGIN: Mobile Navigation --> | ||
| + | |||
| + | <div class="clearfix" id="smallnav"> | ||
| + | <ul class="clearfix"> | ||
| + | <li id="home_small"><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a></li> | ||
| + | <li id="project_small"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a></li> | ||
| + | <li id="results_small"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a></li> | ||
| + | <li id="team_small"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a></li> | ||
| + | <li id="policy_small"><a href="https://2015.igem.org/Team:Freiburg/Practices">Practice</a></li> | ||
| + | <li id="notebook_small"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a></li> | ||
| + | </ul> | ||
| + | <a href="#" id="pull">Menu</a> | ||
| + | </div> | ||
| + | |||
| + | <!-- END: Mobile Navigation --> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 02:44, 19 September 2015