vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Twenty Twenty-One: Allow local anchor links to be used in primary navigation.

Browse Source 
This adds some JavaScript to detect when an anchor link is clicked within the primary navigation on mobile devices and closes the menu before scrolling to the location on the page.

Props poena, macmanx, t-p.
Fixes #52006.

git-svn-id: https://develop.svn.wordpress.org/trunk@49854 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers 2020-12-21 15:03:40 +00:00
parent 3d43e57237
commit b43ebc51e8
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js
View File

@ -150,6 +150,23 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
}
} );
/**
* Close menu and scroll to anchor when an anchor link is clicked.
* Adapted from TwentyTwenty.
*/
document.addEventListener( 'click', function( event ) {
// If target onclick is <a> with # within the href attribute
if ( event.target.hash && event.target.hash.includes( '#' ) ) {
wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );
twentytwentyoneToggleAriaExpanded( mobileButton );
// Wait 550 and scroll to the anchor.
setTimeout(function () {
var anchor = document.getElementById(event.target.hash.slice(1));
anchor.scrollIntoView();
}, 550);
}
} );
document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
li.addEventListener( 'mouseenter', function() {
this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );