Difference between revisions of "Template:SSTi-SZGD"

Line 1: Line 1:
−
{{Template_All_Teams}}
 
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
 +
<head>
  
−
<!-- Start of CSS-->
+
<!-- This tells the browser that your page is responsive -->
−
<style type="text/css">
+
<meta name="viewport" content="width=device-width, initial-scale=1">  
  
−
/* WIKI SETTINGS*/
+
</head>
−
+
<script>
−
/* Hide first heading */
+
−
.firstHeading {
+
−
display: none;
+
−
}
+
−
+
−
/*-- Remove borders, float content left and remove padding/margin */
+
−
#globalWrapper, #content{
+
−
background-color: transparent;
+
−
border: 0px;
+
−
float: left;
+
−
margin:0px;
+
−
padding: 0px;
+
−
}
+
  
−
/*left align Black Menu Bar */
+
// This is the jquery part of your template. 
−
#top_menu_inside {  
+
// Try not modify any of this code too much since it makes your menu work.
−
margin-left: 20px;  
+
 
−
}
+
$(document).ready(function() {
−
</style>
+
 
 +
$("#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

Revision as of 11:23, 21 July 2017