Difference between revisions of "Template:UIOWA"

Line 1: Line 1:
−
<html>
 
 
<head>
 
<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:Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
Line 297: Line 296:
 
</head>
 
</head>
  
 +
 +
 +
 +
 +
 +
 +
<html>
 
<style>
 
<style>
 
#curves {border-radius: 100px;}
 
#curves {border-radius: 100px;}

Revision as of 18:19, 3 July 2017

<head> <link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:Bootstrap?action=raw&ctype=text/css" rel="stylesheet">


<style> /********************************* DEFAULT WIKI SETTINGS ********************************/

  1. sideMenu,
  2. top_title {
 display: none;

}

  1. content {
 padding: 0px;
 width: 100%;

}

body { 

 background-color: white;
 width: 100%;

}

  1. bodyContent h1,
  2. bodyContent h2,
  3. bodyContent h3,
  4. bodyContent h4,
  5. bodyContent h5 {
 margin-bottom: 0px;

}

  1. bodyContent {
 padding-right: 0px;

}

  1. globalWrapper {
 font-size: 100%;
 padding: 0px;
 margin: -10px -20px -20px -20px;

}

.navbar-collapse { 

 padding-left: 0px;

}

  1. banner {
 margin-top: 50px;

}

  1. 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;">

       <a class="navbar-logo" href="https://2017.igem.org/Team:UIOWA">
         <image class="img-responsive" src="T--UIOWA--logo-DNA.png" height="120" width="120">
       </a>



 </nav>

</body> </head>