4c396f6f9b
* Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
32 lines
729 B
JavaScript
32 lines
729 B
JavaScript
/**
|
|
* navigation.js
|
|
*
|
|
* Handles toggling the navigation menu for small screens.
|
|
*/
|
|
( function() {
|
|
var container = document.getElementById( 'site-navigation' ),
|
|
button,
|
|
menu;
|
|
|
|
if ( ! container )
|
|
return;
|
|
|
|
button = container.getElementsByTagName( 'h1' )[0];
|
|
if ( 'undefined' == typeof button )
|
|
return;
|
|
|
|
menu = container.getElementsByTagName( 'ul' )[0];
|
|
|
|
// Hide menu toggle button if menu is empty and return early.
|
|
if ( 'undefined' == typeof menu ) {
|
|
button.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
button.onclick = function() {
|
|
if ( -1 != container.className.indexOf( 'toggled' ) )
|
|
container.className = container.className.replace( ' toggled', '' );
|
|
else
|
|
container.className += ' toggled';
|
|
};
|
|
} )(); |