Difference between revisions of "Template:UIOWA"

Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
<nav class="navbar navbar-default">
−
 
+
  <div class="container-fluid">
−
<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
     <!-- Brand and toggle get grouped for better mobile display -->
−
 
+
     <div class="navbar-header">
−
<!--<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">-->
+
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
−
 
+
        <span class="sr-only">Toggle navigation</span>
−
 
+
        <span class="icon-bar"></span>
−
 
+
        <span class="icon-bar"></span>
−
 
+
        <span class="icon-bar"></span>
−
<style>
+
      </button>
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
      <a class="navbar-brand" href="#">Brand</a>
−
 
+
−
#sideMenu,
+
−
#top_title {
+
−
  display: none;
+
−
}
+
−
 
+
−
#content {
+
−
  padding: 0px;
+
−
  width: 100%;
+
−
}
+
−
 
+
−
body {
+
−
  background-color: white;
+
−
  width: 100%;
+
−
}
+
−
 
+
−
#bodyContent h1,
+
−
#bodyContent h2,
+
−
#bodyContent h3,
+
−
#bodyContent h4,
+
−
#bodyContent h5 {
+
−
  margin-bottom: 0px;
+
−
}
+
−
 
+
−
#bodyContent {
+
−
  padding-right: 0px;
+
−
}
+
−
 
+
−
#globalWrapper {
+
−
  font-size: 100%;
+
−
  padding: 0px;
+
−
  margin: -10px -20px -20px -20px;
+
−
}
+
−
 
+
−
.navbar-collapse {
+
−
  padding-left: 0px;
+
−
}
+
−
 
+
−
#banner {
+
−
  margin-top: 50px;
+
−
}
+
−
 
+
−
#sideMenu {
+
−
  margin-top: 10px;
+
−
}
+
−
 
+
−
.dropdown-menu li:hover .sub-menu {
+
−
  visibility: visible;
+
−
}
+
−
 
+
−
.dropdown:hover .dropdown-menu {
+
−
  display: block;
+
−
}
+
−
 
+
−
.navbar-nav .dropdown-menu,
+
−
.navbar .dropdown-menu {
+
−
  margin-top: 0;
+
−
}
+
−
/********************************* RESPONSIVE STYLING ********************************/
+
−
 
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 1000PX */
+
−
 
+
−
@media only screen and (max-width: 1000px) {
+
−
  #content {
+
−
     width: 100%;
+
−
  }
+
−
  .menu_wrapper {
+
−
    width: 15%;
+
−
  }
+
−
  .content_wrapper {
+
−
    margin-left: 15%;
+
−
  }
+
−
  .menu_item {
+
−
    display: block;
+
−
  }
+
−
  .icon {
+
−
    display: none;
+
−
  }
+
−
  .highlight {
+
−
    padding: 10px 0px;
+
−
  }
+
−
}
+
−
 
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
−
 
+
−
@media only screen and (max-width: 680px) {
+
−
  .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;
+
−
  }
+
−
}
+
−
 
+
−
</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.
+
−
 
+
−
$(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>
+
−
</head>
+
−
 
+
−
 
+
−
 
+
−
<body>
+
−
  <nav class="navbar navbar-default navbar-fixed-top" style=" padding-top: 20px;">
+
−
     <div class="container-fluid">
+
−
       <div class="navbar-header">
+
−
 
+
−
        <a class="navbar-logo" href="https://2017.igem.org/Team:UIOWA">
+
−
          <image class="img-responsive" src="https://static.igem.org/mediawiki/2017/7/7c/T--UIOWA--logo-DNA.png" height="120" width="120">
+
−
        </a>
+
−
 
+
−
 
+
−
      </div>
+
−
 
+
−
      <div id="navbar" class="navbar-collapse collapse">
+
−
        <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
+
−
          <li class="dropdown">
+
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Description">Project <span class="caret"></span></a>
+
−
            <ul class="dropdown-menu" style="left:0;">
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Description">Description</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Results">Results</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Proof">Proof</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Basic_Part">Basic Parts</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Composite_Part">Composite Parts</a></li>
+
−
            </ul>
+
−
          </li>
+
−
 
+
−
 
+
−
          <li class="dropdown">
+
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Model">Modelling <span class="caret"></span></a>
+
−
            <ul class="dropdown-menu" style="left:0;">
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Model">Overview</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/SingleCell">Single Cell Model</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/GRO">Population Model</a></li>
+
−
 
+
−
            </ul>
+
−
          </li>
+
−
 
+
−
 
+
−
          <li>
+
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Software">Software Tools </a></li>
+
−
 
+
−
 
+
−
          <li class="dropdown">
+
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Notebook">Notebook <span class="caret"></span></a>
+
−
            <ul class="dropdown-menu" style="left:0;">
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Notebook">Lab book</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Experiments">Protocols</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Medals">Medal Criteria</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/BrainStorm">Brainstorm</a></li>
+
−
            </ul>
+
−
          </li>
+
−
 
+
−
          <li class="dropdown">
+
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Human_Practices">Human Practices <span class="caret"></span></a>
+
−
            <ul class="dropdown-menu">
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Human_Practices">Human Practices</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Integrated_Practices">Integrated Practices</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Engagement">Public Engagement</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Collaborations">Collaborations</a></li>
+
−
 
+
−
            </ul>
+
−
          </li>
+
−
 
+
−
          <li class="dropdown">
+
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Team">Team <span class="caret"></span></a>
+
−
            <ul class="dropdown-menu" style="text-align: right;">
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Team">Team</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UIOWA/Attributions">Attributions</a></li>
+
−
 
+
−
            </ul>
+
−
          </li>
+
−
        </ul>
+
−
      </div>
+
−
      <!-- /.navbar-collapse -->
+
 
     </div>
 
     </div>
−
    <!-- /.container-fluid -->
 
−
<div class = "clear" >
 
−
</div>
 
−
  </nav>
 
−
</body>
 
−
</head>
 
−
 
  
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
      <ul class="nav navbar-nav">
 +
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 +
        <li><a href="#">Link</a></li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Action</a></li>
 +
            <li><a href="#">Another action</a></li>
 +
            <li><a href="#">Something else here</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Separated link</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">One more separated link</a></li>
 +
          </ul>
 +
        </li>
 +
      </ul>
 +
      <form class="navbar-form navbar-left">
 +
        <div class="form-group">
 +
          <input type="text" class="form-control" placeholder="Search">
 +
        </div>
 +
        <button type="submit" class="btn btn-default">Submit</button>
 +
      </form>
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li><a href="#">Link</a></li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Action</a></li>
 +
            <li><a href="#">Another action</a></li>
 +
            <li><a href="#">Something else here</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Separated link</a></li>
 +
          </ul>
 +
        </li>
 +
      </ul>
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
  
  

Revision as of 19:02, 3 July 2017