Merge pull request #617 from misol/develop

Detect scroll up or down for display menu toggle for mobile screen
This commit is contained in:
Min-Soo Kim 2016-10-20 00:11:14 +09:00 committed by GitHub
commit be194a528a

View file

@ -1,15 +1,20 @@
$(function() { $(function()
{
"use strict"; "use strict";
/* adjust the width of the right member menu */ /* adjust the width of the right member menu */
var menu_width = function() { var menu_width = function()
if($('#layout_gnb>ul>li:first-child').width() > 50) { {
if($('#layout_gnb>ul>li:first-child').width() > 50)
{
$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width()); $('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width());
} }
} }
$( window ).resize(function() { $( window ).resize(function()
if($('#layout_gnb>ul>li:first-child').width() > 50) { {
if($('#layout_gnb>ul>li:first-child').width() > 50)
{
menu_width(); menu_width();
} }
}); });
@ -17,32 +22,65 @@ $(function() {
menu_width(); menu_width();
/* mobile hamburger menu toggle */ /* mobile hamburger menu toggle */
$(".layout_mobile_menu").each(function() { $(".layout_mobile_menu").each(function()
$( this ).click(function( event ) { {
$( this ).click(function( event )
{
event.preventDefault(); event.preventDefault();
layout_toggleMenuOpener( $( this ).get(0) ); layout_toggleMenuOpener( $( this ).get(0) );
}); });
}); });
/* detect scrolling up or down to hide or show hamburger menu */
var previousScroll = 0;
$( window ).scroll(function()
{
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll)
{
if($("#layout_menu_toggle").css( 'position' ) === 'fixed' && $("#layout_menu_toggle").attr('data-scroll-down') !== 'true')
{
$("#layout_menu_toggle").attr('data-scroll-down', 'true');
$("#layout_menu_toggle").fadeOut();
}
}
else
{
if($("#layout_menu_toggle").css( 'position' ) === 'fixed' && $("#layout_menu_toggle").attr('data-scroll-down') === 'true')
{
$("#layout_menu_toggle").attr('data-scroll-down', '');
$("#layout_menu_toggle").fadeIn();
}
}
previousScroll = currentScroll;
});
/* keyboard accessibility for dropdown menu */ /* keyboard accessibility for dropdown menu */
$(".layout_dropdown").each(function() { $(".layout_dropdown").each(function()
$( this ).focusin( function( event ) { {
$( this ).focusin( function( event )
{
$( this ).addClass('layout_focus'); $( this ).addClass('layout_focus');
$( this ).find("ul.layout_dropdown-content").css('display', 'block').attr('data-dropdown', 'active'); $( this ).find("ul.layout_dropdown-content").css('display', 'block').attr('data-dropdown', 'active');
}); });
}); });
$('body').focusin(function( event ) { $('body').focusin(function( event )
if (!$(event.target).parents('.layout_dropdown').is('.layout_dropdown')) { {
if (!$(event.target).parents('.layout_dropdown').is('.layout_dropdown'))
{
$('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus'); $('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus');
} }
}); });
/* keyboard accessibility for dropdown menu END */ /* keyboard accessibility for dropdown menu END */
function layout_toggleMenuOpener(obj) { function layout_toggleMenuOpener(obj)
if(obj.classList.contains("is-active") === true){ {
if(obj.classList.contains("is-active") === true)
{
var targetMenu = $(obj).attr('data-target'); var targetMenu = $(obj).attr('data-target');
$('#' + targetMenu).slideUp('300', function() { $('#' + targetMenu).slideUp('300', function()
{
$(this).css('display', ''); $(this).css('display', '');
}); });
@ -62,7 +100,8 @@ $(function() {
} }
// Language Select // Language Select
$('.layout_language>.toggle').click(function(){ $('.layout_language>.toggle').click(function()
{
$('.selectLang').toggle(); $('.selectLang').toggle();
}); });
}); });