Twenty Twenty-One: Allow local anchor links to be used in primary navigation.
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. Merges [49854] to the 5.6 branch. Fixes #52006. Built from https://develop.svn.wordpress.org/branches/5.6@49855 git-svn-id: http://core.svn.wordpress.org/branches/5.6@49574 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
9ef2645fd7
commit
7c08559e8c
|
@ -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' );
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.6.1-alpha-49853';
|
||||
$wp_version = '5.6.1-alpha-49855';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
Loading…
Reference in New Issue