Difference between revisions of "Template:KU Leuven"

 
(171 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
−
<script>
+
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:KU_Leuven/bootstrapcss?action=raw&ctype=text/css"/>
 +
<script type="text/javascript" src="https://2017.igem.org/Template:KU_Leuven/bootstrapjs?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2017.igem.org/Template:KU_Leuven/scrollrjs?action=raw&ctype=text/javascript"></script>
 +
<style>/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
  
−
// This is the jquery part of your template.   
+
/* Clear the default wiki settings */
−
// Try not modify any of this code too much since it makes your menu work.
+
 +
#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; }
 +
#bodyContent > p, #mw-content-text > p, .igem_2017_content_wrapper > p {
 +
display: none !important;
 +
}
 +
#content {
 +
margin:0;
 +
}
  
−
$(document).ready(function() {
+
#globalWrapper {
 +
font-size: auto;
 +
padding: 0 !important;
 +
}
 +
  
−
$("#HQ_page").attr('id','');
+
@charset "UTF-8";
 +
 +
*,:after,:before,input[type=checkbox],input[type=radio]{
 +
-webkit-box-sizing:border-box;-moz-box-sizing:border-box
 +
}
 +
 +
#content,td,th{
 +
padding:0
 +
}
 +
 +
.btn-group>.btn-group,.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.dropdown-menu{
 +
float:left
 +
}
  
−
// call the functions that control the menu
+
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.pre-scrollable{
−
menu_functionality();  
+
max-height:340px
−
hide_show_menu();
+
}
 +
.fa,.zmdi{
 +
text-rendering:auto;-moz-osx-font-smoothing:grayscale
 +
}
 +
.fa,.glyphicon,.zmdi{
 +
-moz-osx-font-smoothing:grayscale
 +
}
 +
.fa-ul,.zmdi-hc-ul,ul,ul li{
 +
list-style-type:none
 +
}
 +
.owl-carousel,.owl-carousel .owl-item,.waves-effect,a,html{
 +
-webkit-tap-highlight-color:transparent
 +
}
 +
#content{
 +
margin:0;background:0 0;border:none;width:100%
 +
}
 +
#catlinks,#contentSub,#footer-box,#search-controls,.firstHeading{
 +
display:none
 +
}
 +
#top-section{
 +
border:none;height:0
 +
}
 +
#globalWrapper{
 +
font-size:100%
 +
}
 +
h1,h2,h3,h4,h5,h6{
 +
border-bottom:0 transparent
 +
}
 +
table,td,th{
 +
margin-bottom:none
 +
}
 +
a:visited{
 +
color:#66cdaa
 +
}
 +
div{
 +
display:block
 +
}
 +
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
 +
margin: 0;
 +
}
 +
li,ul {
 +
margin: 0;
 +
list-style: none !important;
 +
}
  
 +
#HQ_page .highlight:hover {
 +
background-color: inherit;
 +
cursor: inherit;
 +
}
 +
 +
  
  
−
//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
+
/********************************* NAVBAR STYLING  *********************************/
−
$(".menu_button").click(function(){
+
 +
.navbar {
 +
background-color: #f2f2f2;
 +
border-bottom: 2px solid #cc3333;
 +
padding-top: 16px;
  
−
// add or remove the class "open" , this class holds the "-"
+
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
−
$(this).children().toggleClass("open");
+
box-shadow: 0 6px 12px rgba(0,0,0,.175);
−
// 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
+
.navbar * {
−
$("#display_menu_control").click(function(){
+
font-family: 'Lato', Tahoma !important;
−
$('#menu_content').fadeToggle(400);
+
font-weight: bold;
−
});
+
}
  
−
// call the current page highlight function
+
.navbar-brand{
−
highlight_current_page();
+
padding: 0;
−
}
+
}
  
 +
.nav > li:focus, .nav > li:hover {
 +
background-color: #cc3333;
 +
color: #ffffff;
 +
}
  
−
// call the highlight current page function to show it on the menu with a different background color
+
.navbar-default .navbar-nav .active > a {
−
function highlight_current_page() {
+
background-color: #f2f2f2;
 +
color: #cc3333 !important;
 +
}
  
−
// 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
+
.navbar-default .navbar-nav .dropdown-menu .active > a::before {
−
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
content: '';
 +
position: absolute;
 +
width: 16px ;
 +
height: 16px;
 +
top: 6px;
 +
left: -9px;
 +
background-image: url("https://static.igem.org/mediawiki/2017/1/13/KU_Leuven-selector.png");
 +
background-size: 16px 16px;
 +
}
  
−
// 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");
 
−
 
−
}
 
  
 +
.navbar-default .navbar-nav > li > a {
 +
color: inherit !important;
 +
}
  
 +
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
 +
background-color: #cc3333 !important;
 +
color: #ffffff !important;
 +
}
  
−
// allow button on the black menu bar to show/hide the side menu
+
.dropdown-menu > li {
−
function hide_show_menu() {
+
background-color: #f2f2f2;
 +
position: relative;
 +
}
 
 
−
// in case you preview mode is selected, the menu is hidden for better visibility
+
.dropdown-menu > li > a:hover, .dropdown-menu > li >a:focus{
−
if (window.location.href.indexOf("submit") >= 0) {
+
color: #cc3333 !important;
−
$(".igem_2017_menu_wrapper").hide();
+
background-color: inherit !important;
−
}
+
}
  
−
// if the black menu bar has been loaded
+
.dropdown-menu > li:hover::before, .dropdown-menu > li:focus::before {
−
  if (document.getElementById('bars_item')) {
+
content: '';
 +
position: absolute;
 +
width: 16px ;
 +
height: 16px;
 +
top: 6px;
 +
left: -9px;
 +
background-image: url("https://static.igem.org/mediawiki/2017/1/13/KU_Leuven-selector.png");
 +
background-size: 16px 16px;
 +
}
  
−
// when the "bars_item" has been clicked
+
.navbar-nav > li > .dropdown-menu {
−
$("#bars_item").click(function() {
+
padding: 0;
−
$("#sideMenu").hide();
+
border: 0;
 +
border-left: 2px solid #cc3333;
 +
border-top: 2px solid #cc3333;
 +
min-width: 100%;
 +
border-radius: 0;
  
−
// 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
+
span.caret {
−
else {
+
margin-left: 4px;
−
    setTimeout(hide_show_menu, 15);
+
}
−
}
+
−
}
+
  
 +
/********************************* FOOTER STYLING  *********************************/
  
−
});
+
footer {
 +
background-color: #f2f2f2;
 +
color: #333333;
 +
font-family: 'Lato', Tahoma, Geneva, sans-serif;
 +
}
  
 +
footer #sponsors {
 +
text-align: center;
 +
padding: 0;
 +
}
  
−
</script>
+
footer #sponsors li {
 +
height: 5em;
 +
padding: 5px;
 +
opacity: 0.75;
 +
}
  
 +
footer #sponsors li.col-sm-6 {
 +
height: 10em;
 +
}
  
 +
footer #sponsors li:hover {
 +
z-index: 10;
 +
opacity: 1;
 +
}
  
 +
footer #sponsors li div {
 +
//border: 1px solid #333;
 +
border-radius: 5px;
 +
background-color: #f2f2f2;
 +
height: 100%;
 +
width: 100%;
 +
padding: 4px;
 +
//-webkit-box-shadow: 0 0px 4px rgba(0,0,0,.175);
 +
//box-shadow: 0 0px 4px rgba(0,0,0,.175);
 +
}
  
  
−
<style>
 
  
 +
footer #sponsors img {
 +
height: auto;
 +
max-height: 100%;
 +
width: auto;
 +
max-width: 100%;
 +
}
  
−
 
+
footer .social > * {
−
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
height: 10em;
−
+
padding: 0px;
−
/* Clear the default wiki settings */
+
background-repeat: no-repeat;
−
+
background-origin: center;
−
#home_logo, #sideMenu { display:none; }
+
text-align: center;
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
color: #ffffff;
−
#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 ***************************************************************/
+
−
/* Wrapper for the menu */
+
−
.igem_2017_menu_wrapper {  
+
−
width: 15%;
+
−
height:100vh;
+
−
position:fixed;
+
−
right:0%;
+
−
padding:0px;
+
−
float:right;
+
−
border-left: 1px solid #d3d3d3;  
+
−
background-color:#dddddd;  
+
−
text-align:left;
+
−
font-family:Tahoma, Geneva, sans-serif;
+
−
overflow-y: auto;
+
−
overflow-x: hidden;
+
 
}
 
}
  
−
/* this hides the scrollbar to keep view consistency */
+
footer .social{
−
.igem_2017_menu_wrappe::-webkit-scrollbar {
+
text-align: center;
−
display: none;
+
−
}
+
−
+
−
+
−
/* styling for links in the menu, removes the line under text */
+
−
.igem_2017_menu_wrapper a {
+
−
text-decoration: none;  
+
 
}
 
}
  
−
        .igem_2017_menu_wrapper .banner img {
+
footer .social a {
−
                padding: 4px 0px;
+
position: relative;
−
                border-bottom: 2px solid #c33;
+
−
        }
+
−
       
+
−
        .igem_2017_menu_wrapper .banner img {
+
−
                background-color: #fff;
+
−
        }
+
−
 
+
−
/* styling for the images in the menu */
+
−
.igem_2017_menu_wrapper img {  
+
−
width: 100%;
+
 
}
 
}
  
−
/* styling for the menu buttons */
+
footer .social > *:hover {
−
.igem_2017_menu_wrapper .menu_button {  
+
opacity: 0.9;
−
width: 100%;
+
−
padding: 10px 0px 10px 15px;
+
−
float:left;
+
−
border-bottom: 1px solid #d3d3d3;
+
−
font-size: 12px;
+
−
font-weight: bold;
+
−
color: #5e5f5f;  
+
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
  
−
 
+
footer .social img {
−
.igem_2017_menu_wrapper .menu_bottom_padding {  
+
height: 50px;
−
width: 100%;
+
margin: 0;
−
height: 30px;
+
−
float:left;
+
 
}
 
}
  
−
.menu_button.direct_to_page {  
+
footer .social h2 {
−
padding-left: 36px;
+
margin-top: 0px;
 +
padding-top: 20px;
 
}
 
}
  
−
 
+
footer .social a {
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
+
color: inherit;
−
width:10%;
+
text-decoration: inherit;
−
float:left;
+
padding-right: 0;
 
}
 
}
  
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
+
footer #facebook {background-color: #3b5998;}
−
content: "+";
+
−
}
+
 
 
−
.open::before {
+
footer #twitter {background-color: #4099ff;}
−
content: "-" !important;
+
−
}
+
footer #youtube {background-color: #e33a40;}
 
 
−
+
footer #instagram {background-color: #e3883a;}
−
+
−
/* styling for the menu buttons on hover */
+
−
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
+
−
background-color: #cc3333;
+
−
text-decoration: none;
+
−
color:#ffffff;  
+
−
}
+
  
−
/* styling for the menu button when it is the current page */
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
−
.current_page {
+
−
background-color:#e33e3e !important;
+
−
color:#ffffff!important;
+
−
}
+
  
 +
/* Wrapper for the content */
 +
.igem_2017_content_wrapper {
 +
padding-top: 50px;
 +
padding-bottom: 0px;
 +
width: 100%;
 +
display: block;
 +
position: relative;
  
−
/* styling for the submenu buttons */
+
font-family: 'Lato', Tahoma, Geneva, sans-serif;  
−
.igem_2017_menu_wrapper .submenu_button {
+
−
width: 100%;
+
−
padding: 10px 0px 10px 34px;
+
−
float:left;
+
−
background-color:#f2f2f2;
+
−
border-bottom: 1px solid #d3d3d3;
+
−
font-size: 12px;
+
−
color: #5e5f5f;
+
−
cursor: pointer;
+
 
}
 
}
  
−
/* wrapper for the submenu items, they are hidden by default*/
+
body {
−
.igem_2017_menu_wrapper .submenu_wrapper {  
+
background-color: #f2f2f2;
−
display:none;
+
 
}
 
}
  
−
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
+
@keyframes scroller {
−
.igem_2017_menu_wrapper #display_menu_control {
+
    0%  {left: -16px;}
−
display:none;
+
    100% {left: 100%;}
−
text-align:center;
+
 
}
 
}
−
 
  
−
/***************************************************** CONTENT OF THE PAGE ****************************************************/
+
#letmescroll {
−
 
+
    display: block;
−
/* Wrapper for the content */
+
    position: absolute;
−
.igem_2017_content_wrapper {
+
    height: 12px;
−
width: 81%;
+
    bottom: -7px;
−
margin: 2%;
+
    z-index: 20;
−
display:block;
+
    animation-name: scroller;
−
float:left;  
+
    animation-duration: 16s;
−
background-color:white;  
+
    animation-iteration-count: infinite;
−
font-family:Tahoma, Geneva, sans-serif;  
+
    animation-timing-function: linear;
 
}
 
}
−
 
  
 
/********************************* HTML STYLING  *********************************/
 
/********************************* HTML STYLING  *********************************/
Line 242: Line 314:
 
/* styling for the titles h1 h2 */
 
/* styling for the titles h1 h2 */
 
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
−
padding:5px 15px;  
+
padding: 5px 15px;  
 
border-bottom: 0px;  
 
border-bottom: 0px;  
 
color: #cc3333;
 
color: #cc3333;
 +
font-family: 'Lato', Tahoma, Geneva, sans-serif !important;
 +
font-weight: 100 !important;
 
}
 
}
  
 +
.igem_2017_content_wrapper .jumbotron{
 +
padding-top: 0;
 +
}
 +
 +
.igem_2017_content_wrapper .jumbotron h1{
 +
color: #333333;
 +
text-transform: uppercase;
 +
font-size: 3em;
 +
}
 +
 +
.igem_2017_content_wrapper .team .jumbotron{
 +
background-color: #f2f2f2;
 +
background-size: contain;
 +
background-position: bottom;
 +
background-repeat: repeat-x;
 +
}
 +
 +
.igem_2017_content_wrapper .puzzle .jumbotron{
 +
background-image: url('https://static.igem.org/mediawiki/2017/2/26/KU_Leuven-puzzle_bg.png');
 +
background-color: #f2f2f2;
 +
background-size: contain;
 +
background-position: bottom;
 +
background-repeat: repeat-x;
 +
}
 +
 +
.igem_2017_content_wrapper .notes .jumbotron{
 +
background-image: url('https://static.igem.org/mediawiki/2017/2/20/KU_Leuven-notes_bg.png');
 +
background-color: #f2f2f2;
 +
background-size: contain;
 +
background-position: bottom;
 +
background-repeat: repeat-x;
 +
}
  
 
/* styling for the titles  h3 h4 h5 h6*/
 
/* styling for the titles  h3 h4 h5 h6*/
Line 252: Line 358:
 
padding:5px 15px;  
 
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #000000;   
+
color: #333333;   
 
}
 
}
  
Line 258: Line 364:
 
/* font and text */
 
/* font and text */
 
.igem_2017_content_wrapper p {  
 
.igem_2017_content_wrapper p {  
−
padding: 0px 15px;  
+
padding: 10px 15px;  
 
font-size: 13px;
 
font-size: 13px;
 
}
 
}
Line 278: Line 384:
 
.igem_2017_content_wrapper a:hover {  
 
.igem_2017_content_wrapper a:hover {  
 
text-decoration:none;
 
text-decoration:none;
−
color:#000000;
+
color:#333333;
 
}
 
}
  
Line 285: Line 391:
 
padding:0px 20px;
 
padding:0px 20px;
 
font-size: 13px;
 
font-size: 13px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:'Lato', Tahoma, Geneva, sans-serif;  
 
}
 
}
 +
#grad {
 +
    background: -webkit-linear-gradient(#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2); /* Safari 5.1-6.0 */
 +
    background: -o-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Opera 11.1-12.0 */
 +
    background: -moz-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Firefox 3.6-15 */
 +
    background: linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Standard syntax */
 +
    }
  
 
/* numbered lists */
 
/* numbered lists */
Line 292: Line 404:
 
padding:0px;  
 
padding:0px;  
 
font-size: 13px;
 
font-size: 13px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:'Lato', Tahoma, Geneva, sans-serif;  
 
}
 
}
  
Line 318: Line 430:
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
background-color:#f2f2f2;  
 
background-color:#f2f2f2;  
 +
}
 +
 +
/********************************** TEAM MEMBERS **********************************/
 +
 +
#team .person {
 +
position: relative;
 +
height: 24em;
 +
}
 +
 +
#team .person * {
 +
}
 +
 +
#team .person .image {
 +
width: 100%;
 +
border-bottom: 2px solid #cc3333;
 +
position: relative;
 +
padding: 10px 20px;
 +
text-align: center;
 +
height: 20em;
 +
}
 +
 +
#team .person .image img {
 +
width: auto;
 +
height: 18em;
 +
}
 +
 +
#team .person .image::after {
 +
    position: absolute;
 +
width: 16px ;
 +
height: 16px;
 +
bottom: -9px;
 +
left: 8px;
 +
content: '';
 +
background-image: url("https://static.igem.org/mediawiki/2017/2/29/KU_Leuven-Sine.png");
 +
background-size: 16px 16px;
 +
}
 +
 +
#team .person h2{
 +
font-size: 1.8em;
 +
margin: 0;
 +
text-align: right;
 +
}
 +
 +
#team .person p{
 +
display: none;
 +
-webkit-transition: all 0.5s linear;
 +
-moz-transition: all 0.5s linear;
 +
-o-transition: all 0.5s linear;
 +
transition: all 0.5s linear;
 +
 +
}
 +
 +
#team .person:hover p{
 +
display: block;
 +
}
 +
 +
#team .person:hover .image{
 +
height: 0;
 +
}
 +
 +
#team .person:hover .image img{
 +
height: 0;
 +
}
 +
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
 +
@media only screen and (max-width: 990px) {
 +
#team .person {
 +
position: relative;
 +
height: auto;
 +
}
 +
 +
#team .person p{
 +
display: block;
 +
}
 +
 +
#team .person .image{
 +
height: 0;
 +
}
 +
 +
#team .person .image img{
 +
height: 0;
 +
}
 
}
 
}
  
  
−
/**********************************LAYOUT CLASSES **********************************/
+
/********************************** LAYOUT CLASSES **********************************/
  
 
/* general class for column divs */
 
/* general class for column divs */
Line 369: Line 563:
 
/* highlight class, makes content slightly smaller */
 
/* highlight class, makes content slightly smaller */
 
.igem_2017_content_wrapper .highlight {  
 
.igem_2017_content_wrapper .highlight {  
−
margin: 0px 15px;
+
margin: 15px 0px;
−
padding: 15px 0px;
+
 
}
 
}
  
Line 381: Line 574:
 
/* highlight with decoration blue line on top */
 
/* highlight with decoration blue line on top */
 
.igem_2017_content_wrapper .highlight.top {
 
.igem_2017_content_wrapper .highlight.top {
−
     border-top: 4px solid #cc3333;
+
     border-top: 2px solid #cc3333;
 
         position: relative;
 
         position: relative;
 
}
 
}
Line 388: Line 581:
 
.igem_2017_content_wrapper .highlight.top::before {
 
.igem_2017_content_wrapper .highlight.top::before {
 
     position: absolute;
 
     position: absolute;
−
width: 16px ;
+
width: 16px ;
−
height: 16px;
+
height: 16px;
−
top: -10px;
+
top: -9px;
−
left: 8px;
+
left: 8px;
−
content: '';
+
content: '';
−
background-image: url("https://static.igem.org/mediawiki/2017/2/29/KU_Leuven-Sine.png");
+
background-image: url("https://static.igem.org/mediawiki/2017/2/29/KU_Leuven-Sine.png");
−
background-size: 16px 16px;
+
background-size: 16px 16px;
 
}
 
}
  
Line 419: Line 612:
 
.igem_2017_content_wrapper .button:hover{
 
.igem_2017_content_wrapper .button:hover{
 
background-color: #3399ff;
 
background-color: #3399ff;
−
     color: #000000;
+
     color: #333333;
 
}
 
}
  
Line 465: Line 658:
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
−
+
</style>
−
</style>
+
<script>// This is the jquery part of your template. 
 +
// Try not modify any of this code too much since it makes your menu work.
  
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
  
 +
$(document).ready(function() {
  
 +
// Add slideDown animation to Bootstrap dropdown when expanding.
 +
$('.dropdown').on('show.bs.dropdown', function() {
 +
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(100);
 +
});
  
−
<head>
+
// Add slideUp animation to Bootstrap dropdown when collapsing.
 +
$('.dropdown').on('hide.bs.dropdown', function() {
 +
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(100);
 +
});
  
−
<!-- This tells the browser that your page is responsive -->
+
$("#HQ_page").attr('id','');
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  
−
</head>
+
// call the functions that control the menu
 +
menu_functionality();
 +
hide_show_menu();
  
  
  
−
<div class="igem_2017_menu_wrapper" >
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
function menu_functionality() {
 +
// 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() {
  
−
<a class="banner" href="https://2017.igem.org/Team:KU_Leuven">
+
// 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
−
                <img src="https://static.igem.org/mediawiki/2017/5/5f/KU_Leuven-Logo_Banner.gif"/>
+
$(".active").removeClass("active");
−
        </a>
+
selected = $("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ).replace(":", "") + "_page");
 +
selected.addClass("active");
 +
selected.parents(".dropdown").addClass("active");
 +
}
  
  
−
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
−
<div class="menu_button" id="display_menu_control">
 
−
MENU 
 
−
</div>
 
  
−
<div id="menu_content">
+
// allow button on the black menu bar to show/hide the side menu
−
+
function hide_show_menu() {
  
 +
// if the black menu bar has been loaded
 +
if (document.getElementById('bars_item')) {
  
 +
// when the "bars_item" has been clicked
 +
$("#bars_item").click(function() {
 +
// show/hide the menu wrapper
 +
$("nav").fadeToggle();
 +
});
 +
}
  
−
<a href="https://2017.igem.org/Team:KU_Leuven">
+
// 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
−
<div class="menu_button direct_to_page">
+
else {
−
HOME
+
setTimeout(hide_show_menu, 15);
−
</div>
+
}
−
</a>
+
}
  
  
 +
});
  
−
<div class="menu_button">
+
</script>
−
<div class="expand_collapse_icon">  </div> TEAM
+
−
</div>  
+
  
−
<div class="submenu_wrapper" id="team_submenu">
+
<head>  
−
+
<!-- This tells the browser that your page is responsive -->
−
<a href="https://2017.igem.org/Team:KU_Leuven/Team">
+
<meta name="viewport" content="width=device-width, initial-scale=1">  
−
<div class="submenu_button" id="Team_page">
+
−
Team
+
−
</div>
+
−
</a>
+
  
−
<a href="https://2017.igem.org/Team:KU_Leuven/Collaborations">
+
</head>
−
<div class="submenu_button"  id="Collaborations_page">
+
<body>
−
Collaborations
+
−
</div>
+
−
</a>
+
−
+
−
+
−
</div>
+
  
−
 
+
<nav class="navbar navbar-default navbar-fixed-top igem_2017_menu_wrapper">
−
+
<div class="container">
−
+
<div class="navbar-header">
−
 
+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
−
<div class="menu_button">
+
<span class="sr-only">Toggle navigation</span>
−
<div class="expand_collapse_icon"> </div> PROJECT
+
<span class="icon-bar"></span>
−
</div>  
+
<span class="icon-bar"></span>
−
 
+
<span class="icon-bar"></span>
−
<!-- project submenu -->
+
</button>
−
<div class="submenu_wrapper">
+
<a class="navbar-brand" href="https://2017.igem.org/Team:KU_Leuven">
−
+
<img height="100%" src="https://static.igem.org/mediawiki/2017/archive/1/18/20170923113348%21KU_Leuven-Logo_Brand.gif">
−
<a href="https://2017.igem.org/Team:KU_Leuven/Description">
+
</a>
−
<div class="submenu_button" id="Description_page">
+
−
Description
+
 
</div>
 
</div>
−
</a>
+
<div id="navbar" class="navbar-collapse collapse">
 +
<ul class="nav navbar-nav navbar-right">
 +
<li id="TeamKU_Leuven_page" class="active"><a href="https://2017.igem.org/Team:KU_Leuven">HOME</a></li>
 +
<li class="dropdown">
 +
<a href="https://2017.igem.org/Team:KU_Leuven/Team" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
 +
<ul class="dropdown-menu dropdown-menu-left">
 +
<li id="Team_page"><a href="https://2017.igem.org/Team:KU_Leuven/Team">Team</a></li>
 +
<li id="Collaborations_page"><a href="https://2017.igem.org/Team:KU_Leuven/Collaborations">Collaborations</a></li>
 +
                                                                <li id="Sponsors_page"><a href="https://2017.igem.org/Team:KU_Leuven/Sponsors">Sponsors</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2017.igem.org/Team:KU_Leuven/Project" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT<span class="caret"></span></a>
 +
<ul class="dropdown-menu dropdown-menu-left">
 +
<li id="Description_page"><a href="https://2017.igem.org/Team:KU_Leuven/Description">Description</a></li>
 +
<li id="Design_page"><a href="https://2017.igem.org/Team:KU_Leuven/Design">Design</a></li>
 +
<li id="Experiments_page"><a href="https://2017.igem.org/Team:KU_Leuven/Protocols">Protocols</a></li>
 +
 +
<li id="Notebook_page"><a href="https://2017.igem.org/Team:KU_Leuven/Notebook">Notebook</a></li>
 +
                                                                <li id="Logbook_page"><a href="https://2017.igem.org/Team:KU_Leuven/Logbook">Logbook</a></li>
 +
<li id="Interlab_page"><a href="https://2017.igem.org/Team:KU_Leuven/InterLab">InterLab</a></li>
 +
 +
<li id="Model_page"><a href="https://2017.igem.org/Team:KU_Leuven/Model">Model</a></li>
 +
 +
<li id="Demonstrate_page"><a href="https://2017.igem.org/Team:KU_Leuven/Demonstrate">Demonstrate</a></li>
 +
<li id="Attributions_page"><a href="https://2017.igem.org/Team:KU_Leuven/Attributions">Attributions</a></li>
 +
                                                               
 +
 +
</ul>
 +
</li>
 +
<li class="dropdown active">
 +
<a href="https://2017.igem.org/Team:KU_Leuven/Parts" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
 +
<ul class="dropdown-menu dropdown-menu-left">
 +
<li id="Parts_page"><a href="https://2017.igem.org/Team:KU_Leuven/Parts">Parts</a></li>
 +
<li id="Basic_Part_page"><a href="https://2017.igem.org/Team:KU_Leuven/Basic_Part">Basic Parts</a></li>
 +
 +
 +
</ul>
 +
</li>
 +
<li id="Safety_page"><a href="https://2017.igem.org/Team:KU_Leuven/Safety">SAFETY</a></li>
 +
<li class="dropdown">
 +
<a href="https://2017.igem.org/Team:KU_Leuven/HP/HP_Main" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
 +
<ul class="dropdown-menu dropdown-menu-left">
 +
<li id="HP_Main_page"><a href="https://2017.igem.org/Team:KU_Leuven/HP/HP_Main">Human Practices</a></li>
 +
<li id="Silver_page"><a href="https://2017.igem.org/Team:KU_Leuven/HP/Silver">Silver</a></li>
 +
<li id="Gold_Integrated_page"><a href="https://2017.igem.org/Team:KU_Leuven/HP/Gold_Integrated">Integrated and Gold</a></li>
 +
<li id="Education"><a href="https://2017.igem.org/Team:KU_Leuven/HP/Education">Education</a></li>
 +
<li id="Engagement_page"><a href="https://2017.igem.org/Team:KU_Leuven/Engagement">Public Engagement</a></li>
 +
</ul>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2017.igem.org/Team:KU_Leuven/Awards" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">AWARDS<span class="caret"></span></a>
 +
<ul class="dropdown-menu dropdown-menu-left">
 +
<li id="Applied_Design_page"><a href="https://2017.igem.org/Team:KU_Leuven/Applied_Design">Applied Design</a></li>
 +
<li id="Entrepreneurship_page"><a href="https://2017.igem.org/Team:KU_Leuven/Entrepreneurship">Entrepreneurship</a></li>
 +
                                                                <li id="Prizes"><a href="https://2017.igem.org/Team:KU_Leuven/Prizes">Prizes</a></li>
  
−
<a href="https://2017.igem.org/Team:KU_Leuven/Design">
+
−
<div class="submenu_button"  id="Design_page">
+
<li id="Model_page"><a href="https://2017.igem.org/Team:KU_Leuven/Model">Model</a></li>
−
Design
+
</ul>
 +
</li>
 +
<li><a href="https://igem.org/2017_Judging_Form?team=KU_Leuven">JUDGING FORM</a></li>
 +
</ul>
 +
</div><!--/.nav-collapse -->
 
</div>
 
</div>
−
</a>
+
</nav>
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Experiments">
+
−
<div class="submenu_button"  id="Experiments_page">
+
−
Experiments
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Notebook">
+
−
<div class="submenu_button"  id="Notebook_page">
+
−
Notebook
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/InterLab">
+
−
<div class="submenu_button"  id="InterLab_page">
+
−
InterLab
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Contribution">
+
−
<div class="submenu_button"  id="Contribution_page">
+
−
Contribution
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Model">
+
−
<div class="submenu_button"  id="Model_page">
+
−
Model
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Results">
+
−
<div class="submenu_button"  id="Results_page">
+
−
Results
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Demonstrate">
+
−
<div class="submenu_button"  id="Demonstrate_page">
+
−
Demonstrate
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Improve">
+
−
<div class="submenu_button"  id="Improve_page">
+
−
Improve
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:KU_Leuven/Attributions">
+
−
<div class="submenu_button"  id="Attributions_page">
+
−
Attributions
+
−
</div>
+
−
</a>
+
−
 
+
−
</div>
+
−
 
+
 
 
−
 
−
 
−
 
−
 
−
<div class="menu_button">
 
−
<div class="expand_collapse_icon">  </div> PARTS
 
−
</div>
 
−
 
−
<!-- parts submenu -->
 
−
<div class="submenu_wrapper">
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Parts">
 
−
<div class="submenu_button"  id="Parts_page">
 
−
Parts
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Basic_Part">
 
−
<div class="submenu_button"  id="Basic_Part_page">
 
−
Basic Parts
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Composite_Part">
 
−
<div class="submenu_button"  id="Composite_Part_page">
 
−
Composite Parts
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Part_Collection">
 
−
<div class="submenu_button"  id="Part_Collection_page">
 
−
Part Collection
 
−
</div>
 
−
</a>
 
−
</div>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Safety">
 
−
<div class="menu_button direct_to_page">
 
−
SAFETY
 
−
</div>
 
−
</a>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<div class="menu_button" >
 
−
<div class="expand_collapse_icon">  </div> HUMAN PRACTICES
 
−
</div>
 
−
 
−
<!-- human practices submenu -->
 
−
<div class="submenu_wrapper">
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/HP/Silver">
 
−
<div class="submenu_button"  id="Silver_page">
 
−
Silver HP
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/HP/Gold_Integrated">
 
−
<div class="submenu_button" id="Gold_Integrated_page">
 
−
Integrated and Gold
 
−
</div>
 
−
</a>
 
−
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Engagement">
 
−
<div class="submenu_button"  id="Engagement_page">
 
−
Public Engagement
 
−
</div>
 
−
</a>
 
−
 
−
</div>
 
−
 
−
 
−
<div class="menu_button">
 
−
<div class="expand_collapse_icon">  </div> AWARDS
 
−
</div>
 
−
 
−
<!-- awards submenu -->
 
−
<div class="submenu_wrapper">
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Applied_Design">
 
−
<div class="submenu_button"  id="Applied_Design_page">
 
−
Applied Design
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Entrepreneurship">
 
−
<div class="submenu_button"  id="Entrepreneurship_page">
 
−
Entrepreneurship
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Hardware">
 
−
<div class="submenu_button"  id="Hardware_page">
 
−
Hardware
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Measurement">
 
−
<div class="submenu_button"  id="Measurement_page">
 
−
Measurement
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Model">
 
−
<div class="submenu_button"  id="Model_page">
 
−
Model
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Plant">
 
−
<div class="submenu_button"  id="Plant_page">
 
−
Plant
 
−
</div>
 
−
</a>
 
−
 
−
 
−
<a href="https://2017.igem.org/Team:KU_Leuven/Software">
 
−
<div class="submenu_button"  id="Software_page">
 
−
Software
 
−
</div>
 
−
</a>
 
−
 
−
</div>
 
−
 
−
<a href="https://igem.org/2017_Judging_Form?team=KU_Leuven">
 
−
<div class="menu_button direct_to_page">
 
−
JUDGING FORM
 
−
</div>
 
−
</a>
 
−
 
−
 
−
 
−
<div class="menu_bottom_padding" >
 
−
</div>
 
−
 
−
</div>
 
−
 
−
 
−
 
  
−
</div>
 
  
  

Latest revision as of 14:47, 14 December 2017