diff --git a/js/navigation.js b/js/navigation.js index 13a4e448..f48e1b70 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -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 ); } )(); diff --git a/style.css b/style.css index 1a066876..022bc72d 100644 --- a/style.css +++ b/style.css @@ -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%; }