Difference between revisions of "Template:UIOWA navbar"

Line 349: Line 349:
 
<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() {
  
 +
// 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);
 +
}
 +
}
  
  
 
});
 
});
−
 
−
 
  
  

Revision as of 17:49, 30 June 2017