forked from mirror/_s
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:
parent
108799d104
commit
88f94a9a4e
|
@ -41,4 +41,35 @@
|
||||||
menu.setAttribute( 'aria-expanded', 'true' );
|
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 );
|
||||||
} )();
|
} )();
|
||||||
|
|
|
@ -476,11 +476,13 @@ a:active {
|
||||||
.main-navigation ul ul a:hover {
|
.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;
|
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%;
|
left: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue