(266 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
+ | </head> | ||
+ | <script> | ||
+ | |||
+ | // This is the jquery part of your template. | ||
+ | // Try not modify any of this code too much since it makes your menu work. | ||
+ | |||
+ | $(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> | ||
Line 7: | Line 95: | ||
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
− | |||
/* Clear the default wiki settings */ | /* Clear the default wiki settings */ | ||
− | + | ||
#home_logo, #sideMenu { display:none; } | #home_logo, #sideMenu { display:none; } | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
#content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | ||
body {background-color:white; } | body {background-color:white; } | ||
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
− | + | ||
− | + | ||
− | + | ||
/**************************************************************** MENU ***************************************************************/ | /**************************************************************** MENU ***************************************************************/ | ||
Line 24: | Line 108: | ||
/********** Class for spliting different section = Clear content below while adds extra spacing when clearing content **********/ | /********** Class for spliting different section = Clear content below while adds extra spacing when clearing content **********/ | ||
.clear { | .clear { | ||
− | + | clear:both; | |
height: 50px; | height: 50px; | ||
− | + | } | |
.clear-largespace{ | .clear-largespace{ | ||
clear:both; | clear:both; | ||
height: 100px; | height: 100px; | ||
+ | } | ||
+ | |||
+ | /********** Basic Content Class CSS Style **********/ | ||
+ | p { | ||
+ | font-family:"Montserrat", serif; | ||
+ | font-size: 18px; | ||
+ | line-height:150%; | ||
+ | text-align:justify; | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #b48608; | ||
+ | font-family: 'Bookman', serif; | ||
+ | font-size: 40px; | ||
+ | font-weight: 400; | ||
+ | line-height: 44px; | ||
+ | margin: 0 0 12px; | ||
+ | text-align: center; | ||
+ | font-weight: 1500; | ||
+ | text-decoration: underline; | ||
+ | border-style: none; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | color: #2E86C1; | ||
+ | font-family:"Calibri", serif; | ||
+ | font-size: 30px; | ||
+ | font-weight: 200; | ||
+ | line-height: 44px; | ||
+ | margin: 0 0 12px; | ||
+ | text-align: center; | ||
+ | font-weight: bold; | ||
+ | width:80%; | ||
+ | padding-left:10%; | ||
+ | padding-right:10%; | ||
+ | } | ||
+ | |||
+ | #teamh2 { | ||
+ | width:100%; | ||
+ | padding-left:0; | ||
+ | padding-right:0; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color:#FAA403; | ||
+ | font-family:"Calibri", serif; | ||
+ | font-size: 25px; | ||
+ | font-weight: 200; | ||
+ | line-height: 44px; | ||
+ | margin: 0 0 12px; | ||
+ | text-align: left; | ||
+ | font-weight:bold; | ||
+ | width:80%; | ||
+ | padding-left:10%; | ||
+ | padding-right:10%; | ||
} | } | ||
+ | |||
+ | h4 { | ||
+ | color:#b48608; | ||
+ | font-family:"Calibri", serif; | ||
+ | font-size: 20px; | ||
+ | font-weight: 180; | ||
+ | line-height: 44px; | ||
+ | margin: 0 0 12px; | ||
+ | text-align: center; | ||
+ | font-weight:bold; | ||
+ | width:80%; | ||
+ | padding-left:10%; | ||
+ | padding-right:10%; | ||
+ | } | ||
+ | |||
+ | .nus ul { | ||
+ | font-family:"Montserrat", serif; | ||
+ | font-size: 18px; | ||
+ | line-height:150%; | ||
+ | color:#000000; | ||
+ | |||
+ | } | ||
+ | |||
+ | .nus ol { | ||
+ | font-family:"Montserrat", serif; | ||
+ | font-size: 18px; | ||
+ | line-height:150%; | ||
+ | color:#000000; | ||
+ | } | ||
+ | .nus { | ||
+ | font-family:"Montserrat", serif; | ||
+ | font-size: 18px; | ||
+ | line-height:150%; | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | ul.nus { | ||
+ | font-family:"Montserrat", serif; | ||
+ | font-size: 18px; | ||
+ | line-height:150%; | ||
+ | color:#000000; | ||
+ | |||
+ | } | ||
+ | |||
+ | ol.nus { | ||
+ | font-family:"Montserrat", serif; | ||
+ | font-size: 18px; | ||
+ | line-height:150%; | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | |||
+ | /****************** image description subline ****************/ | ||
+ | #imgdescription { | ||
+ | font-size:15px; | ||
+ | width:60%; | ||
+ | padding-left:20%; | ||
+ | padding-right:20%; | ||
+ | font-style:oblique; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | /****************** Reference ****************/ | ||
+ | #Ref { | ||
+ | font-size:15px; | ||
+ | } | ||
+ | |||
+ | /************************************************** Back to top button style **************************************************/ | ||
+ | #BacktoTopBtn { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 30px; | ||
+ | z-index: 99; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | background-color: #F5B041; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | padding: 15px; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | |||
+ | #BacktoTopBtn:hover { | ||
+ | background-color: #2980B9; | ||
+ | } | ||
/************************************************** Top menu and Dropdown list **************************************************/ | /************************************************** Top menu and Dropdown list **************************************************/ | ||
+ | |||
+ | .team-logo { | ||
+ | width:20%; | ||
+ | height:140px; | ||
+ | margin-left:20px; | ||
+ | padding-top:5px; | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
.topmenu-container { | .topmenu-container { | ||
overflow: hidden; | overflow: hidden; | ||
− | background-color: # | + | background-color: #F8F9F9; |
− | + | padding-top:100px; | |
− | + | margin:0; | |
− | } | + | } |
.topmenu-container a { | .topmenu-container a { | ||
float: right; | float: right; | ||
− | font-size: | + | font-family:"Comic Sans MS", sans-serif; |
− | color: | + | font-size: 18px; |
+ | color: #566573; | ||
text-align: center; | text-align: center; | ||
− | padding: | + | padding: 19px 16px; |
text-decoration: none; | text-decoration: none; | ||
+ | border: none; | ||
+ | |||
} | } | ||
Line 53: | Line 291: | ||
float: right; | float: right; | ||
overflow: hidden; | overflow: hidden; | ||
− | } | + | } |
− | .dropdown .dropbtn { | + | .dropdown .dropbtn { |
− | font-size: | + | font-family:"Comic Sans MS", sans-serif; |
+ | font-size: 18px; | ||
border: none; | border: none; | ||
+ | text-align: center; | ||
outline: none; | outline: none; | ||
− | color: | + | color: #566573; |
padding: 14px 16px; | padding: 14px 16px; | ||
background-color: inherit; | background-color: inherit; | ||
Line 67: | Line 307: | ||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
− | background-color: # | + | background-color:#FFFFFF; |
min-width: 160px; | min-width: 160px; | ||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
Line 75: | Line 315: | ||
.dropdown-content a { | .dropdown-content a { | ||
float: none; | float: none; | ||
− | color: | + | color: #566573; |
padding: 12px 16px; | padding: 12px 16px; | ||
text-decoration: none; | text-decoration: none; | ||
Line 81: | Line 321: | ||
text-align: center; | text-align: center; | ||
} | } | ||
+ | |||
/*************************************************** Hover effect of Top menu ***************************************/ | /*************************************************** Hover effect of Top menu ***************************************/ | ||
.topmenucontainer a:hover, .dropdown:hover .dropbtn { | .topmenucontainer a:hover, .dropdown:hover .dropbtn { | ||
− | background-color: | + | background-color: #AED6F1; |
} | } | ||
Line 95: | Line 336: | ||
} | } | ||
− | /************************************************** | + | |
+ | /*************************** Social contact link *************************/ | ||
+ | .fa { | ||
+ | padding: 20px; | ||
+ | font-size: 30px; | ||
+ | width: 30px; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | border-radius: 50%; | ||
+ | } | ||
+ | |||
+ | .fa:hover { | ||
+ | opacity: 0.7; | ||
+ | } | ||
+ | |||
+ | .fa-facebook { | ||
+ | background: #3B5998; | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | |||
+ | .fa-instagram { | ||
+ | background: #125688; | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | |||
+ | .fa-google { | ||
+ | background: #dd4b39; | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | |||
+ | /************************ Quick Link Footer **************************/ | ||
+ | .quicklink p { | ||
+ | background-color:#F0F3F4; | ||
+ | width:100%; | ||
+ | text-align: center; | ||
+ | height:60px; | ||
+ | padding:10px; | ||
+ | margin:0px; | ||
+ | font-weight: bold; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | .quicklink-container { | ||
+ | background-color:#F0F3F4; | ||
+ | width:100%; | ||
+ | height:200px; | ||
+ | position:absolute; | ||
+ | } | ||
+ | .quicklink-1 { | ||
+ | background-color:#F0F3F4; | ||
+ | width:25%; | ||
+ | height:300px; | ||
+ | padding-left:7%; | ||
+ | padding-right:7%; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | |||
+ | } | ||
+ | .quicklink-2 { | ||
+ | background-color:#F0F3F4; | ||
+ | width:25%; | ||
+ | height:300px; | ||
+ | padding-left:7%; | ||
+ | padding-right:7%; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .quicklink-3 { | ||
+ | background-color:#F0F3F4; | ||
+ | width:25%; | ||
+ | height:300px; | ||
+ | padding-left:7%; | ||
+ | padding-right:7%; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .quicklink-4 { | ||
+ | background-color:#F0F3F4; | ||
+ | width:25%; | ||
+ | height:300px; | ||
+ | padding-left:7%; | ||
+ | padding-right:7%; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .quicklink-4 a { | ||
+ | color:#808B96; | ||
+ | font-size:15px; | ||
+ | } | ||
+ | .quicklink-3 a { | ||
+ | color:#808B96; | ||
+ | font-size:15px; | ||
+ | } | ||
+ | .quicklink-2 a { | ||
+ | color:#808B96; | ||
+ | font-size:15px; | ||
+ | } | ||
+ | .quicklink-1 a { | ||
+ | color:#808B96; | ||
+ | font-size:15px; | ||
+ | } | ||
+ | |||
+ | /**************************************** Sponsor and Social Connact Link Cover ****************************************/ | ||
.footer-container{ | .footer-container{ | ||
width:100%; | width:100%; | ||
height:300px; | height:300px; | ||
− | + | background-color:#F0F3F4 ; | |
− | background-color:# | + | |
position:absolute; | position:absolute; | ||
} | } | ||
− | + | .footer-sponsor-container{ | |
width:70%; /*split the sponsor container from the full footer-container */ | width:70%; /*split the sponsor container from the full footer-container */ | ||
background-color:inherit; | background-color:inherit; | ||
− | padding-top: | + | padding:20px; |
+ | padding-top:30px; | ||
float:left; | float:left; | ||
} | } | ||
− | + | .footer-contact-container{ | |
width:30%; /*split the sponsor container from the full footer-container */ | width:30%; /*split the sponsor container from the full footer-container */ | ||
− | + | padding-top:20px; | |
− | + | ||
background-color:inherit; | background-color:inherit; | ||
float:right; | float:right; | ||
+ | } | ||
+ | |||
+ | img.social-icon { | ||
+ | margin:2%; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /*Responsive Deisgn*/ | ||
+ | |||
+ | |||
+ | /********************* Responsive Design *********************/ | ||
+ | |||
+ | /* | ||
+ | ##Device = Tablets, Ipads (landscape) | ||
+ | ##Screen = B/w 768px to 1024px | ||
+ | */ | ||
+ | |||
+ | @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { | ||
+ | |||
+ | } | ||
+ | |||
+ | /* | ||
+ | ##Device = Most of the Smartphones Mobiles (Portrait) | ||
+ | ##Screen = B/w 320px to 479px | ||
+ | ##Device = Tablets, Ipads (portrait) | ||
+ | ##Screen = B/w 768px to 1024px | ||
+ | */ | ||
+ | |||
+ | @media (min-width: 0px) and (max-width: 1024px) { | ||
+ | |||
+ | /*Basics*/ | ||
+ | p { | ||
+ | font-size: 13px; | ||
+ | } | ||
+ | |||
+ | .nus ul{ | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | |||
+ | .nus ol { | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | |||
+ | ol.nus { | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | |||
+ | ul.nus { | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | |||
+ | .nus { | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: 28px; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | #imgdescription { | ||
+ | font-size:8px; | ||
+ | } | ||
+ | |||
+ | /*drop down menu*/ | ||
+ | .team-logo { | ||
+ | margin:0px; | ||
+ | width:100%; | ||
+ | height:200px; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .topmenu-container { | ||
+ | padding:10px; | ||
+ | } | ||
+ | |||
+ | .topmenu-container a{ | ||
+ | font-size: 18px; | ||
+ | padding: 8px 5px; | ||
+ | font-weight:1000; | ||
+ | } | ||
+ | |||
+ | .dropdown .dropbtn { | ||
+ | font-size: 18px; | ||
+ | padding: 7px 4px; | ||
+ | font-weight:1000; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .dropdown-content { | ||
+ | min-width: 10px; | ||
+ | box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | .dropdown-content a{ | ||
+ | padding: 8px; | ||
+ | } | ||
+ | |||
+ | .social-icon img { | ||
+ | width:25%; | ||
+ | display:block; | ||
+ | padding:5px; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | #Ref { | ||
+ | font-size:8px; | ||
+ | } | ||
+ | |||
+ | /****************** image description subline ****************/ | ||
+ | #imgdescription { | ||
+ | font-size:8px; | ||
+ | width:80%; | ||
+ | padding-left:10%; | ||
+ | padding-right:10%; | ||
+ | font-style:oblique; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | /************************************************** Back to top button style **************************************************/ | ||
+ | #BacktoTopBtn { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | bottom: 3px; | ||
+ | right: 5px; | ||
+ | z-index: 99; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | background-color: #F5B041; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | padding: 5px; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | |||
+ | #BacktoTopBtn:hover { | ||
+ | background-color: #2980B9; | ||
+ | } | ||
+ | |||
} | } | ||
Line 125: | Line 626: | ||
<!--****************************************** Here is where the main content starts ******************************************--> | <!--****************************************** Here is where the main content starts ******************************************--> | ||
<body> | <body> | ||
+ | |||
+ | <!-- IGEM NUS LOGO --> | ||
+ | <div><a href="https://2017.igem.org/Team:NUS_Singapore" ><img class="team-logo" src="https://static.igem.org/mediawiki/2017/0/0c/NUS_2017_IGEM_Logo3.png"></a></div> | ||
<!-- Top Menu --> | <!-- Top Menu --> | ||
<div class="topmenu-container"> | <div class="topmenu-container"> | ||
− | + | <div class="dropdown"> | |
− | <a href=" | + | <button class="dropbtn">Awards Check </button> |
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Measurement">Measurement</a> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Model">Modelling</a> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Medal Check List">Medal Check List</a> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <a href=" | + | <button class="dropbtn">Team</button> |
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Team">Team Member</a> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Attributions">Attributions</a> | ||
+ | </div> | ||
</div> | </div> | ||
− | + | <div class="dropdown"> | |
+ | <button class="dropbtn">Collaboration</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Collaborations">Collaboration</a> | ||
+ | </div> | ||
+ | </div> | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | + | <button class="dropbtn">Human Practice</button> | |
− | + | <div class="dropdown-content"> | |
− | + | <a href="https://2017.igem.org/Team:NUS_Singapore/HP/Silver">Silver Up</a> | |
− | + | <a href="https://2017.igem.org/Team:NUS_Singapore/HP/Gold_Integrated">Gold Integrated</a> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <button class="dropbtn"> | + | <button class="dropbtn">Modelling</button> |
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href=" | + | <a href="https://2017.igem.org/Team:NUS_Singapore/Overview">Overview</a> |
− | <a href=" | + | <a href="https://2017.igem.org/Team:NUS_Singapore/Methodology">Methodology</a> |
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Model_P">Kill Switch for Probiotics</a> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Model_B">Kill Switch for BeeT</a> | ||
</div> | </div> | ||
− | + | </div> | |
<div class="dropdown"> | <div class="dropdown"> | ||
<button class="dropbtn">Projects</button> | <button class="dropbtn">Projects</button> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href="https://2017.igem.org/Team:NUS_Singapore/Description | + | <a href="https://2017.igem.org/Team:NUS_Singapore/Description">Description</a> |
− | <a href="https://2017.igem.org/Team:NUS_Singapore/ | + | <a href="https://2017.igem.org/Team:NUS_Singapore/InterLab">Interlab Study</a> |
− | <a href="https://2017.igem.org/Team:NUS_Singapore/Experiments | + | <a href="https://2017.igem.org/Team:NUS_Singapore/Parts">Parts</a> |
− | <a href="https://2017.igem.org/Team:NUS_Singapore/Notebook | + | <a href="https://2017.igem.org/Team:NUS_Singapore/Experiments">Experiment</a> |
− | <a href="https://2017.igem.org/Team:NUS_Singapore/ | + | <a href="https://2017.igem.org/Team:NUS_Singapore/Notebook">Documentation</a> |
− | <a href="https://2017.igem.org/Team:NUS_Singapore/ | + | <a href="https://2017.igem.org/Team:NUS_Singapore/Improvement">Improvement</a> |
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Demonstrate">Demonstrate</a> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Safety">Safety</a> | ||
+ | <a href="https://2017.igem.org/Team:NUS_Singapore/Future Work">Future Works</a> | ||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <a href="https://2017.igem.org/Team:NUS_Singapore | + | <a href="https://2017.igem.org/Team:NUS_Singapore">Home</a> |
</div> | </div> | ||
</div> | </div> | ||
+ | <!--*********************************************** Back to top button ***********************************************--> | ||
+ | <button onclick="topFunction()" id="BacktoTopBtn" title="Go to top">Back to Top</button> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | //**************************************** Back to top button Javascript ****************************************// | ||
+ | // When the user scrolls down 50px from the top of the document, show the button | ||
+ | window.onscroll = function() {scrollFunction()}; | ||
+ | |||
+ | function scrollFunction() { | ||
+ | if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) { | ||
+ | document.getElementById("BacktoTopBtn").style.display = "block"; | ||
+ | } else { | ||
+ | document.getElementById("BacktoTopBtn").style.display = "none"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // When the user clicks on the button, scroll to the top of the document | ||
+ | function topFunction() { | ||
+ | document.body.scrollTop = 0; | ||
+ | document.documentElement.scrollTop = 0; | ||
+ | } | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 16:54, 1 November 2017