Difference between revisions of "Template:Uppsala/Navbar"

 
(40 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<head>   
 
<head>   
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
−
<link href="https://2017.igem.org/Template:Uppsala/Bootstrap.css" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
−
 
+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab" >
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Uppsala/Bootstrap.css">
 
<style>
 
<style>
 +
html, body {
 +
    font-size: 1vh !important;
 +
}
 
.handsy li {cursor:pointer;}
 
.handsy li {cursor:pointer;}
−
.nav {
+
nav {
 
       font-family: "Raleway";
 
       font-family: "Raleway";
 +
      margin-top:10px;
 +
      font-size: 2em;
 
}
 
}
 +
 +
 +
 +
/* Fix top panel Bootstrap issues. Patch by iGEM Stockholm 2015. Include this stylesheet in your header, after Bootstrap, to restore the original style to the top menu.*/
 +
       
 +
        top_menu_14,
 +
        #top_menu_under,
 +
        #top_menu_inside {
 +
            box-sizing: initial;
 +
        }
 +
       
 +
        top_menu_inside {
 +
            margin-left: 20px;
 +
        }
 +
       
 +
        bars_box,
 +
        #menu_BarsBox,
 +
        h5 {
 +
            -webkit-box-sizing: initial;
 +
            box-sizing: initial;
 +
            line-height: normal;
 +
        }
 +
       
 +
        menu_BarsBox > h5 {
 +
            color: rgb(0, 0, 0);
 +
            font-family: arial, sans-serif;
 +
            font-size: 1em;
 +
            line-height: normal;
 +
            margin-bottom: 0px;
 +
            margin-top: 0px;
 +
            font-weight: bold;
 +
        }
 +
       
 +
        .accordion-content li {
 +
            -height: 18px;
 +
            -webkit-box-sizing: initial;
 +
            box-sizing: initial;
 +
        }
 +
       
 +
        .accordion-header,
 +
        .active-header,
 +
        .accordion-header_noaction {
 +
            -webkit-box-sizing: initial;
 +
            box-sizing: initial;
 +
            color: rgb(101, 100, 89);
 +
            font-family: Arial, Gadget, sans-serif;
 +
            font-size: 1.5em;
 +
            font-weight: bold;
 +
            line-height: normal;
 +
            margin: 0;
 +
        }
 +
 +
 +
#sideMenu, #top_title {
 +
  display:none;
 +
}
 +
 +
 +
#sideMenu {
 +
  width: 200px;
 +
  position: fixed;
 +
}
 +
 +
#content {
 +
width: 100% !important;
 +
padding:0px;
 +
margin-top:-7px;
 +
margin: auto;
 +
}
 +
     
 +
.expand_Submenus { height:30px |!important;}
 +
 +
.menuDisplay.MainPage_menu.main.expand_Submenu { height: 30px |!important;}
 +
{
 +
width: 170 |!important;
 +
}
 +

 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
<!-- Blog stuff -->
 +
.blog-header {
 +
  padding-top: 20px;
 +
  padding-bottom: 20px;
 +
}
 +
#blog_page .blog-title {
 +
  margin-top: 30px;
 +
  margin-bottom: 0;
 +
  font-size: 2em;
 +
  color: #34495e;
 +
  font-weight: normal;
 +
}
 +
.blog-description {
 +
  font-size: 1.8em;
 +
  color: #999;
 +
}
 +
 +
/* Sidebar modules for boxing content */
 +
.sidebar-module {
 +
  padding: 15px;
 +
  margin: 0 -15px 15px;
 +
}
 +
.sidebar-module-inset {
 +
  padding: 15px;
 +
  background-color: #f5f5f5;
 +
  border-radius: 4px;
 +
}
 +
.sidebar-module-inset p:last-child,
 +
.sidebar-module-inset ul:last-child,
 +
.sidebar-module-inset ol:last-child {
 +
  margin-bottom: 0;
 +
}
 +
 +
/*
 +
* Blog posts
 +
*/
 +
 +
.blog-post {
 +
  margin-bottom: 60px;
 +
}
 +
.blog-post-title {
 +
  margin-bottom: 5px;
 +
  font-size: 3em;
 +
}
 +
.blog-post-meta {
 +
  margin-bottom: 20px;
 +
  color: #999;
 +
}
 +
 +
 +
 
</style>
 
</style>
 
<script>
 
<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() {
 
$(document).ready(function() {
  
 
$("#HQ_page").attr('id','');
 
$("#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() {
  
−
$('#accordion').find('.menu_item').click(function(){
+
// 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");
  
−
//Expand or collapse this panel
+
// now that the current_page class has been added to a menu item, make the submenu fade in
−
submenu = $(this).find('.submenu');
+
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
−
submenu.toggle();
+
// change the +/- symbol of the corresponding menu button
 +
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 +
 +
}
  
−
icon = $(this).find('.icon');
 
  
−
if ( !$( submenu ).is(':visible') ) {
+
 
−
icon.removeClass("less").addClass("plus");
+
// allow button on the black menu bar to show/hide the side menu
−
}
+
function hide_show_menu() {
−
else {
+
−
icon.removeClass("plus").addClass("less");
+
// in case you preview mode is selected, the menu is hidden for better visibility
 +
if (window.location.href.indexOf("submit") >= 0) {
 +
$(".igem_menu_wrapperr").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_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);
 +
, }
 +
}
  
  
 
});
 
});
 +
  
 
</script>
 
</script>
 +
<script src="https://2017.igem.org/Template:Uppsala/Script?action=raw&ctype=text/javascript"></script> 
  
 
</head>
 
</head>
  
 
<body>
 
<body>
−
 
+
<nav class="navbar navbar-inverse navbar-fixed-top handsy" >
−
<nav class="navbar navbar-inverse navbar-fixed-top handsy">
+
 
   <div class="container-fluid">
 
   <div class="container-fluid">
−
     <div class="navbar-header">
+
     <div class="navbar-header" >
 +
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>                       
 +
      </button>
 
       <a class="navbar-left" href="#"><img src="https://static.igem.org/mediawiki/2017/6/67/Uppsala_navbar_logo.png"  
 
       <a class="navbar-left" href="#"><img src="https://static.igem.org/mediawiki/2017/6/67/Uppsala_navbar_logo.png"  
 
       class="img.responsive" style="padding:5px 5px 0px 5px;"></a>
 
       class="img.responsive" style="padding:5px 5px 0px 5px;"></a>
 
     </div>
 
     </div>
−
     <ul class="nav navbar-nav pull-right">
+
<div class="collapse navbar-collapse" id="myNavbar">
−
       <li><a href="https://2017.igem.org/Team:Uppsala">Home</a></li>
+
     <ul class="nav navbar-nav pull-right" style="align:center !important;">
 +
       <li ><a href="https://2017.igem.org/Team:Uppsala">Home</a></li>
 
       <li class="dropdown">
 
       <li class="dropdown">
 
       <a class="dropdown-toggle" data-toggle="dropdown" role= "button">Team
 
       <a class="dropdown-toggle" data-toggle="dropdown" role= "button">Team
Line 89: Line 255:
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Team">Team</a></li>
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Team">Team</a></li>
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Collaborations">Collaborations</a></li>
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Collaborations">Collaborations</a></li>
 +
        <li><a href="https://2017.igem.org/Team:Uppsala/Attributions">Attributions</a></li>
 
       </ul>
 
       </ul>
 
       </li>
 
       </li>
Line 97: Line 264:
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Description">Description</a></li>
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Description">Description</a></li>
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Design">Design</a></li>
 
       <li><a href="https://2017.igem.org/Team:Uppsala/Design">Design</a></li>
−
         <li><a href="https://2017.igem.org/Team:Uppsala/Experiments">Experiments</a></li>
+
         <li><a href="https://2017.igem.org/Team:Uppsala/CrocinPathway">Crocin Pathway</a></li>
−
         <li><a href="https://2017.igem.org/Team:Uppsala/Notebook">Notebook</a></li>
+
         <li><a href="https://2017.igem.org/Team:Uppsala/Zea-Strain">Zea-Strain</a></li>
−
        <li><a href="https://2017.igem.org/Team:Uppsala/InterLab">InterLab</a></li>
+
         <li><a href="https://2017.igem.org/Team:Uppsala/Model">Modeling</a></li>
−
        <li><a href="https://2017.igem.org/Team:Uppsala/Contribution">Contribution</a></li>
+
         <li><a href="https://2017.igem.org/Team:Uppsala/Parts">Parts</a></li>
−
         <li><a href="https://2017.igem.org/Team:Uppsala/Model">Model</a></li>
+
         </ul>
−
         <li><a href="https://2017.igem.org/Team:Uppsala/Results">Results</a></li>
+
−
         <li><a href="https://2017.igem.org/Team:Uppsala/Demonstrate">Demonstrate</a></li>
+
−
        <li><a href="https://2017.igem.org/Team:Uppsala/Improve">Improve</a></li>
+
−
        <li><a href="https://2017.igem.org/Team:Uppsala/Attributions">Attributions</a></li>
+
−
      </ul>
+
 
       </li>
 
       </li>
−
      <li><a href="https://2017.igem.org/Team:Uppsala/Safety">Safety</a></li>
 
 
       <li class="dropdown">
 
       <li class="dropdown">
 
       <a class="dropdown-toggle" data-toggle="dropdown">Human Practices
 
       <a class="dropdown-toggle" data-toggle="dropdown">Human Practices
 
       <span class="caret"></span></a>
 
       <span class="caret"></span></a>
 
       <ul class="dropdown-menu">
 
       <ul class="dropdown-menu">
−
       <li><a href="https://2017.igem.org/Team:Uppsala/HP/Silver">Silver HP</a></li>
+
       <li><a href="https://2017.igem.org/Team:Uppsala/HP/Silver">Human Practices</a></li>
−
       <li><a href="https://2017.igem.org/Team:Uppsala/HP/Gold_Integrated">Integrated and Gold HP</a></li>
+
       <li><a href="https://2017.igem.org/Team:Uppsala/HP/Gold_Integrated">Ethics-Gold HP</a></li>
 
         <li><a href="https://2017.igem.org/Team:Uppsala/Engagement">Engagement</a></li>
 
         <li><a href="https://2017.igem.org/Team:Uppsala/Engagement">Engagement</a></li>
 +
        <li><a href="https://2017.igem.org/Team:Uppsala/Entrepreneurship">Market Analysis</a></li>
 
         </ul>
 
         </ul>
 
       </li>
 
       </li>
 
       <li class="dropdown">
 
       <li class="dropdown">
−
       <a class="dropdown-toggle" data-toggle="dropdown">Awards
+
       <a class="dropdown-toggle" data-toggle="dropdown">Results
 
       <span class="caret"></span></a>
 
       <span class="caret"></span></a>
 
       <ul class="dropdown-menu">
 
       <ul class="dropdown-menu">
−
       <li><a href="https://2017.igem.org/Team:Uppsala/Applied_Design">Applied Design</a></li>
+
       <li><a href="https://2017.igem.org/Team:Uppsala/Results">Results</a></li>
−
       <li><a href="https://2017.igem.org/Team:Uppsala/Entrepreneurship">Entrepreneurship</a></li>
+
       <li><a href="https://2017.igem.org/Team:Uppsala/Demonstrate">Demonstrate</a></li>
−
         <li><a href="https://2017.igem.org/Team:Uppsala/Hardware">Hardware</a></li>
+
         <li><a href="https://2017.igem.org/Team:Uppsala/Medals">Medals</a></li>
−
        <li><a href="https://2017.igem.org/Team:Uppsala/Measurement">Measurement</a></li>
+
            </ul></li>
−
         <li><a href="https://2017.igem.org/Team:Uppsala/Model">Model</a></li>
+
     
−
        <li><a href="https://2017.igem.org/Team:Uppsala/Plant">Plant</a></li>
+
      <li><a href="https://2017.igem.org/Team:Uppsala/Portfolio">Portfolio</a></li>
−
        <li><a href="https://2017.igem.org/Team:Uppsala/Software">Software</a></li>
+
    <li class="dropdown">
−
         <li><a href="https://igem.org/2017_Judging_Form?team=Uppsala">Judging Form</a></li>
+
      <a class="dropdown-toggle" data-toggle="dropdown">Extended Work
−
        </ul>
+
      <span class="caret"></span></a>
−
      <li><a href="https://2017.igem.org/Team:Uppsala/Parts">Parts</a></li>
+
      <ul class="dropdown-menu">
 +
         <li><a href="https://2017.igem.org/Team:Uppsala/Hardware">Chipgineering2.0</a></li>
 +
      <li><a href="https://2017.igem.org/Team:Uppsala/InterLab">InterLab</a></li>
 +
      <li><a href="https://2017.igem.org/Team:Uppsala/Improve">Improve</a></li>
 +
         <li><a href="https://2017.igem.org/Team:Uppsala/Contribution">Contributions</a></li>
 +
            </ul></li>
 +
        <li><a href="https://2017.igem.org/Team:Uppsala/Safety">Safety</a></li>
 
     </li>
 
     </li>
 
   </div>
 
   </div>
 +
</div>
 
</nav>
 
</nav>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 22:05, 1 November 2017