mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-05-08 11:33:55 +09:00
Merge pull request #617 from misol/develop
Detect scroll up or down for display menu toggle for mobile screen
This commit is contained in:
commit
be194a528a
1 changed files with 54 additions and 15 deletions
|
|
@ -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();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue