The following is a mega menu animation script that allows you to place Block based menu sections within your Block Theme header. Setup:
- Hamburger menu ID ccom-menu-hamburger
- Top menu items (desktop) class ccom-menu-topitem and ccom-menu-slug where slug is each menu short name
add_action( 'wp_print_scripts', function() {
?>
<style type="text/css">
.ccom-menu-topitem:after {
content: '?';
margin-left: 0.25em;
}
#ccom-menu-hamburger, .ccom-menu-topitem {
position: absolute;
z-index: 100;
width: 100%;
max-height: 0;
opacity: 0;
transform: scaleY( 0 );
transform-origin: top;
transition: all 350ms ease;
}
#ccom-menu-hamburger.is-open, .ccom-menu-topitem.is-open {
max-height: none;
opacity: 1;
transform: scaleY( 1 );
}
header.is-open {
position: fixed;
z-index: 100;
min-height: 100dvh;
overflow-y: scroll;
background-color: #fff;
}
/* mobile header sticky foot */
header.is-open #ccom-menu-hamburger {
min-height: 100dvh;
display: flex;
flex-direction: column;
align-content: space-between;
}
header.is-open #ccom-menu-hamburger footer {
margin-top: auto;
position: sticky;
bottom: 0;
}
/* wp admin bar compat */
body.admin-bar header.is-open {
min-height: calc( 100dvh - var( --wp-admin--admin-bar--height ) );
}
</style>
<?php
} );
add_action( 'wp_print_footer_scripts', function() {
?>
<script type="text/javascript">
// Define Mega Menus
let menu_items = document.querySelectorAll( '.ccom-menu-topitem' );
// Function To Hide Mega Menus
function ccom_mega_menu_hideall() {
window.scrollTo( 0, 0 );
menu_items.forEach( function( menu_item ) {
menu_item.classList.remove( 'is-open' );
} );
}
// Show A Mega Menu
function ccom_mega_menu_show( menu_item_slug ) {
ccom_mega_menu_hideall();
document.getElementById( 'ccom-menu-' + menu_item_slug ).classList.add( 'is-open' );
}
// Loop Main Menu Items
menu_items.forEach( function( menu_item_slug ) {
let menu_link = document.querySelector(
'.wp-block-navigation-item.' + menu_item_slug + ' a'
);
if( ! menu_link ) {
return;
}
// Menu Link Clicks
menu_link.addEventListener( 'click', function( event ) {
// Cancel Click Behavior
event.preventDefault();
// Hamburger Click
if( menu_item_slug == 'hamburger' ) {
// Already Open, Close It
if( document.getElementById( 'ccom-menu-hamburger' ).classList.contains( 'is-open' ) ) {
document.querySelector( 'body' ).style.overflow = 'visible';
menu_link.closest( 'header' ).classList.remove( 'is-open' );
menu_link.innerHTML = '?';
ccom_mega_menu_hideall();
return;
}
// Open It
document.querySelector( 'body' ).style.overflow = 'hidden';
menu_link.closest( 'header' ).classList.add( 'is-open' );
menu_link.innerHTML = '?';
ccom_mega_menu_show( 'hamburger' );
}
} );
// Link Mouse Enter Event
menu_link.addEventListener( 'mouseenter', function( event ) {
if( window.innerWidth > 781 ) {
ccom_mega_menu_show( menu_item_slug );
}
} );
// Menu Mouse Exit Event
let menu_aside = document.getElementById( 'ccom-menu-' + menu_item_slug );
if( ! menu_aside ) {
return;
}
menu_aside.addEventListener( 'mouseleave', function( event ) {
if( window.innerWidth > 781 ) {
ccom_mega_menu_hideall();
}
} );
// End Loop Main Menu Items
} );
</script>
<?php
} );