Difference between revisions of "Template:SSTi-SZGD"

 
(47 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>  
+
<body>
 +
<style type="text/css">
  
−
<!-- This tells the browser that your page is responsive -->
+
html{ font-size: 62.5%; font-family: "Arial","Helvetica","sans-serif"; margin: auto; background: white;}
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
 +
body,span,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
 +
    margin:0;
 +
    padding:0;
 +
    line-height: 1.2;
 +
}
 +
 +
/*  before after*/
 +
*, ::before, ::after {
 +
    padding: 0;
 +
    margin: 0;
 +
    /*phone*/
 +
    -webkit-tap-highlight-color: transparent; 
 +
    box-sizing: border-box;
 +
    -webkit-box-sizing: border-box;
 +
}
 +
 +
/*mouse*/
 +
.noselect {
 +
    -webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
}
  
−
</head>
+
/*bower style*/
−
<script>
+
fieldset, img, input, button {
 +
    border: none;
 +
    outline-style: none;
 +
}
  
−
// This is the jquery part of your template. 
+
ul, ol {
−
// Try not modify any of this code too much since it makes your menu work.
+
    list-style: none;
 +
   
 +
}
  
−
$(document).ready(function() {
+
a {
 +
    text-decoration: none;
 +
}
  
−
$("#HQ_page").attr('id','');
+
a:hover{ text-decoration: none;}
  
−
// call the functions that control the menu
+
input, textarea {
−
menu_functionality();  
+
    border: none;
−
hide_show_menu();
+
    outline: none;
 +
    resize: none;
 +
    -webkit-appearance: none;
 +
}
  
 +
img {
 +
    vertical-align: middle;
 +
    display: block;
 +
}
  
 +
table {
 +
    border-collapse: collapse;
 +
}
  
−
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
/*cls float*/
−
function menu_functionality() {
+
.clearfix:before, .clearfix:after {
 +
    content: "";
 +
    display: table;
 +
}
 +
.clearfix:after {
 +
    clear: both;
 +
}
 +
.clearfix {
 +
    *zoom: 1; /*IE/7/6*/
 +
}
  
−
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
/*use*/
−
$(".menu_button").click(function(){
+
s, i, em {
 +
    font-style: normal;
 +
    text-decoration: none;
 +
}
  
−
// add or remove the class "open" , this class holds the "-"
+
/*igem*/
−
$(this).children().toggleClass("open");
+
body{ min-width: 1024px; position: relative;}
−
// show or hide the submenu
+
#home_logo, #sideMenu,#bars_item,#top_title { display:none; }
−
$(this).next('.submenu_wrapper').fadeToggle(400);
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
});
+
#content { width:100%; padding:0px;  margin-top:-10px; margin-left:0px;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside ul li{ line-height: 1.5em;}
 +
  
−
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
</style>
−
$("#display_menu_control").click(function(){
+
<script type="text/javascript">
−
$('#menu_content').fadeToggle(400);
+
−
});
+
  
−
// call the current page highlight function
+
$("#HQ_page").removeAttr("id");
−
highlight_current_page();
+
$("#globalWrapper").removeAttr("id");
−
}
+
$("#content").removeAttr("id");
 +
$(".mw-content-ltr").removeAttr("class");
  
−
 
+
</script>
−
// call the highlight current page function to show it on the menu with a different background color
+
<body>
−
function highlight_current_page() {
+
</html>
−
 
+
−
// 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
+

Latest revision as of 01:45, 27 October 2017