Difference between revisions of "Template:UIOWA navbar"

@@ Line 2: / Line 2: @@
 <head>
 <link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
-<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:BootstrapStyling?action=raw&ctype=text/css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">
 <link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:NEStyle?action=raw&ctype=text/css" rel="stylesheet">
-<script type="text/javascript" src="https://2016.igem.org/Team:Imperial_College/Resources/JS?action=raw&ctype=text/javascript"></script>
-<link rel="stylesheet" href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:VerticalScroll&amp;action=raw&amp;ctype=text/css">
-<script type="text/javascript" src="https://use.fontawesome.com/2967839f93.js"></script>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="https://2016.igem.org/Team:Imperial_College/Resources/Modernizers&amp;action=raw&amp;ctype=text/javascript"></script>
-<script src="https://2016.igem.org/Team:Imperial_College/Resources/JS:Bootstrap&amp;action=raw&amp;ctype=text/javascript"></script>
-<script src="https://2016.igem.org/Team:Imperial_College/Resources/JS:Jquery&amp;action=raw&amp;ctype=text/javascript"></script>
-<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 <style>
 /********************************* DEFAULT WIKI SETTINGS  ********************************/
@@ Line 85: / Line 66: @@
 .navbar .dropdown-menu {
    margin-top: 0;
-}
-/********************************* CONTENT OF THE PAGE ********************************/
-/* Wrapper for the content */
-.content_wrapper {
-  width: 85%;
-  margin-left: 150px;
-  padding: 0px;
-  float: left;
-  background-color: white;
-}
-/*LAYOUT */
-.column {
-  padding: 10px 0px;
-  float: left;
-  background-color: white;
-}
-.full_size {
-  width: 100%;
-}
-.full_size img {
-  padding: 10px 15px;
-  width: 96.5%;
-}
-.half_size {
-  width: 50%;
-}
-.half_size img {
-  padding: 10px 15px;
-  width: 93%;
-}
-.img:hover {
-  opacity: 1.0 !important;
-}
-.clear {
-  clear: both;
-}
-.highlight {
-  width: 90%;
-  margin: auto;
-  padding: 15px 5px;
-  background-color: #f2f2f2;
-}
-.judges-will-not-evaluate {
-  border: 4px solid #72c9b6;
-  display: block;
-  margin: 5px 15px;
-  width: 95%;
-  font-weight: bold;
-}
-/*STYLING */
-/* styling for the titles */
-.content_wrapper h1,
-.content_wrapper h2 {
-  padding: 5px 15px;
-  border-bottom: 0px;
-  color: #72c9b6;
-}
-.content_wrapper h3,
-.content_wrapper h4,
-.content_wrapper h5,
-.content_wrapper h6 {
-  padding: 5px 15px;
-  border-bottom: 0px;
-  color: #000000;
-}
-/* font and text */
-.content_wrapper p {
-  padding: 0px 15px;
-  font-size: 13px;
-  font-family: 'Roboto', sans-serif;
-}
-/* Links */
-.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;
-}
-/* hover for the links */
-.content_wrapper a:hover {
-  text-decoration: none;
-  color: #000000;
-}
-/* non numbered lists */
-.content_wrapper ul {
-  padding: 0px 20px;
-  font-size: 13px;
-  font-family: 'Quicksand', sans-serif;
-}
-/* numbered lists */
-.content_wrapper ol {
-  padding: 0px;
-  font-size: 13px;
-  font-family: 'Quicksand', sans-serif;
-}
-/* Table */
-.content_wrapper table {
-  width: 97%;
-  margin: 15px 10px;
-  border: 1px solid #d3d3d3;
-  border-collapse: collapse;
-}
-/* table cells */
-.content_wrapper td {
-  padding: 10px;
-  vertical-align: text-top;
-  border: 1px solid #d3d3d3;
-  border-collapse: collapse;
-}
-/* table headers */
-.content_wrapper th {
-  padding: 10px;
-  vertical-align: text-top;
-  border: 1px solid #d3d3d3;
-  border-collapse: collapse;
-  background-color: #f2f2f2;
-}
-/* Button class */
-.button_click {
-  margin: 10px auto;
-  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;
-}
-/* button class on hover */
-.button_click:hover {
-  background-color: #000000;
-  color: #72c9b6;
-}
-.top-pad {
-  padding: 35px;
 }
@@ Line 349: / Line 133: @@
 <script>
-// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
+	// 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','');
-		if ( wgPageName.substring( 0,  8) == "Template")  {   // if the page is a template it displays the full name in a single line
+		// call the functions that control the menu
-			$("#team_name").html( wgPageName );
+		menu_functionality();
-		}
+		hide_show_menu();
-		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
+		//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
-			$("#page_name").html (     ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+		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");
-		$('#accordion').find('.menu_item').click(function(){
+			// 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");
+		}
-			 //Expand or collapse this panel
-			submenu = $(this).find('.submenu');
-			submenu.toggle();
-			icon = $(this).find('.icon');
-			if ( !$( submenu ).is(':visible') ) {
+		// allow button on the black menu bar to show/hide the side menu
-				icon.removeClass("less").addClass("plus");
+		function hide_show_menu() {
-			}
-			else {
+			// in case you preview mode is selected, the menu is hidden for better visibility
-				icon.removeClass("plus").addClass("less");
+			if (window.location.href.indexOf("submit") >= 0) {
+				$(".igem_2017_menu_wrapper").hide();
 			}
-			//Hide the other panels
+			// if the black menu bar has been loaded
-			$(".submenu").not(submenu).hide();
+  			if (document.getElementById('bars_item')) {
-			$(".icon").not(icon).removeClass("less").addClass("plus");
-		});
+				// when the "bars_item" has been clicked
+				$("#bars_item").click(function() {
+					$("#sideMenu").hide();
-		$(".collapsable_menu_control").click(function() {
+					// show/hide the menu wrapper
-			$(".menu_item").toggle();
+					$(".igem_2017_menu_wrapper").fadeToggle("100");
-		});
+				});
+  			}
-		$( window ).resize(function() {
+			// 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
-			$(".menu_item").show();
+			else {
-		});
+    				setTimeout(hide_show_menu, 15);
+			}
+		}
 	});
@@ Line 425: / Line 228: @@
-      </div>
-      <div class="navbar-header" style="padding-top: 15px; padding-left: 15px;">
-        <a class="navbar-logo" href="https://2017.igem.org/Team:UIOWA">
-          <image class="img-responsive" src="https://static.igem.org/mediawiki/2017/9/91/T--UIOWA--school-logo.png" height="100" width="100">
-        </a>
        </div>
@@ Line 435: / Line 233: @@
          <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
            <li class="dropdown">
-             <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Description">Project <span class="caret"></span></a>
+             <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://2016.igem.org/Team:Imperial_College/Description">Description</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Description">Description</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Results">Results</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/InterLab">Interlab</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Proof">Proof</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Results">Results</a></li>
-              <li><a href="https://2016.igem.org/Team:Imperial_College/Basic_Part">Basic Parts</a></li>
-              <li><a href="https://2016.igem.org/Team:Imperial_College/Composite_Part">Composite Parts</a></li>
              </ul>
            </li>
@@ Line 447: / Line 244: @@
            <li class="dropdown">
-             <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Model">Modelling <span class="caret"></span></a>
+             <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Parts">Parts <span class="caret"></span></a>
              <ul class="dropdown-menu" style="left:0;">
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Model">Overview</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Parts">Parts</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/SingleCell">Single Cell Model</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Basic_Part">Basic Part</a></li>
-              <li><a href="https://2016.igem.org/Team:Imperial_College/GRO">Population Model</a></li>
              </ul>
@@ Line 458: / Line 254: @@
            <li>
-             <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Software">Software Tools </a></li>
+             <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UIOWA/Safety">Safety </a></li>
            <li class="dropdown">
-             <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Notebook">Notebook <span class="caret"></span></a>
+             <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://2016.igem.org/Team:Imperial_College/Notebook">Lab book</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Notebook">Lab book</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Experiments">Protocols</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Experiments">Protocols</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Medals">Medal Criteria</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Medals">Medal Criteria</a></li>
-              <li><a href="https://2016.igem.org/Team:Imperial_College/BrainStorm">Brainstorm</a></li>
              </ul>
            </li>
            <li class="dropdown">
-             <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices <span class="caret"></span></a>
+             <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://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/HP/Silver">Human Practices - Silver</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Integrated_Practices">Integrated Practices</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Engagement">Public Engagement</a></li>
-              <li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">Public Engagement</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Collaborations">Collaborations</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Collaborations">Collaborations</a></li>
              </ul>
@@ Line 483: / Line 277: @@
            <li class="dropdown">
-             <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Team">Team <span class="caret"></span></a>
+             <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://2016.igem.org/Team:Imperial_College/Team">Team</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Team">Team</a></li>
-               <li><a href="https://2016.igem.org/Team:Imperial_College/Attributions">Attributions</a></li>
+               <li><a href="https://2017.igem.org/Team:UIOWA/Attributions">Attributions</a></li>
+              <li><a href="https://igem.org/2017_Judging_Form?team=UIOWA">Judging Form</a></li>
              </ul>
@@ Line 495: / Line 290: @@
      </div>
      <!-- /.container-fluid -->
+<div class = "clear" >
+</div>
    </nav>
 </body>
+</head>
 </html>

Latest revision as of 01:24, 2 November 2017

Project
Parts
- Parts
- Basic Part
Safety
Notebook
Human Practices
Team