Arkairfani (Talk | contribs) |
Arkairfani (Talk | contribs) |
||
(50 intermediate revisions by the same user not shown) | |||
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() { | |
− | + | $("#sideMenu").hide(); | |
− | + | $("#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); | ||
+ | } | ||
+ | } | ||
− | + | ||
+ | }); | ||
Line 93: | Line 95: | ||
/***************************************************** 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 126: | ||
background-color: #131514; | background-color: #131514; | ||
font-family: verdana; | font-family: verdana; | ||
− | + | width:100%; | |
} | } | ||
Line 133: | Line 135: | ||
text-align: center; | text-align: center; | ||
text-decoration: none; | text-decoration: none; | ||
− | |||
} | } | ||
Line 161: | Line 162: | ||
.container a:hover, .dropdown:hover .dropbtn { | .container a:hover, .dropdown:hover .dropbtn { | ||
background-color: #4CAF50; | background-color: #4CAF50; | ||
− | + | color: black; | |
} | } | ||
Line 176: | Line 177: | ||
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 202: | Line 206: | ||
.ITB_h1 { | .ITB_h1 { | ||
display: block; | display: block; | ||
− | font-family: | + | font-family:Times New Roman; |
font-size: 3em; | font-size: 3em; | ||
font-weight: bold; | font-weight: bold; | ||
− | + | font-style: italic; | |
border-style: hidden; | border-style: hidden; | ||
color: #e8e6d1; | color: #e8e6d1; | ||
+ | line-height: initial; | ||
} | } | ||
Line 253: | Line 258: | ||
} | } | ||
− | + | ||
.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 407: | ||
background-attachment: scroll; | background-attachment: scroll; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
+ | |||
</style> | </style> | ||
Line 415: | Line 416: | ||
<!-- NAVBAR START --> | <!-- NAVBAR START --> | ||
− | <navbar> | + | <navbar style="position: fixed"> |
<div class="container"> | <div class="container"> | ||
+ | |||
+ | <div class="dropdown" style="width: 70px"><center><img src="https://static.igem.org/mediawiki/2017/4/48/Logo_iGEM_ITB_2017.png" style="height: 50px; width: auto"></center></div> | ||
+ | |||
<div class="dropdown"> | <div class="dropdown"> | ||
Line 428: | Line 432: | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Team">Team</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Team">Team</a> | ||
− | <a href="https://2017.igem.org/Team:ITB_Indonesia/ | + | <a href="https://2017.igem.org/Team:ITB_Indonesia/Attributions">Attributions</a> |
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 436: | Line 439: | ||
<button class="dropbtn">Project</button> | <button class="dropbtn">Project</button> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href="https://2017.igem.org/Team:ITB_Indonesia/Description"> | + | <a href="https://2017.igem.org/Team:ITB_Indonesia/Collaborations"> |
+ | Collaborations</a> | ||
+ | <a href="https://2017.igem.org/Team:ITB_Indonesia/Description">Overview</a> | ||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Design"> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Design"> | ||
Design</a> | Design</a> | ||
− | |||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Notebook">Notebook</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Notebook">Notebook</a> | ||
− | |||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Contribution">Contribution</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Contribution">Contribution</a> | ||
− | |||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Results">Results</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Results">Results</a> | ||
− | |||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Improve">Improve</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Improve">Improve</a> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 454: | Line 455: | ||
<button class="dropbtn">Parts</button> | <button class="dropbtn">Parts</button> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | |||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Basic_Part">Basic Parts</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Basic_Part">Basic Parts</a> | ||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Composite_Part">Composite Part</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Composite_Part">Composite Part</a> | ||
<a href="https://2017.igem.org/Team:ITB_Indonesia/Part_Collection">Part Collection</a> | <a href="https://2017.igem.org/Team:ITB_Indonesia/Part_Collection">Part Collection</a> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
Line 475: | Line 469: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <button class="dropbtn"> | + | <form action="https://2017.igem.org/Team:ITB_Indonesia/Model"> |
+ | <button class="dropbtn">Model</button> | ||
+ | </form> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | |||
− | |||
</div> | </div> | ||
− | </div> | + | </div> |
<div class="dropdown"> | <div class="dropdown"> | ||
− | + | <form action="https://2017.igem.org/Team:ITB_Indonesia/Awards"> | |
− | + | <button type="submit" class="dropbtn">Medals</button> | |
− | </ | + | </forn> |
+ | <div class="dropdown-content"> | ||
+ | </div> | ||
</div> | </div> | ||
+ | |||
</div> | </div> | ||
</navbar> | </navbar> | ||
<!-- END NAVBAR --> | <!-- END NAVBAR --> | ||
+ | |||
+ | |||
+ | <style type="text/css"> | ||
+ | .table { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .table td { | ||
+ | height: 200px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | </style> |
Latest revision as of 02:27, 2 November 2017