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

Improve keyboard accessibility

Browse source 
Improve keyboard accessibility for drop-down menu.
This commit is contained in:
MinSoo Kim 2016-09-28 00:25:53 +09:00
parent 3d470e4972
commit 5b930611f0
2 changed files with 34 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

43
layouts/simple_world/layout.js
View file

@ -1,6 +1,7 @@
$(function() {
"use strict";
/* adjust the width of the right member menu */
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());
@ -15,39 +16,51 @@ $(function() {
menu_width();
var toggles = document.querySelectorAll(".layout_mobile_menu");
/* mobile hamburger menu toggle */
$(".layout_mobile_menu").each(function() {
$( this ).click(function( event ) {
event.preventDefault();
layout_toggleMenuOpener( $( this ).get(0) );
});
});
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
layout_toggleHandler(toggle);
};
/* keyboard accessibility for dropdown menu */
$(".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')) {
$('*[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){
var targetMenu = $(obj).attr('data-target');
$('#' + targetMenu).slideUp('300', function() {
$(this).css('display', '')
$(this).css('display', '');
});
obj.classList.remove("is-active");
}
else {
$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
var targetMenu = $(obj).attr('data-target');
$('html,body').animate({scrollTop:0}, 200);
if(targetMenu == 'layout_gnb')
{
$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
$('html,body').animate({scrollTop:0}, 200);
}
$('#' + targetMenu).slideDown('300');
obj.classList.add("is-active");
}
}
function layout_toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
layout_toggleMenuOpener(this);
});
}
// Language Select
$('.layout_language>.toggle').click(function(){
$('.selectLang').toggle();

8
layouts/simple_world/layout.scss
View file

@ -220,7 +220,8 @@ header.layout_frame {
}
header .layout_menu li:hover,
header .layout_menu li:focus,
header .layout_menu li:active {
header .layout_menu li:active,
header .layout_menu .layout_focus {
background-color: lighten($grey, 40%);
}
.layout_menu li a:hover,
@ -272,7 +273,10 @@ header .layout_menu li:active {
.layout_menu .layout_dropdown:focus .layout_dropdown-content,
.layout_menu .layout_dropdown a:hover ~ .layout_dropdown-content,
.layout_menu .layout_dropdown a:active ~ .layout_dropdown-content,
.layout_menu .layout_dropdown a:focus ~ .layout_dropdown-content/* ,
.layout_menu .layout_dropdown a:focus ~ .layout_dropdown-content,
.layout_menu .layout_dropdown layout_dropdown-content:hover,
.layout_menu .layout_dropdown layout_dropdown-content:active,
.layout_menu .layout_dropdown layout_dropdown-content:focus/* ,
.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:hover),
.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:focus) */ {
display: block;