Line 1: | Line 1: | ||
function initTemplate() { | function initTemplate() { | ||
+ | |||
+ | var menuTop = $('.title_container').offset().top + $('.title_container').height(); | ||
+ | |||
+ | // Get browser inner width | ||
+ | //============================================================================= | ||
+ | function getWidth() { | ||
+ | if (self.innerWidth) { | ||
+ | return self.innerWidth; | ||
+ | } | ||
+ | |||
+ | if (document.documentElement && document.documentElement.clientWidth) { | ||
+ | return document.documentElement.clientWidth; | ||
+ | } | ||
+ | |||
+ | if (document.body) { | ||
+ | return document.body.clientWidth; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Keep the menu fixed at the top when scrolling in desktop mode | ||
+ | //============================================================================= | ||
+ | function repositionMenu() { | ||
+ | if ($(window).scrollTop() + 16 > menuTop && getWidth() > 740) { | ||
+ | $('#main_menu') | ||
+ | .css('position', 'fixed') | ||
+ | .css('top', '16px'); | ||
+ | $('#main_wrapper') | ||
+ | .css('margin-top', '40px'); | ||
+ | } else { | ||
+ | $('#main_menu') | ||
+ | .css('position', 'static'); | ||
+ | $('#main_wrapper') | ||
+ | .css('margin-top', '0px'); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Highlight menu buttons when mouse hover | ||
+ | //============================================================================= | ||
+ | $(".menu_container a").mouseover(function (e) { | ||
+ | e.stopPropagation(); | ||
+ | $(this).addClass('menu_hover'); | ||
+ | }).mouseout(function () { | ||
+ | $(this).removeClass('menu_hover'); | ||
+ | }); | ||
+ | |||
+ | // Reposition menu after jump to an anchor | ||
+ | //============================================================================= | ||
+ | $(".outline_item > a").click(function() { | ||
+ | $(document).scrollTop($($(this).attr("href")).offset().top - 76); | ||
+ | repositionMenu(); | ||
+ | $(document).scrollTop($($(this).attr("href")).offset().top - 76); | ||
+ | return false; | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function initMenus() { | ||
var menuTop = $('.title_container').offset().top + $('.title_container').height(); | var menuTop = $('.title_container').offset().top + $('.title_container').height(); | ||
Line 35: | Line 91: | ||
} | } | ||
} | } | ||
− | |||
− | |||
// Show submenu when the corresponding menu item is clicked | // Show submenu when the corresponding menu item is clicked | ||
Line 73: | Line 127: | ||
e.stopPropagation(); | e.stopPropagation(); | ||
}); | }); | ||
+ | |||
+ | $(window).scroll(repositionMenu); | ||
+ | $(window).resize(repositionMenu); | ||
} | } |
Revision as of 12:44, 12 September 2016
function initTemplate() {
var menuTop = $('.title_container').offset().top + $('.title_container').height();
// Get browser inner width //============================================================================= function getWidth() { if (self.innerWidth) { return self.innerWidth; }
if (document.documentElement && document.documentElement.clientWidth) { return document.documentElement.clientWidth; }
if (document.body) { return document.body.clientWidth; } }
// Keep the menu fixed at the top when scrolling in desktop mode //============================================================================= function repositionMenu() { if ($(window).scrollTop() + 16 > menuTop && getWidth() > 740) { $('#main_menu') .css('position', 'fixed') .css('top', '16px'); $('#main_wrapper') .css('margin-top', '40px'); } else { $('#main_menu') .css('position', 'static'); $('#main_wrapper') .css('margin-top', '0px'); } }
// Highlight menu buttons when mouse hover //============================================================================= $(".menu_container a").mouseover(function (e) { e.stopPropagation(); $(this).addClass('menu_hover'); }).mouseout(function () { $(this).removeClass('menu_hover'); }); // Reposition menu after jump to an anchor //============================================================================= $(".outline_item > a").click(function() { $(document).scrollTop($($(this).attr("href")).offset().top - 76); repositionMenu(); $(document).scrollTop($($(this).attr("href")).offset().top - 76); return false; });
}
function initMenus() {
var menuTop = $('.title_container').offset().top + $('.title_container').height();
// Get browser inner width //============================================================================= function getWidth() { if (self.innerWidth) { return self.innerWidth; }
if (document.documentElement && document.documentElement.clientWidth) { return document.documentElement.clientWidth; }
if (document.body) { return document.body.clientWidth; } }
// Keep the menu fixed at the top when scrolling in desktop mode //============================================================================= function repositionMenu() { if ($(window).scrollTop() + 16 > menuTop && getWidth() > 740) { $('#main_menu') .css('position', 'fixed') .css('top', '16px'); $('#main_wrapper') .css('margin-top', '40px'); } else { $('#main_menu') .css('position', 'static'); $('#main_wrapper') .css('margin-top', '0px'); } }
// Show submenu when the corresponding menu item is clicked //============================================================================= $(".menu_item").click(function (e) { $(".menu_item").not(this) .removeClass('menu_open') .children('.submenu') .removeClass('submenu_visible'); $('.submenu', this).toggleClass('submenu_visible'); $(this).toggleClass('menu_open'); e.stopPropagation(); });
// Close submenus when the user clicks anywhere on the page //============================================================================= $(document).click(function () { $('.submenu').removeClass('submenu_visible'); $('.menu_item').removeClass('menu_open'); });
// Highlight menu buttons when mouse hover //============================================================================= $(".menu_container a").mouseover(function (e) { e.stopPropagation(); $(this).addClass('menu_hover'); }).mouseout(function () { $(this).removeClass('menu_hover'); });
// Show menu when the burger button is clicked //============================================================================= $("#burger_button").click(function (e) { $("#main_menu") .toggleClass('burger_visible'); e.stopPropagation(); });
$(window).scroll(repositionMenu); $(window).resize(repositionMenu);
}