{"id":15849,"date":"2025-08-05T11:31:19","date_gmt":"2025-08-05T18:31:19","guid":{"rendered":"https:\/\/codedcommerce.com\/?page_id=15849"},"modified":"2025-08-05T11:31:19","modified_gmt":"2025-08-05T18:31:19","slug":"block-based-mega-menu","status":"publish","type":"woo-code","link":"https:\/\/codedcommerce.com\/woo\/block-based-mega-menu\/","title":{"rendered":"Block-based Mega Menu"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The following is a mega menu animation script that allows you to place Block based menu sections within your Block Theme header. Setup:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hamburger menu ID <em>ccom-menu-hamburger<\/em><\/li>\n\n\n\n<li>Top menu items (desktop) class <em>ccom-menu-topitem<\/em> and <em>ccom-menu-slug<\/em> where <em>slug<\/em> is each menu short name<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code language-php\"><code>add_action( 'wp_print_scripts', function() {\n\n\t?>\n\t&lt;style type=\"text\/css\">\n\t.ccom-menu-topitem:after {\n\t\tcontent: '?';\n\t\tmargin-left: 0.25em;\n\t}\n\t#ccom-menu-hamburger, .ccom-menu-topitem {\n\t\tposition: absolute;\n\t\tz-index: 100;\n\t\twidth: 100%;\n\t\tmax-height: 0;\n\t\topacity: 0;\n\t\ttransform: scaleY( 0 );    \n\t\ttransform-origin: top;\n\t\ttransition: all 350ms ease;\n\t}\n\t#ccom-menu-hamburger.is-open, .ccom-menu-topitem.is-open {\n\t\tmax-height: none;\n\t\topacity: 1;\n\t\ttransform: scaleY( 1 );\n\t}\n\theader.is-open {\n\t\tposition: fixed;\n\t\tz-index: 100;\n\t\tmin-height: 100dvh;\n\t\toverflow-y: scroll;\n\t\tbackground-color: #fff;\n\t}\n\n\t\/* mobile header sticky foot *\/\n\theader.is-open #ccom-menu-hamburger {\n\t\tmin-height: 100dvh;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-content: space-between;\n\t}\n\theader.is-open #ccom-menu-hamburger footer {\n\t\tmargin-top: auto;\n\t\tposition: sticky;\n\t\tbottom: 0;\n\t}\n\n\t\/* wp admin bar compat *\/\n\tbody.admin-bar header.is-open {\n\t\tmin-height: calc( 100dvh - var( --wp-admin--admin-bar--height ) );\n\t}\n\t&lt;\/style>\n\t&lt;?php\n\n} );\n\nadd_action( 'wp_print_footer_scripts', function() {\n\n\t?>\n\t&lt;script type=\"text\/javascript\">\n\n\t\/\/ Define Mega Menus\n\tlet menu_items = document.querySelectorAll( '.ccom-menu-topitem' );\n\n\t\/\/ Function To Hide Mega Menus\n\tfunction ccom_mega_menu_hideall() {\n\t\twindow.scrollTo( 0, 0 );\n\t\tmenu_items.forEach( function( menu_item ) {\n\t\t\tmenu_item.classList.remove( 'is-open' );\n\t\t} );\n\t}\n\n\t\/\/ Show A Mega Menu\n\tfunction ccom_mega_menu_show( menu_item_slug ) {\n\t\tccom_mega_menu_hideall();\n\t\tdocument.getElementById( 'ccom-menu-' + menu_item_slug ).classList.add( 'is-open' );\n\t}\n\n\t\/\/ Loop Main Menu Items\n\tmenu_items.forEach( function( menu_item_slug ) {\n\n\t\tlet menu_link = document.querySelector(\n\t\t\t'.wp-block-navigation-item.' + menu_item_slug + ' a'\n\t\t);\n\t\tif( ! menu_link ) {\n\t\t\treturn;\n\t\t}\n\n\t\t\/\/ Menu Link Clicks\n\t\tmenu_link.addEventListener( 'click', function( event ) {\n\n\t\t\t\/\/ Cancel Click Behavior\n\t\t\tevent.preventDefault();\n\n\t\t\t\/\/ Hamburger Click\n\t\t\tif( menu_item_slug == 'hamburger' ) {\n\n\t\t\t\t\/\/ Already Open, Close It\n\t\t\t\tif( document.getElementById( 'ccom-menu-hamburger' ).classList.contains( 'is-open' ) ) {\n\t\t\t\t\tdocument.querySelector( 'body' ).style.overflow = 'visible';\n\t\t\t\t\tmenu_link.closest( 'header' ).classList.remove( 'is-open' );\n\t\t\t\t\tmenu_link.innerHTML = '?';\n\t\t\t\t\tccom_mega_menu_hideall();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t\/\/ Open It\n\t\t\t\tdocument.querySelector( 'body' ).style.overflow = 'hidden';\n\t\t\t\tmenu_link.closest( 'header' ).classList.add( 'is-open' );\n\t\t\t\tmenu_link.innerHTML = '?';\n\t\t\t\tccom_mega_menu_show( 'hamburger' );\n\n\t\t\t}\n\n\t\t} );\n\n\t\t\/\/ Link Mouse Enter Event\n\t\tmenu_link.addEventListener( 'mouseenter', function( event ) {\n\t\t\tif( window.innerWidth > 781 ) {\n\t\t\t\tccom_mega_menu_show( menu_item_slug );\n\t\t\t}\n\t\t} );\n\n\t\t\/\/ Menu Mouse Exit Event\n\t\tlet menu_aside = document.getElementById( 'ccom-menu-' + menu_item_slug );\n\t\tif( ! menu_aside ) {\n\t\t\treturn;\n\t\t}\n\t\tmenu_aside.addEventListener( 'mouseleave', function( event ) {\n\t\t\tif( window.innerWidth > 781 ) {\n\t\t\t\tccom_mega_menu_hideall();\n\t\t\t}\n\t\t} );\n\n\t\/\/ End Loop Main Menu Items\n\t} );\n\t&lt;\/script>\n\t&lt;?php\n\n} );<\/code><\/pre>\n","protected":false},"template":"","class_list":["post-15849","woo-code","type-woo-code","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/woo-code\/15849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/woo-code"}],"about":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/types\/woo-code"}],"wp:attachment":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/media?parent=15849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}