Difference between revisions of "Template:ITB Indonesia"

Line 1: Line 1:
 
<html>
 
<html>
<script>
+
<head>
  
// 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>
 
 
 
 
 
 
<style>
 
 
 
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
 
/* Clear the default wiki settings */
 
 
#home_logo, #topMenu { display:none; }
 
#topMenu, #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; }
 
 
 
</style>
 
  
  
Line 110: Line 8:
 
.navbar {
 
.navbar {
 
     overflow: hidden;
 
     overflow: hidden;
     background-color: #333;
+
     background-color: #131514;
 
     font-family: Arial;
 
     font-family: Arial;
 
}
 
}
Line 126: Line 24:
 
     float: left;
 
     float: left;
 
     overflow: hidden;
 
     overflow: hidden;
 +
    width: 12.5%;
 +
    text-align: center;
 
}
 
}
  
Line 132: Line 32:
 
     border: none;
 
     border: none;
 
     outline: none;
 
     outline: none;
     color: white;
+
     color: #e8e6d1;
 
     padding: 14px 16px;
 
     padding: 14px 16px;
 
     background-color: inherit;
 
     background-color: inherit;
 +
    width: 100%;
 
}
 
}
  
 
.navbar a:hover, .dropdown:hover .dropbtn {
 
.navbar a:hover, .dropdown:hover .dropbtn {
     background-color: red;
+
     background-color: green;
 
}
 
}
  
Line 171: Line 72:
  
 
<div class="navbar">
 
<div class="navbar">
   <a href="#home" style="width: 12.5%">Home</a>
+
   <div class="dropdown">
   <a href="#news" style="width: 12.5%">News</a>
+
      <form action="https://2017.igem.org/Team:ITB_Indonesia">
   <div class="dropdown" style="width: 12.5%">
+
        <button type="submit" class="dropbtn">Home</button>
     <button class="dropbtn">Dropdown
+
      </form>
       <i class="fa fa-caret-down"></i>
+
    </div>
     </button>
+
 
     <div class="dropdown-content">
+
   <div class="dropdown">
      <a href="#">Link 1</a>
+
      <button class="dropbtn">Team</button>
       <a href="#">Link 2</a>
+
      <div class="dropdown-content">
       <a href="#">Link 3</a>
+
        <a href="https://2017.igem.org/Team:ITB_Indonesia/Team">Team</a>
     </div>
+
        <a href="https://2017.igem.org/Team:ITB_Indonesia/Collaborations">
  </div>  
+
      Collaborations</a>
 +
      </div>
 +
    </div>
 +
 
 +
   <div class="dropdown">
 +
      <button class="dropbtn">Project</button>
 +
      <div class="dropdown-content">
 +
        <a href="https://2017.igem.org/Team:ITB_Indonesia/Description">Description</a>
 +
        <a href="https://2017.igem.org/Team:ITB_Indonesia/Design">
 +
      Design</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Experiments">Experiments</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Notebook">Notebook</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/InterLab">InterLab</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Contribution">Contribution</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Model">Model</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Results">Results</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Demonstrate">Demonstrate</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Improve">Improve</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Attributions">Attributions</a>
 +
      </div>
 +
     </div>
 +
   
 +
    <div class="dropdown">
 +
      <button class="dropbtn">Parts</button>
 +
       <div class="dropdown-content">
 +
        <a href="https://2017.igem.org/Team:ITB_Indonesia/Parts">Parts</a>
 +
        <a href="https://2017.igem.org/Team:ITB_Indonesia/Basic_Part">Basic Parts</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Composite_Part">Composite Part</a>
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Part_Collection">Part Collection</a>
 +
      </div>
 +
     </div>
 +
 
 +
    <div class="dropdown">
 +
      <form action="https://2017.igem.org/Team:ITB_Indonesia/Safety">
 +
        <button type="submit" class="dropbtn">Safety</button>
 +
      </form>
 +
    </div>
 +
   
 +
     <div class="dropdown">
 +
      <button class="dropbtn">Human Practices</button>
 +
      <div class="dropdown-content">
 +
        <a href="https://2017.igem.org/Team:ITB_Indonesia/HP/Silver">Silver HP</a>
 +
        <a href="https://2017.igem.org/Team:ITB_Indonesia/HP/Gold_Integrated">Integrated and Gold</a>
 +
       <a href="https://2017.igem.org/Team:ITB_Indonesia/Engagement">Public Engagement</a>
 +
       </div>
 +
    </div>
 +
   
 +
    <div class="dropdown">
 +
      <button class="dropbtn">Awards</button>
 +
      <div class="dropdown-content">
 +
      <a href="https://2017.igem.org/Team:ITB_Indonesia/Applied_Design">Applied Design</a>
 +
        <a href="https://2017.igem.org/Team:ITB_Indonesia/Entrepreneurship">Entrepreneurship</a>
 +
      </div>
 +
     </div>  
 +
 
 +
    <div class="dropdown">
 +
      <form action="https://2017.igem.org/Team:ITB_Indonesia">
 +
        <button type="submit" class="dropbtn">Judging</button>
 +
      </form>
 +
    </div>  
 
</div>
 
</div>

Revision as of 14:52, 24 October 2017