(73 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | // This is the jquery part of your template. | ||
+ | // Try not modify any of this code too much since it makes your menu work. | ||
+ | $("igem_2017_menu_wrapper").mouseleave(function(){this.slideUp();}); | ||
+ | $(document).ready(function() { | ||
+ | |||
+ | $("#HQ_page").attr('id',''); | ||
+ | |||
+ | // call the functions that control the menu | ||
+ | menu_functionality(); | ||
+ | hide_show_menu(); | ||
+ | |||
+ | |||
+ | |||
+ | //this function controls the expand and collapse buttons of the menu and changes the +/- symbols | ||
+ | function menu_functionality() { | ||
+ | |||
+ | //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu | ||
+ | $(".menu_button").click(function(){ | ||
+ | |||
+ | // add or remove the class "open" , this class holds the "-" | ||
+ | $(this).children().toggleClass("open"); | ||
+ | // show or hide the submenu | ||
+ | $(this).next('.submenu_wrapper').fadeToggle(400); | ||
+ | }); | ||
+ | |||
+ | // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu | ||
+ | $("#display_menu_control").click(function(){ | ||
+ | $('#menu_content').fadeToggle(400); | ||
+ | }); | ||
+ | |||
+ | // call the current page highlight function | ||
+ | highlight_current_page(); | ||
+ | } | ||
+ | |||
+ | |||
+ | // call the highlight current page function to show it on the menu with a different background color | ||
+ | function highlight_current_page() { | ||
+ | |||
+ | // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color | ||
+ | $("#"+ wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page"); | ||
+ | |||
+ | // now that the current_page class has been added to a menu item, make the submenu fade in | ||
+ | $(".current_page").parents(".submenu_wrapper").fadeIn(400); | ||
+ | // change the +/- symbol of the corresponding menu button | ||
+ | $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open"); | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | // allow button on the black menu bar to show/hide the side menu | ||
+ | function hide_show_menu() { | ||
+ | |||
+ | // in case you preview mode is selected, the menu is hidden for better visibility | ||
+ | if (window.location.href.indexOf("submit") >= 0) { | ||
+ | $(".igem_2017_menu_wrapper").hide(); | ||
+ | } | ||
+ | |||
+ | // if the black menu bar has been loaded | ||
+ | if (document.getElementById('bars_item')) { | ||
+ | |||
+ | // when the "bars_item" has been clicked | ||
+ | $("#bars_item").click(function() { | ||
+ | $("#sideMenu").hide(); | ||
+ | |||
+ | // show/hide the menu wrapper | ||
+ | $(".igem_2017_menu_wrapper").fadeToggle("100"); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet | ||
+ | else { | ||
+ | setTimeout(hide_show_menu, 15); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <style> | ||
+ | |||
+ | |||
+ | |||
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
Line 15: | Line 109: | ||
/* Wrapper for the menu */ | /* Wrapper for the menu */ | ||
.igem_2017_menu_wrapper { | .igem_2017_menu_wrapper { | ||
− | width: | + | width: 0%; |
− | height: | + | height:0vh; |
− | position: | + | position:absolute; |
right:0%; | right:0%; | ||
padding:0px; | padding:0px; | ||
Line 127: | Line 221: | ||
/* Wrapper for the content */ | /* Wrapper for the content */ | ||
.igem_2017_content_wrapper { | .igem_2017_content_wrapper { | ||
− | width: | + | width: 100%; |
− | margin: | + | margin: 0%; |
display:block; | display:block; | ||
float:left; | float:left; | ||
Line 174: | Line 268: | ||
/* hover for the links */ | /* hover for the links */ | ||
− | .igem_2017_content_wrapper a:hover { | + | .igem_2017_content_wrapper a:hover { over |
text-decoration:none; | text-decoration:none; | ||
color:#000000; | color:#000000; | ||
Line 649: | Line 743: | ||
</div> | </div> | ||
+ | <div id="fh5co-wrapper" > | ||
+ | <div id="fh5co-page"> | ||
+ | <div id="fh5co-header"> | ||
+ | <header id="fh5co-header-section" `> | ||
+ | <div class="container"> | ||
+ | <div class="nav-header"> | ||
+ | <a href="https://2017.igem.org/Team:Tsinghua-A" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a> | ||
+ | <h1 id="fh5co-logo"><a href="https://2017.igem.org/Team:Tsinghua-A"><img src="https://static.igem.org/mediawiki/2017/thumb/a/a6/TsinghuaA-logo.png/240px-TsinghuaA-logo.png" width="70" heigth="70"></img>TSINGHUA-A</a></h1> | ||
+ | |||
+ | <nav id="fh5co-menu-wrap" role="navigation"> | ||
+ | <ul class="sf-menu" id="fh5co-primary-menu"> | ||
+ | <li> | ||
+ | <a href="https://2017.igem.org/Team:Tsinghua-A/Project"><img src="https://static.igem.org/mediawiki/2017/0/06/Tsinghua-a-proico.png">Project</a></li> | ||
+ | <li> | ||
+ | <a><img src="https://static.igem.org/mediawiki/2017/0/0e/Tsinghua-a-expico.png">Experiment</a> | ||
+ | <ul class="fh5co-sub-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/design_of_characters">Design of characters</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/invertase_assay">Invertase assay</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/orthogonality_test">Orthogonality test</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/killing_test">Killing test</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a><img src="https://static.igem.org/mediawiki/2017/f/fc/Tsinghua-a-modelico.png">Model</a> | ||
+ | <ul class="fh5co-sub-menu"> | ||
+ | <li><a href="https://2017.igem.org/ Team:Tsinghua-A/Model ">Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/fluid_model">Fluid model</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/fluid_model/improved_gene_circuit">Improved gene circuit</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/fluid_model/regulation_of_killing_ability">Regulation of killing ability</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/solid_model">Solid model</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a><img src="https://static.igem.org/mediawiki/2017/e/e5/Tsinghua-a-gameico.png">Game</a> | ||
+ | <ul class="fh5co-sub-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/Game">Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/Game_Discovery">Discovery</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/fluid_game">Fluid game</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/solid_game">Solid game</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a><img src="https://static.igem.org/mediawiki/2017/7/72/Tsinghua-a-hpico.png">Human practice</a> | ||
+ | <ul class="fh5co-sub-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/HP/Gold_Integrated">Integrated human practice</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/Engagement">Education and public engagement</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a><img src="https://static.igem.org/mediawiki/2017/b/bc/Tsinghua-a-moreico.png"> More</a> | ||
+ | <ul class="fh5co-sub-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/Team">Team</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/Attributions">Attribution</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/Collaborations">Collaboration</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Tsinghua-A/Safety">Safety</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
+ | </div> | ||
+ | </header> | ||
+ | </div> | ||
+ | |||
+ | |||
<!-- start of content --> | <!-- start of content --> | ||
<div class="igem_2017_content_wrapper"> | <div class="igem_2017_content_wrapper"> |
Latest revision as of 00:58, 2 November 2017