Difference between revisions of "Template:Nagahama"

Line 5: Line 5:
 
<script>
 
<script>
  
    $(function () {
+
// This is the jquery part of your template.
        var Accordion = function (el, multiple) {
+
// Try not modify any of this code too much since it makes your menu work.
            this.el = el || {};
+
            // more then one submenu open?
+
            this.multiple = multiple || false;
+
  
            var dropdownlink = this.el.find('.dropdownlink');
+
$(document).ready(function() {
            dropdownlink.on('click',
+
                            { el: this.el, multiple: this.multiple },
+
                            this.dropdown);
+
        };
+
  
        Accordion.prototype.dropdown = function (e) {
+
$("#HQ_page").attr('id','');
            var $el = e.data.el,
+
                $this = $(this),
+
                //this is the ul.submenuItems
+
                $next = $this.next();
+
  
            $next.slideToggle();
+
// call the functions that control the menu
            $this.parent().toggleClass('open');
+
menu_functionality();  
 +
hide_show_menu();
  
            if (!e.data.multiple) {
 
                //show only one menu at the same time
 
                $el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
 
            }
 
        }
 
  
        var accordion = new Accordion($('.accordion-menu'), false);
 
    })
 
  
 +
//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
+
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
    $(".menu_button").click(function () {
+
$(".menu_button").click(function(){
  
        // add or remove the class "open" , this class holds the "-"  
+
// add or remove the class "open" , this class holds the "-"  
        $(this).children().toggleClass("open");
+
$(this).children().toggleClass("open");
        // show or hide the submenu
+
// show or hide the submenu
        $(this).next('.submenu_wrapper').fadeToggle(400);
+
$(this).next('.submenu_wrapper').fadeToggle(400);
    });
+
});
  
                            </script>
+
// 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>
  
  
Line 427: Line 467:
  
 
<a href="https://2017.igem.org/Team:Nagahama">
 
<a href="https://2017.igem.org/Team:Nagahama">
                <img src="http://placehold.it/350x150">
+
<img src="http://placehold.it/500x200/79b74a/fff.jpg/?text=nagahama">
[[File:Nagahama funa logo.jpg .png|50px]]
+
 
</a>
 
</a>
  

Revision as of 16:47, 3 October 2017

Nagahama