rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First pass at fixing drop-down menus for touch 

This patch allows the user to view a site on a touch screen tablet and
access child menus by clicking on the parent once, or access the parent
by clicking on it twice. Props @iamtakashi for the original fix.
This commit is contained in:
sixhours 2014-12-17 15:03:17 -05:00
parent 108799d104
commit 88f94a9a4e
2 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
js/navigation.js
View File

@ -41,4 +41,35 @@
menu.setAttribute( 'aria-expanded', 'true' );
}
};
// Fix child menus for touch devices.
function fixMenuTouchTaps( container ) {
var touchStartFn,
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
if ( 'ontouchstart' in window ) {
touchStartFn = function( e ) {
var menuItem = this.parentNode;
if ( ! menuItem.classList.contains( 'focus' ) ) {
e.preventDefault();
for( var i = 0; i < menuItem.parentNode.children.length; ++i ) {
if ( menuItem === menuItem.parentNode.children[i] ) {
continue;
}
menuItem.parentNode.children[i].classList.remove( 'focus' );
}
menuItem.classList.add( 'focus' );
} else {
menuItem.classList.remove( 'focus' );
}
};
for ( var i = 0; i < parentLink.length; ++i ) {
parentLink[i].addEventListener( 'touchstart', touchStartFn, false )
}
}
}
fixMenuTouchTaps( container );
} )();

6
style.css
View File

@ -476,11 +476,13 @@ a:active {
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul { {
left: auto;
}
.main-navigation ul ul li:hover > ul {
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}