Difference between revisions of "Template:Tuebingen"

Line 1: Line 1:
 
<html>
 
<html>
  
−
<style type='text/css'>
+
<style>
−
/* igem website specific stuff, really enoying, just use it */
+
−
.firstHeading {
+
−
    display: none;
+
−
}
+
−
#globalWrapper, #content{
+
−
background-color: transparent;
+
−
border: 0px;
+
−
margin:0 auto;
+
−
padding: 0px;
+
−
width: 100%;
+
−
}
+
  
−
/* Central space for fine tuning */
+
/********************************* DEFAULT WIKI SETTINGS  ********************************/
−
:root {
+
−
    --lightBackgroundText: rgba(223, 220, 228, 0.9);
+
  
−
    --contentFontSize: large;
+
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
    --navBorderThickness: 2px;
+
/********************************* MENU ********************************/
−
    --navFontSize: x-large;
+
/* Wrapper for the menu */
−
    --navSubFontSize: large;
+
.menu_wrapper {
−
    --navLinkPadding: 0.3em;
+
width:150px;  
−
    --navLeftPadding: 1vw;
+
height:100vh;  
 +
position:fixed;  
 +
padding:0px;
 +
float:left;
 +
background-color:#f2f2f2;  
 +
text-align:left;
 +
}
  
−
    --navScrollTime: 500ms;
+
/* styling for the menu items */
 +
.menu_item {
 +
width:100%;
 +
margin:-2px 0px 0px -20px;
 +
padding: 10px 10px; 
 +
border-bottom: 1px solid #d3d3d3;
 +
font-weight:bold;
 +
color:#000000;
 +
cursor: pointer;  
 +
}
  
−
    --contentPadding: 3vw;
+
/* when hovering on a menu item */
 +
.menu_item:hover {
 +
color:#000000;
 +
background-color: #72c9b6;
 +
}
  
−
    font-family: Helvetica, Arial, sans-serif;
+
/* decoration icon for the menu buttons*/
 +
.icon {
 +
float:right; 
 +
font-size:16px;
 +
font-weight:bold;
 +
}
 +
 +
/* this is the icon for when the content is collapsed */
 +
.plus::before {
 +
content: "+";
 +
}
 +
/* this is the icon for when the content is expanded */
 +
.less::before {
 +
content: "–";  
 +
}
  
−
    /* Setup counter for figure and table enumeration */
+
/* styling for the ul that creates the buttons */
−
    counter-reset: figures tables;
+
ul.menu_items {
−
}
+
width:100%;
 +
margin-left:0px;
 +
padding:0px;
 +
list-style: none;  
 +
}
  
−
.iGemSabber {
+
/* styling for the li that are the menu items */
−
    /* rule of thumb, BG about +10 each */
+
.menu_items li {
−
    /*--lightsabber:   rgb(46, 255, 6);*/
+
width:90%;  
−
    --lightsabber:   rgb(202, 255, 212);
+
margin-top:-2px;
−
    --lightsabberBg: rgba(1, 216, 34, 0.9);
+
padding: 15px 0px 15px 15px ;  
−
}
+
display:block;
−
.blueSabber {
+
border-bottom: 1px solid #d3d3d3;
−
    --lightsabber:   rgb(223, 254, 255);
+
text-align:left;  
−
    --lightsabberBg: rgba(0, 129, 160, 0.9);
+
font-weight:bold;
−
}
+
text-decoration:none;  
−
.orangeSabber {
+
color:#000000;
−
    --lightsabber:   rgb(254, 255, 234);
+
list-style-type:none;  
−
    --lightsabberBg: rgba(235, 168, 73, 0.9);
+
cursor:pointer;
−
}
+
-webkit-transition: all 0.4s ease;  
−
.redSabber {
+
-moz-transition: all 0.4s ease;  
−
    --lightsabber:   rgb(247, 253, 252);
+
-ms-transition: all 0.4s ease;  
−
    --lightsabberBg: rgba(180, 0, 0, 0.9);
+
-o-transition: all 0.4s ease; transition: all 0.4s ease;
−
}
+
}
−
.whiteSabber {
+
−
    --lightsabber:   rgb(252, 252, 255);
+
−
    --lightsabberBg: rgba(145, 164, 161, 0.9);
+
−
}
+
−
.purpleSabber {
+
−
    --lightsabber:   rgb(255, 238, 254);
+
−
    --lightsabberBg: rgba(200, 39, 190, 0.9);
+
−
}
+
  
 +
.menu_item a {
 +
width: 100%;
 +
margin-left: -20px;
 +
padding: 11px 90px 12px 20px;
 +
text-decoration: none;
 +
color:black;
 +
}
  
−
body {
+
/* When hovering on a menu item */
−
    /* Version 1: One picture scaled full size (watch file size) */
+
.menu_items li:hover {
−
    background-image: url(../wiki/images/thumb/f/fe/Space_low.jpg/1599px-Space_low.jpg);
+
background-color:#72c9b6;
−
    background-size: 100% 100%;
+
color: #000000;
−
    background-repeat: no-repeat;
+
}
−
    /* Version 2: Small pattern repeated */
+
−
    /*
+
−
    background-image: url(steel1.jpg);
+
−
    background-repeat: repeat;
+
−
    */
+
  
−
    background-position: right top;
+
/* styling for the submenus */
−
    background-attachment: fixed;
+
.submenu {
 +
width:100%;  
 +
display: none; 
 +
font-weight:bold;
 +
cursor:pointer;  
  
−
    padding: 0;
+
}
−
    margin: 0;
+
−
}
+
  
−
.grailWrapper {
+
/* moving the margin for the submenu ul list */
−
    background-color: var(--lightBackgroundText);
+
ul.submenu {  
 +
width: 100%;
 +
margin: 10px 0px -11px 0px;
 +
list-style: none;
 +
}
  
−
    display: table;
+
/*styling for the submenu buttons */
−
    height: 100%;
+
.submenu li {
−
    width: 100%;
+
width: 100%;  
−
    margin: 0;
+
margin-left: 10px;
−
    margin: 0 auto;
+
margin-bottom: 0px;
−
    padding: 0;
+
}
  
−
    border-collapse: collapse;
 
  
−
    min-width: 760px;
+
/* hover state for the submenu buttons */
−
    max-width: 1000px;
+
.submenu li a {
 +
width: 100%;  
 +
padding: 5px 10px;
 +
display: inline-block;
 +
border-bottom: 1px solid #d3d3d3;
 +
background-color:white;
 +
text-decoration:none;
 +
color:#000000;
 +
}
  
−
    font-size: var(--contentFontSize);
 
−
}
 
  
−
.header {
 
−
height: 200px;
 
−
    /* not accurate, vertical center for final logo */
 
−
    /* still needed? padding-top: 30px; */
 
−
    text-align: center;
 
−
    vertical-align: middle;
 
  
−
    font-size: 50px;
+
.submenu li a:hover  {
−
    font-family: Impact, Charcoal, sans-serif;
+
background-color:#000000;  
 +
color: #72c9b6;
 +
}
  
−
    display: table-row;
 
−
}
 
  
−
nav {
+
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
−
    display: block;/*table-row;*/
+
.collapsable_menu_control {  
−
    padding: 0;
+
width:100%;
−
    margin: 0;
+
padding: 15px 0px;
 +
display:none;  
 +
background-color:#000000;  
 +
text-align:center; 
 +
font-weight:bold;
 +
color:#72c9b6;
 +
cursor:pointer;
 +
-webkit-transition: all 0.4s ease;  
 +
-moz-transition: all 0.4s ease;  
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
  
−
    /* make border on top and bottom of nav */
+
/* when hovering on that button */
−
    border-width: var(--navBorderThickness);
+
.collapsable_menu_control:hover {
−
    border-style: solid none;
+
background-color: #72c9b6;
−
    border-color: black;
+
color:#000000;
 +
}
  
−
    font-size: var(--navFontSize);
+
/********************************* CONTENT OF THE PAGE ********************************/
−
    height: calc(2 * var(--navLinkPadding) + var(--navFontSize)
+
−
        2 * var(--navBorderThickness));
+
  
−
    /*background-color: #4f4f4f;*/
+
/* Wrapper for the content */
−
    background: linear-gradient(to bottom, #4f4f4f, #6f6f6f, #4f4f4f);
+
.content_wrapper {
−
}
+
width: 85%;
 +
margin-left:150px;
 +
padding:10px 0px;
 +
float:left;
 +
background-color:white;  
 +
}
  
−
.navbarFixed {
+
/*LAYOUT */
−
    position: fixed;
+
.column  {  
−
    top: 0;
+
padding: 10px 0px;
−
    left: 0;
+
float:left;  
 +
background-color:white;  
 +
}
  
−
    z-index: 100;
+
.full_size {
−
    width: 100%;
+
width:100%;  
−
}
+
}
  
−
.navbarFixed ul {
+
.full_size img {  
−
    --navLeftPadding: 5.5em;
+
padding: 10px 15px;
−
}
+
width:96.5%;  
 +
}
  
−
#navIcon {
+
.half_size {
−
    display: absolute;
+
width: 50%;  
−
    position: fixed;
+
}
−
    top: 10px;
+
.half_size img {
−
    left: 10px;
+
padding: 10px 15px;
 +
width: 93%;  
 +
}
  
−
    height: 3em;
 
−
    margin-right: 1em;
 
−
    /*top: -0.6em;*/
 
  
−
    vertical-align: top;
+
.clear {
−
    padding: 0.5em;
+
clear:both;
 +
}
  
−
    border: 2px solid black;
+
.highlight {
−
    border-radius: 1.5em;
+
width: 90%;  
 +
margin: auto;
 +
padding: 15px 5px;
 +
background-color: #f2f2f2;  
 +
}
  
−
    background: radial-gradient(circle, #dfdeee, #6f6f6f, black);
+
.judges-will-not-evaluate {
−
    box-shadow: 10px 10px 5px grey;
+
border: 4px solid #72c9b6;
−
    box-shadow: 0 0 0.8em 0.3em #000000;
+
display: block;
−
    /*visibility: hidden;*/
+
margin: 5px 15px;
−
}
+
width: 95%;
 +
font-weight:bold;
 +
}
  
−
nav ul {
 
−
    display: table;
 
−
    table-layout: fixed;
 
  
−
    margin: 0 0 0 var(--navLeftPadding);
+
/*STYLING */
−
    padding: 0;
+
  
−
    width: calc(100% - var(--navLeftPadding));
+
/* styling for the titles */
 +
.content_wrapper h1, .content_wrapper h2 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color:#72c9b6;
  
−
    list-style: none;
+
}
−
}
+
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #000000;
 +
}
  
−
nav ul li {
 
−
    display: table-cell;
 
  
−
    width: 100%;
+
/* font and text */
−
    height: calc(2 * var(--navLinkPadding) + var(--navFontSize));
+
.content_wrapper p {
 +
padding:0px 15px;  
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;  
 +
}
  
−
    text-align: center;
+
/* Links */
−
    vertical-align: top;
+
.content_wrapper a {
−
}
+
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color:#72c9b6;
 +
color: #72c9b6;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
  
−
nav ul li a {
+
/* hover for the links */
−
    display: block;
+
.content_wrapper a:hover {  
 +
text-decoration:none;
 +
color:#000000;
 +
}
  
−
    padding: var(--navLinkPadding) 0;
+
/* non numbered lists */
−
    text-align:center;
+
.content_wrapper ul {
−
    vertical-align: middle;
+
padding:0px 20px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;  
 +
}
  
−
    color: #fff;
+
/* numbered lists */
−
text-decoration: none;
+
.content_wrapper ol {
 +
padding:0px;  
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
  
−
    border-left:4px solid black;
+
/* Table */
−
}
+
.content_wrapper table {
 +
width: 97%;
 +
margin:15px 10px;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;  
 +
}
  
−
nav ul li:hover a, .linkActive {
+
/* table cells */
−
    /*color: black;*/
+
.content_wrapper  td {  
−
    background: linear-gradient(to bottom, #4f4f4f, var(--lightsabberBg), #4f4f4f);
+
padding: 10px;
−
}
+
vertical-align: text-top;  
−
nav ul li:hover ul li a {
+
border: 1px solid #d3d3d3;
−
    background: none !important;
+
border-collapse: collapse;  
−
}
+
}
  
−
nav ul li ul li a:hover {
+
/* table headers */
−
    text-decoration: underline;
+
.content_wrapper th {  
−
}
+
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;  
 +
}
  
−
nav li ul {
+
/* Button class */
−
    display: block;
+
.button_click {  
−
    height: auto;
+
margin: 10px auto;
−
    width: calc(100% - 18px);
+
padding: 15px; width:12%; 
 +
text-align:center;  
 +
font-weight:bold;
 +
background-color: #72c9b6;
 +
cursor:pointer; 
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
  
−
    padding: 0 10px;
+
/* button class on hover */
−
    margin: 0;
+
.button_click:hover { 
 +
background-color:#000000;  
 +
color:#72c9b6;
 +
}
  
−
    position: absolute;
+
/********************************* RESPONSIVE STYLING ********************************/
−
    left: -2px;
+
−
    top: calc(2 * var(--navLinkPadding) + var(--navFontSize) +
+
−
        2 * var(--navBorderThickness));
+
−
    z-index:1;
+
  
−
    background: linear-gradient(to right,
+
/* IF THE SCREEN IS LESS THAN 1000PX */
−
        black 0,
+
−
        var(--lightsabber) 1px,
+
−
        var(--lightsabber) 7px,
+
−
        black 8px,
+
−
        var(--lightsabberBg) 8px,
+
−
        var(--lightBackgroundText));
+
−
}
+
−
nav ul > li {
+
−
    position: relative;
+
−
}
+
−
nav li ul li {
+
−
    display: block;
+
  
−
    overflow: hidden;
+
@media only screen and (max-width: 1000px) {
−
    height:0;
+
−
    -webkit-transition: height var(--navScrollTime) ease-in;
+
−
    -moz-transition: height var(--navScrollTime) ease-in;
+
−
    -o-transition: height var(--navScrollTime) ease-in;
+
−
    transition: height var(--navScrollTime) ease-in;
+
−
}
+
  
−
nav ul > li:hover ul li {
+
#content {width:100%; }
−
    height: 2em;
+
.menu_wrapper {width:15%;}
−
}
+
.content_wrapper {margin-left: 15%;}
 +
.menu_item {display:block;}
 +
.icon {display:none;}
 +
.highlight {padding:10px 0px;}
 +
}
  
−
nav ul li ul li a{
 
−
    display:block;
 
−
    height: 100%;
 
−
    width: 100%;
 
  
−
    padding: auto;
+
/* IF THE SCREEN IS LESS THAN 680PX */
−
    font-size: var(--navSubFontSize);
+
  
−
    border: none;
+
@media only screen and (max-width: 680px) {
−
    color:black;
+
.collapsable_menu_control { display:block;}
−
}
+
.menu_item {display:none;}
 +
.menu_wrapper { width:100%; height: 15%; position:relative;}
 +
.content_wrapper {width:100%; margin-left:0px;}
 +
.column.half_size {width:100%; }
 +
.column img { width: 100%; padding: 5px 0px;}
 +
.icon {display:block;}
 +
.highlight {padding:15px 5px;}
 +
}
  
−
.contentArea {
+
</style>
−
    display: block;
+
−
    width: var(100% - var(--contentPadding));
+
−
    margin: 0 var(--contentPadding);
+
−
    padding: 0;
+
−
    text-align: justify;
+
−
}
+
−
.contentRow {
+
−
    display: table;
+
−
    width: 100%;
+
−
    padding: 0;
+
−
    margin: 0;
+
−
    border-spacing: 1em;
+
−
    border-collapse: separate;
+
−
}
+
−
.contentCell {
+
−
    display: table-cell;
+
−
    vertical-align: top;
+
−
    padding: 0;
+
−
    margin: 0;
+
−
}
+
−
.contentSmallCell{
+
−
    width: 40%;
+
−
}
+
  
−
figure {
 
−
    display: block;
 
−
    margin: 1em;
 
−
    padding: 0.5em;
 
  
−
    width: calc(100% - var(padding));
 
−
    background-color: white;
 
−
}
 
−
figure img {
 
−
    display: block;
 
−
    --leftRightSpace: 0.8em;
 
−
    width: calc(100% - 2 * var(--leftRightSpace));
 
−
    padding: var(--leftRightSpace);
 
−
}
 
−
figure figcaption::before{
 
−
    counter-increment: figures;
 
−
    font-weight: bold;
 
−
    content: "Figure " counter(figures) ": ";
 
−
}
 
−
figure figcaption {
 
−
    width: 100%;
 
−
}
 
  
−
table {
 
−
    border-top: 3px solid black;
 
−
    border-bottom: 3px solid black;
 
−
    border-spacing: 0.4em;
 
−
    border-collapse: collapse;
 
−
    margin: 0 auto;
 
−
}
 
−
table caption::before{
 
−
    counter-increment: tables;
 
−
    font-weight: bold;
 
−
    content: "Table " counter(tables) ": ";
 
−
}
 
−
table caption {
 
−
    width: 100%;
 
−
    margin-bottom: 0.8em;
 
−
    text-align: center;
 
−
}
 
−
table td {
 
−
    padding: 0.3em;
 
−
}
 
−
table thead tr {
 
−
    font-weight: bold;
 
−
    border-bottom: 1.5px solid black;
 
−
}
 
  
−
</style>
+
<!--- THIS IS WHERE THE HTML BEGINS --->
−
        <script type='text/javascript' src='https://2016.igem.org/Team:Tuebingen/jquery.js' ></script>
+
 
−
        <script type='text/javascript'>//<![CDATA[
+
 
−
            $(window).ready(function() {
+
<!-- This tells the browser that your page is responsive -->
−
              $(window).scroll(function () {
+
 
−
                //console.log($(window).scrollTop())
+
<head>
−
                var h = $('.header').height();
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
                <!--img src='big.png' /-->
+
</head>
−
                if ($(window).scrollTop() > h) {
+
 
−
                  $('nav').addClass('navbarFixed');
+
 
−
                  // add navIcon if it is not existing yet
+
 
−
                  if ( ! $('#navIcon').length ) {
+
 
−
                      $('nav').prepend("<img src='../wiki/images/c/cc/Big.png' id='navIcon' />");
+
<div class="menu_wrapper" >
−
                  }
+
 
−
                } else {
+
 
−
                  $('nav').removeClass('navbarFixed');
+
 
−
                  $('#navIcon').remove();
+
 
−
                }
+
<div class="collapsable_menu_control"> MENU ▤ </div>
−
              });
+
 
−
            });//]]>
+
<ul id="accordion" class="accordion">
−
        </script>
+
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Tuebingen">HOME </a> </li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> TEAM
 +
<ul class="submenu">
 +
<li> <a href=" https://2016.igem.org/Team:Tuebingen/Team"> Team  </a> </li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Collaborations">★  Collaborations </a> </li>
 +
                    </ul>
 +
                </li>
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Description"> ★  Description </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Design"> ★ Design </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Experiments"> Experiments </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Proof"> ★ Proof of Concept </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Demonstrate"> ★ Demonstrate </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Results"> Results </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Notebook"> Notebook </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> PARTS 
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Parts">Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Basic_Part"> ★ Basic Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Composite_Part"> ★ Composite Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Part_Collection"> ★ Part Collection </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Tuebingen/Safety"> SAFETY </a> </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Tuebingen/Attributions">★  ATTRIBUTIONS </a></li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Human_Practices"> Human Practices </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/HP/Silver">★ Silver </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/HP/Gold">★ Gold </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Integrated_Practices"> ★ Integrated Practices </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Engagement">★ Engagement </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> AWARDS
 +
<ul class="submenu">
 +
<li><a href="https://2016.igem.org/Team:Tuebingen/Entrepreneurship"> ★ Entrepreneurship </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Hardware"> ★ Hardware </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Software">★ Software </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Measurement">★  Measurement </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Tuebingen/Model">★ Model </a></li>
 +
 
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="content_wrapper">
 +
 
 +
 
 +
 
 +
<h1 id="team_name">  </h1>
 +
<h4 id="page_name">  </h4>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<script>
 +
 
 +
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 +
 
 +
$(document).ready(function() {
 +
 
 +
$("#HQ_page").attr('id','');
 +
 +
 
 +
if ( wgPageName.substring( 0,  8) == "Template")  {   // if the page is a template it displays the full name in a single line
 +
$("#team_name").html( wgPageName );
 +
}
 +
 
 +
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 +
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 +
}
 +
 
 +
else {
 +
// this adds the team's name as an h1
 +
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );  
 +
 
 +
// this adds the page's title as an h4
 +
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 +
}
 +
 
 +
 
 +
 
 +
 
 +
$('#accordion').find('.menu_item').click(function(){
 +
 
 +
//Expand or collapse this panel
 +
submenu = $(this).find('.submenu');
 +
submenu.toggle();
 +
 
 +
icon = $(this).find('.icon');
 +
 
 +
if ( !$( submenu ).is(':visible') ) {
 +
icon.removeClass("less").addClass("plus");
 +
}
 +
else {
 +
icon.removeClass("plus").addClass("less");
 +
}
 +
 
 +
//Hide the other panels
 +
$(".submenu").not(submenu).hide();
 +
$(".icon").not(icon).removeClass("less").addClass("plus");
 +
});
 +
 
 +
 
 +
$(".collapsable_menu_control").click(function() {
 +
$(".menu_item").toggle();
 +
});
 +
 
 +
$( window ).resize(function() {
 +
$(".menu_item").show();
 +
});
 +
 
 +
 
 +
});
 +
 
 +
 
 +
 
  
 +
</script>
  
−
    <body>
 
−
        <div class="grailWrapper">
 
−
            <div class='header'>
 
−
                <img src="../wiki/images/c/cc/Big.png" style="width: 25%; vertical-align: middle;" />
 
−
                iGEM Tuebingen
 
−
            </div>
 
−
            <nav>
 
−
                <ul>
 
−
                    <li id='sectionTeam' class="iGemSabber">
 
−
                        <a>Team</a>
 
−
                        <ul>
 
−
                            <li><a href="#">Home</a>
 
−
                            <li><a href="#">The Team</a>
 
−
                            <li><a href="#">Advisors</a>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li id='sectionFruitforce' class="whiteSabber">
 
−
                        <a>Fruitforce</a>
 
−
                        <ul>
 
−
                            <li><a href="#">Summary</a>
 
−
                            <li><a href="#">Design</a>
 
−
                            <li><a href="#">Experiments</a>
 
−
                            <li><a href="#">Results</a>
 
−
                            <li><a href="#">Model</a>
 
−
                            <li><a href="#">Discussion</a>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li id='sectionSide' class="blueSabber">
 
−
                        <a>Side Projects</a>
 
−
                        <ul>
 
−
                            <li><a href="#">Clone Wars</a>
 
−
                            <li><a href="#">Death Star</a>
 
−
                            <li><a href="#">Interlab Study</a>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li id='sectionHR' class="redSabber">
 
−
                        <a>HR Practices</a>
 
−
                        <ul>
 
−
                            <li><a href="#">Alpha</a>
 
−
                            <li><a href="#">Bravo</a>
 
−
                            <li><a href="#">Charly</a>
 
−
                            <li><a href="#">Delta</a>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li id='sectionProcedures' class="orangeSabber">
 
−
                        <a>Procedures</a>
 
−
                        <ul>
 
−
                            <li><a href="#">Parts</a>
 
−
                            <li><a href="#">Safety</a>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li id='sectionAttributions' class="purpleSabber">
 
−
                        <a>Attributions</a>
 
−
                        <ul>
 
−
                            <li><a href="#">Collaboration</a>
 
−
                            <li><a href="#">Sponsoring</a>
 
−
                            <li><a href="#">References</a>
 
−
                        </ul>
 
−
                    </li>
 
−
                <ul>
 
−
            </nav>
 
  
 
</html>
 
</html>

Revision as of 20:20, 30 September 2016

MENU ▤