|
|
Line 1: |
Line 1: |
− | <html>
| |
− |
| |
− | <style>
| |
− |
| |
− | /********************************* DEFAULT WIKI SETTINGS ********************************/
| |
− |
| |
− | #sideMenu, #top_title {display:none;}
| |
− | #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
| |
− | body {background-color:white; }
| |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
− |
| |
− | /********************************* MENU ********************************/
| |
− | /* Wrapper for the menu */
| |
− | .menu_wrapper {
| |
− | width:150px;
| |
− | height:100vh;
| |
− | position:fixed;
| |
− | padding:0px;
| |
− | float:left;
| |
− | background-color:#f2f2f2;
| |
− | text-align:left;
| |
− | }
| |
− |
| |
− | /* styling for the menu items */
| |
− | .menu_item {
| |
− | width:100%;
| |
− | margin:-2px 0px 0px -20px;
| |
− | padding: 10px 10px;
| |
− | border-bottom: 1px solid #d3d3d3;
| |
− | font-weight:bold;
| |
− | color:#000000;
| |
− | cursor: pointer;
| |
− | }
| |
− |
| |
− | /* when hovering on a menu item */
| |
− | .menu_item:hover {
| |
− | color:#000000;
| |
− | background-color: #72c9b6;
| |
− | }
| |
− |
| |
− | /* decoration icon for the menu buttons*/
| |
− | .icon {
| |
− | float:right;
| |
− | font-size:16px;
| |
− | font-weight:bold;
| |
− | }
| |
− |
| |
− | /* this is the icon for when the content is collapsed */
| |
− | .plus::before {
| |
− | content: "+";
| |
− | }
| |
− | /* this is the icon for when the content is expanded */
| |
− | .less::before {
| |
− | content: "–";
| |
− | }
| |
− |
| |
− | /* styling for the ul that creates the buttons */
| |
− | ul.menu_items {
| |
− | width:100%;
| |
− | margin-left:0px;
| |
− | padding:0px;
| |
− | list-style: none;
| |
− | }
| |
− |
| |
− | /* styling for the li that are the menu items */
| |
− | .menu_items li {
| |
− | width:90%;
| |
− | margin-top:-2px;
| |
− | padding: 15px 0px 15px 15px ;
| |
− | display:block;
| |
− | border-bottom: 1px solid #d3d3d3;
| |
− | text-align:left;
| |
− | font-weight:bold;
| |
− | text-decoration:none;
| |
− | color:#000000;
| |
− | list-style-type:none;
| |
− | cursor:pointer;
| |
− | -webkit-transition: all 0.4s ease;
| |
− | -moz-transition: all 0.4s ease;
| |
− | -ms-transition: all 0.4s ease;
| |
− | -o-transition: all 0.4s ease; transition: all 0.4s ease;
| |
− | }
| |
− |
| |
− | .menu_item a {
| |
− | width: 100%;
| |
− | margin-left: -20px;
| |
− | padding: 11px 90px 12px 20px;
| |
− | text-decoration: none;
| |
− | color:black;
| |
− | }
| |
− |
| |
− | /* When hovering on a menu item */
| |
− | .menu_items li:hover {
| |
− | background-color:#72c9b6;
| |
− | color: #000000;
| |
− | }
| |
− |
| |
− | /* styling for the submenus */
| |
− | .submenu {
| |
− | width:100%;
| |
− | display: none;
| |
− | font-weight:bold;
| |
− | cursor:pointer;
| |
− |
| |
− | }
| |
− |
| |
− | /* moving the margin for the submenu ul list */
| |
− | ul.submenu {
| |
− | width: 100%;
| |
− | margin: 10px 0px -11px 0px;
| |
− | list-style: none;
| |
− | }
| |
− |
| |
− | /*styling for the submenu buttons */
| |
− | .submenu li {
| |
− | width: 100%;
| |
− | margin-left: 10px;
| |
− | margin-bottom: 0px;
| |
− | }
| |
− |
| |
− |
| |
− | /* hover state for the submenu buttons */
| |
− | .submenu li a {
| |
− | width: 100%;
| |
− | padding: 5px 10px;
| |
− | display: inline-block;
| |
− | border-bottom: 1px solid #d3d3d3;
| |
− | background-color:white;
| |
− | text-decoration:none;
| |
− | color:#000000;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | .submenu li a:hover {
| |
− | background-color:#000000;
| |
− | color: #72c9b6;
| |
− | }
| |
− |
| |
− |
| |
− | /* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
| |
− | .collapsable_menu_control {
| |
− | width:100%;
| |
− | padding: 15px 0px;
| |
− | display:none;
| |
− | background-color:#000000;
| |
− | text-align:center;
| |
− | font-weight:bold;
| |
− | color:#72c9b6;
| |
− | cursor:pointer;
| |
− | -webkit-transition: all 0.4s ease;
| |
− | -moz-transition: all 0.4s ease;
| |
− | -ms-transition: all 0.4s ease;
| |
− | -o-transition: all 0.4s ease;
| |
− | transition: all 0.4s ease;
| |
− | }
| |
− |
| |
− | /* when hovering on that button */
| |
− | .collapsable_menu_control:hover {
| |
− | background-color: #72c9b6;
| |
− | color:#000000;
| |
− | }
| |
− |
| |
− | </style>
| |
− |
| |
− |
| |
− |
| |
− |
| |
| <!--- THIS IS WHERE THE HTML BEGINS ---> | | <!--- THIS IS WHERE THE HTML BEGINS ---> |
| | | |
Revision as of 17:36, 5 August 2016
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<footer>
Rise
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
© 2015 Rise.Development By BootstrapDev
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap-assets/js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
<script src="plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="plugins/countTo/jquery.countTo.js"></script>
<script src="plugins/inview/jquery.inview.min.js"></script>
<script src="plugins/Lightbox/dist/js/lightbox.min.js"></script>
<script src="plugins/WOW/dist/wow.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</body>
<script>
// This is the jquery part of your template. Try not modify any of this code since it makes your menu work.
$(document).ready(function() {
$("#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
$("#team_name").html( wgPageName );
}
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
$("#page_name").html ( ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ") );
}
$('#accordion').find('.menu_item').click(function(){
//Expand or collapse this panel
submenu = $(this).find('.submenu');
submenu.toggle();
icon = $(this).find('.icon');
if ( !$( submenu ).is(':visible') ) {
icon.removeClass("less").addClass("plus");
}
else {
icon.removeClass("plus").addClass("less");
}
//Hide the other panels
$(".submenu").not(submenu).hide();
$(".icon").not(icon).removeClass("less").addClass("plus");
});
$(".collapsable_menu_control").click(function() {
$(".menu_item").toggle();
});
$( window ).resize(function() {
$(".menu_item").show();
});
});
</script>
</html>