Arkairfani (Talk | contribs) |
Arkairfani (Talk | contribs) |
||
Line 2: | Line 2: | ||
<script> | <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> | </script> | ||
+ | |||
Line 93: | Line 94: | ||
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
− | + | ||
− | + | /* Clear the default wiki settings */ | |
− | + | ||
− | + | #home_logo, #topMenu { display:none; } | |
− | + | #topMenu, #top_title, .patrollink {display:none;} | |
− | + | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | |
− | + | body {background-color:white; } | |
− | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | |
Line 124: | Line 125: | ||
background-color: #131514; | background-color: #131514; | ||
font-family: verdana; | font-family: verdana; | ||
− | + | width:100%; | |
} | } | ||
.container a { | .container a { | ||
float: left; | float: left; | ||
− | font-size: | + | font-size: 20px; |
color: white; | color: white; | ||
text-align: center; | text-align: center; | ||
text-decoration: none; | text-decoration: none; | ||
− | |||
} | } | ||
Line 143: | Line 143: | ||
.not-dropdown { | .not-dropdown { | ||
− | width: | + | width: 12.5%; |
height: 50px; | height: 50px; | ||
vertical-align: center; | vertical-align: center; | ||
Line 149: | Line 149: | ||
.dropdown .dropbtn { | .dropdown .dropbtn { | ||
− | font-size: | + | font-size: 20px; |
border: none; | border: none; | ||
outline: none; | outline: none; | ||
Line 155: | Line 155: | ||
background-color: inherit; | background-color: inherit; | ||
width: 100%; | width: 100%; | ||
− | height: | + | height: 50px; |
padding: 5px; | padding: 5px; | ||
} | } | ||
Line 161: | Line 161: | ||
.container a:hover, .dropdown:hover .dropbtn { | .container a:hover, .dropdown:hover .dropbtn { | ||
background-color: #4CAF50; | background-color: #4CAF50; | ||
− | + | color: black; | |
} | } | ||
Line 176: | Line 176: | ||
float: none; | float: none; | ||
color: black; | color: black; | ||
− | padding: | + | padding: 5pt; |
text-decoration: none; | text-decoration: none; | ||
display: block; | display: block; | ||
text-align: left; | text-align: left; | ||
+ | margin: 0; | ||
+ | font-size: medium; | ||
+ | } | ||
} | } | ||
Line 203: | Line 206: | ||
display: block; | display: block; | ||
font-family:Times New Roman; | font-family:Times New Roman; | ||
− | font-size: | + | font-size: 3em; |
font-weight: bold; | font-weight: bold; | ||
font-style: italic; | font-style: italic; | ||
Line 253: | Line 256: | ||
} | } | ||
− | + | ||
.column .full_size { | .column .full_size { | ||
− | + | width:100%; | |
− | + | } | |
.column.full_size img { | .column.full_size img { | ||
− | + | width:97%; | |
− | + | padding: 10px 15px; | |
− | + | } | |
.column.half_size { | .column.half_size { | ||
− | + | width: 50%; | |
− | + | } | |
.column.half_size img { | .column.half_size img { | ||
− | + | width: 94.5%; | |
− | + | padding: 10px 15px; | |
− | + | } | |
.igem_2017_content_wrapper { | .igem_2017_content_wrapper { | ||
− | + | width: 81%; | |
− | + | margin: 2%; | |
− | + | display:block; | |
− | + | float:left; | |
− | + | background-color:white; | |
− | + | font-family:Tahoma, Geneva, sans-serif; | |
− | + | } | |
</style> | </style> | ||
− | |||
<style> | <style> | ||
Line 403: | Line 405: | ||
background-attachment: scroll; | background-attachment: scroll; | ||
} | } | ||
+ | |||
+ | |||
+ | |||
</style> | </style> |
Revision as of 23:47, 28 October 2017