fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-04-02 01:52:10 +09:00
Code Issues Projects Releases Packages Wiki Activity

Detect scroll up or down for display menu toggle for mobile screen

Browse source 
Mobile screen is small. On the screen, the toggle can the hide content.
Detect user's scroll and display the menu when user need it.
This commit is contained in:
MinSoo Kim 2016-10-17 00:13:18 +09:00
parent 5b930611f0
commit 898d8cfe6d
1 changed files with 54 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

69
layouts/simple_world/layout.js
View file

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