Difference between revisions of "Template:NUS Singapore-A"

Line 1: Line 1:
<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>
 
<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() {
 
$(document).ready(function() {
  
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
 +
  
// call the functions that control the menu  
+
//highlight current page on the menu
menu_functionality();  
+
highlight_current_page_menu();
hide_show_menu();
+
 +
//accessing submenus
 +
$(".menu_item").click(function(){
 +
$(".submenu_control_icon", this).toggleClass("open");
 +
$(this).next(".submenu").fadeToggle(400);
 +
});
 +
 +
//mobile menu access
 +
$(".igem_2018_team_mobile_bar").click(function(){
 +
$(this).next().toggleClass("displaying_menu");
 +
});
 +
 +
});
  
  
 
+
function highlight_current_page_menu() {
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
function menu_functionality() {
+
var page_url="https://2018.igem.org/";
 
+
page_url = page_url + wgPageName;
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
$("a[href$='"+ page_url +"']").children().addClass("current_page");
$(".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");
+
 
 
}
+
//if the page is in a submenu, open the submenu and make the appropiate changes
 
+
if( $( ".current_page" ).hasClass( "submenu_item" )){
 
+
 
+
$(".current_page").parent().parent().fadeToggle(400);
// allow button on the black menu bar to show/hide the side menu
+
$(".current_page").parent().parent().prev().addClass("current_page");
function hide_show_menu() {
+
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
// 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>
 
</script>
 
 
<style>
 
 
 
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
/* Clear the default wiki settings */
 
     
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
 
/**************************************************************** MENU ***************************************************************/
 
 
 
/********** Class for spliting different section = Clear content below while adds extra spacing when clearing content **********/
 
.clear {
 
    clear:both;
 
    height: 50px;
 
}
 
 
.clear-largespace{
 
    clear:both;
 
    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 **************************************************/
 
 
.team-logo {
 
    width:%;
 
    height:140px;
 
    margin-left:20px;
 
    padding-top:5px;
 
    position:absolute;
 
}
 
 
.topmenu-container {
 
    overflow: hidden;
 
    background-color: #F8F9F9;
 
    padding-top:100px;
 
    margin:0;
 
    }
 
 
.topmenu-container a {
 
    float: right;
 
    font-family:"Comic Sans MS", sans-serif;
 
    font-size: 18px;
 
    color: #566573;
 
    text-align: center;
 
    padding: 19px 16px;
 
    text-decoration: none;
 
    border: none;
 
   
 
}
 
 
.dropdown {
 
    float: right;
 
    overflow: hidden;
 
}
 
 
.dropdown  .dropbtn {
 
    font-family:"Comic Sans MS", sans-serif;
 
    font-size: 18px;
 
    border: none;
 
    text-align: center;
 
    outline: none;
 
    color:  #566573;
 
    padding: 14px 16px;
 
    background-color: inherit;
 
}
 
 
.dropdown-content {
 
    display: none;
 
    position: absolute;
 
    background-color:#FFFFFF;
 
    min-width: 160px;
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
    z-index: 1;
 
}
 
 
.dropdown-content a {
 
    float: none;
 
    color: #566573;
 
    padding: 12px 16px;
 
    text-decoration: none;
 
    display: block;
 
    text-align: center;
 
}
 
 
 
/***************************************************    Hover effect of Top menu  ***************************************/
 
.topmenucontainer a:hover, .dropdown:hover .dropbtn {
 
    background-color: #AED6F1;
 
}
 
 
.dropdown-content a:hover {
 
    background-color: #ddd;
 
}
 
 
.dropdown:hover .dropdown-content {
 
    display: inline-block;
 
}
 
 
 
/***************************  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{
 
  width:100%;
 
  height:300px;
 
  background-color:#F0F3F4 ;
 
  position:absolute;
 
}
 
 
.footer-sponsor-container{
 
  width:70%; /*split the sponsor container from the full footer-container */
 
  background-color:inherit;
 
padding:20px;
 
  padding-top:30px;
 
  float:left;
 
}
 
 
.footer-contact-container{
 
  width:30%; /*split the sponsor container from the full footer-container */
 
  padding-top:20px;
 
  background-color:inherit;
 
  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;
 
}
 
 
}
 
 
</style>
 
 
 
 
<!--******************************************  Here is where the main content starts ******************************************-->
 
<body>
 
 
<!--  IGEM NUS LOGO  -->
 
<div><a href="https://2018.igem.org/Team:NUS_Singapore-A" ><img class="team-logo" src="https://static.igem.org/mediawiki/2018/2/21/T--NUS_Singapore-A--TeamLogo.jpg" height="140" width="140"></a></div>
 
 
<!-- Top Menu -->
 
<div class="topmenu-container">
 
 
<div class="dropdown">
 
    <button class="dropbtn">NOTEBOOK </button>
 
    <div class="dropdown-content">
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/LabBook">LAB BOOK</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medal">MEDAL CRITERIA</a>
 
    </div>
 
  </div>
 
 
  <div class="dropdown">
 
      <button class="dropbtn">TEAM </button>
 
      <div class="dropdown-content">
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">MEMBERS</a>
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions">ATTRIBUTIONS</a>
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors">SPONSORS</a>
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations">COLLABORATION</a>
 
      </div>
 
  </div>
 
 
 
  <div class="dropdown">
 
      <button class="dropbtn">HUMAN PRACTICE </button>
 
      <div class="dropdown-content">
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/Overview">OVERVIEW</a>
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/IntegratedHP">INTEGRATED HUMAN PRACTICE</a>
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/Interviews">INTERVIEWS</a>
 
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/PublicEngagement">PUBLIC ENGAGEMENT</a>
 
    </div>
 
  </div>
 
 
 
<div class="dropdown">
 
    <button class="dropbtn">HARDWARE </button>
 
    <div class="dropdown-content">
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">OVERVIEW</a>
 
    </div>
 
  </div>
 
 
  <div class="dropdown">
 
    <button class="dropbtn">MODELLING</button>
 
    <div class="dropdown-content">
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling">OVERVIEW</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Methodology">METHODOLOGY</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Model1">Model 1</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Model2">Model 2</a>
 
    </div>
 
  </div>
 
 
  <div class="dropdown">
 
    <button class="dropbtn">PROJECT </button>
 
    <div class="dropdown-content">
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">DESCRIPTION</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">DESIGN</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Experiments">EXPERIMENT</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Parts">PARTS</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstration">RESULT</a>
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">INTERLAB STUDY</a>
 
   
 
    </div>
 
  </div>
 
 
  <div class="dropdown">
 
      <a href="https://2018.igem.org/Team:NUS_Singapore-A">HOME </a>
 
  </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>
 
</html>
 

Revision as of 18:58, 17 June 2018

<script> ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$(document).ready(function() {

$("#HQ_page").attr('id',);


//highlight current page on the menu highlight_current_page_menu();

//accessing submenus $(".menu_item").click(function(){ $(".submenu_control_icon", this).toggleClass("open"); $(this).next(".submenu").fadeToggle(400); });

//mobile menu access $(".igem_2018_team_mobile_bar").click(function(){ $(this).next().toggleClass("displaying_menu"); });

});


function highlight_current_page_menu() {

var page_url="https://2018.igem.org/"; page_url = page_url + wgPageName; $("a[href$='"+ page_url +"']").children().addClass("current_page");

//if the page is in a submenu, open the submenu and make the appropiate changes if( $( ".current_page" ).hasClass( "submenu_item" )){

$(".current_page").parent().parent().fadeToggle(400); $(".current_page").parent().parent().prev().addClass("current_page"); $(".menu_item.current_page > .submenu_control_icon").toggleClass("open");

} }


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// </script>