Skip to content

Instantly share code, notes, and snippets.

@robertocarroll
Created January 29, 2025 14:56
Show Gist options
  • Select an option

  • Save robertocarroll/9ac5ad3952a37260a6b951bb723f6092 to your computer and use it in GitHub Desktop.

Select an option

Save robertocarroll/9ac5ad3952a37260a6b951bb723f6092 to your computer and use it in GitHub Desktop.
Recreates the mobile menu JavaScript to open the WordPress menu
(function() {
const WordPressInteractivity = {
state: {
menuOpenedBy: {
click: false,
hover: false,
focus: false
},
isMenuOpen: false
},
actions: {
openMenuOnClick: function(event) {
const responsiveContainer = document.querySelector('.wp-block-navigation__responsive-container');
const navigationNav = document.querySelector('nav.wp-block-navigation');
if (responsiveContainer) {
responsiveContainer.classList.add('is-menu-open');
responsiveContainer.classList.add('has-modal-open');
document.documentElement.classList.add('has-modal-open');
this.state.menuOpenedBy.click = true;
this.state.isMenuOpen = true;
} else {
console.error('Could not find responsive container');
}
},
closeMenuOnClick: function(event) {
const responsiveContainer = document.querySelector('.wp-block-navigation__responsive-container');
if (responsiveContainer) {
responsiveContainer.classList.remove('is-menu-open');
responsiveContainer.classList.remove('has-modal-open');
document.documentElement.classList.remove('has-modal-open');
this.state.menuOpenedBy.click = false;
this.state.isMenuOpen = false;
} else {
console.error('Could not find responsive container');
}
}
}
};
const openButton = document.querySelector('.wp-block-navigation__responsive-container-open');
const closeButton = document.querySelector('.wp-block-navigation__responsive-container-close');
if (openButton) {
openButton.addEventListener('click', function(event) {
WordPressInteractivity.actions.openMenuOnClick.call(WordPressInteractivity, event);
});
}
if (closeButton) {
closeButton.addEventListener('click', function(event) {
WordPressInteractivity.actions.closeMenuOnClick.call(WordPressInteractivity, event);
});
}
window.WordPressInteractivity = WordPressInteractivity;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment