Mega Menu

Hi there,

I’m trying to build a Mega Menu using Generateblocks. A nice workaround to do that is using the ‘Tabs’ block as a header, and then a bit of custom javascript for the ‘hover’ effect. The idea is based on https://vjdesign.com.au/generatepress-megamenu/

I’m quite on the way, but there’s a few more things I hope to achieve. Hopefully you can point me in the right direction.

1. The block replaces the current header and when hovering an item, a new menu appears. This menu ‘pushes’ the rest of the page away. Is it possible to make it so that the dropdown appears ‘on top’ of the page, and is treated more as an overlay?

2. Currently the headers (Home, Diensten, Partners, Over ons) don’t have an HTML link to a page. Is it possible for us to add a link to the tabs?

3. Can we include the ‘search’ icon so we can use the search model in the header?

4. With the traditional header (as you can see on datahub.nl), the header appears when scrolling up in an article. When scrolling down within the article it is not visible. Can we also achieve that using the mega menu idea, so it appears when scrolling up?

Here’s the code I’ve used for the block element:

<!-- wp:generateblocks/container {"uniqueId":"1393192a","align":"wide","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"row","alignItems":"flex-start","justifyContent":"flex-start","position":"relative","zindex":99,"sizing":{"maxWidth":"1410px"},"spacing":{"marginLeft":"auto","marginRight":"auto","paddingTop":"40px","paddingBottom":"40px"}} -->
<!-- wp:generateblocks/container {"uniqueId":"220dbf7c","isDynamic":true,"blockVersion":4,"sizing":{"width":"25%","widthMobile":"100%"}} -->
<!-- wp:image {"lightbox":{"enabled":false},"id":2541,"width":"217px","height":"auto","sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large is-resized"><a href="/"><img src="https://riocwfi5lx-staging.onrocket.site/wp-content/uploads/2024/07/datahub-text.svg" alt="" class="wp-image-2541" style="width:217px;height:auto"/></a></figure>
<!-- /wp:image -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"29e28312","isDynamic":true,"blockVersion":4,"sizing":{"width":"75%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/container {"uniqueId":"94b43e3a","isDynamic":true,"blockVersion":4,"variantRole":"tabs","display":"flex","flexDirection":"column","columnGap":"0px","rowGap":"0px","className":"megamenu","htmlAttributes":[{"attribute":"role","value":"tablist"}]} -->
<!-- wp:generateblocks/container {"uniqueId":"70bf006c","isDynamic":true,"blockVersion":4,"variantRole":"tab-buttons","display":"flex","justifyContent":"center","columnGap":"10px","overflowXMobile":"auto","sizing":{"maxWidthMobile":"100%"},"lock":{"remove":true},"htmlAttributes":[{"attribute":"role","value":"list"}]} -->
<!-- wp:generateblocks/button {"uniqueId":"e7adbcfc","anchor":"gb-tab-button-e7adbcfc","blockVersion":4,"variantRole":"tab-button","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"center","columnGap":"0.5em","flexGrowMobile":1,"flexShrinkMobile":0,"typography":{"fontFamily":"sans-serif","fontSize":"22px"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","textColor":"var(\u002d\u002dcontrast)","textColorHover":"#ff08fa","textColorCurrent":"var(\u002d\u002daccent)","linkColor":"","linkColorHover":"","iconPaddingRight":"","iconPaddingLeft":"0.5","iconStyles":{"height":"15px","width":"15px"},"htmlAttributes":[{"attribute":"role","value":"tab"}]} -->
<button class="gb-button gb-button-e7adbcfc gb-button-text gb-tabs__button" id="gb-tab-button-e7adbcfc" role="tab">Home</button>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"49dcb57a","anchor":"gb-tab-button-49dcb57a","blockVersion":4,"variantRole":"tab-button","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"center","columnGap":"0.5em","flexGrowMobile":1,"flexShrinkMobile":0,"typography":{"fontFamily":"sans-serif","fontSize":"22px"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","textColor":"var(\u002d\u002dcontrast)","textColorHover":"#ff08fa","textColorCurrent":"var(\u002d\u002daccent)","linkColor":"","linkColorHover":"","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconPaddingLeft":"0.5","iconStyles":{"height":"15px","width":"15px"},"className":"megamenu","htmlAttributes":[{"attribute":"role","value":"tab"}]} -->
<button class="gb-button gb-button-49dcb57a gb-tabs__button megamenu" id="gb-tab-button-49dcb57a" role="tab"><span class="gb-button-text">Diensten</span><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"d9b6425a","anchor":"gb-tab-button-d9b6425a","blockVersion":4,"variantRole":"tab-button","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"center","columnGap":"0.5em","flexGrowMobile":1,"flexShrinkMobile":0,"typography":{"fontFamily":"sans-serif","fontSize":"22px"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","textColor":"var(\u002d\u002dcontrast)","textColorHover":"#ff08fa","textColorCurrent":"var(\u002d\u002daccent)","linkColor":"","linkColorHover":"","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconPaddingLeft":"0.5","iconStyles":{"height":"15px","width":"15px"},"htmlAttributes":[{"attribute":"role","value":"tab"}]} -->
<button class="gb-button gb-button-d9b6425a gb-tabs__button" id="gb-tab-button-d9b6425a" role="tab"><span class="gb-button-text">Partners</span><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></span></button>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"776717de","anchor":"gb-tab-button-776717de","blockVersion":4,"variantRole":"tab-button","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"center","columnGap":"0.5em","flexGrowMobile":1,"flexShrinkMobile":0,"typography":{"fontFamily":"sans-serif","fontSize":"22px"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","textColor":"var(\u002d\u002dcontrast)","textColorHover":"#ff08fa","textColorCurrent":"var(\u002d\u002daccent)","linkColor":"","linkColorHover":"","iconPaddingRight":"","iconPaddingLeft":"0.5","iconStyles":{"height":"15px","width":"15px"},"htmlAttributes":[{"attribute":"role","value":"tab"}]} -->
<button class="gb-button gb-button-776717de gb-button-text gb-tabs__button" id="gb-tab-button-776717de" role="tab">Over ons</button>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"36a69a9d","anchor":"gb-tab-button-36a69a9d","blockVersion":4,"variantRole":"tab-button","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"center","columnGap":"0.5em","flexGrowMobile":1,"flexShrinkMobile":0,"typography":{"fontFamily":"sans-serif","fontSize":"22px"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","textColor":"var(\u002d\u002dcontrast)","textColorHover":"#ff08fa","textColorCurrent":"var(\u002d\u002daccent)","linkColor":"","linkColorHover":"","iconPaddingRight":"","iconPaddingLeft":"0.5","iconStyles":{"height":"15px","width":"15px"},"className":" megamenu-close ","htmlAttributes":[{"attribute":"role","value":"tab"}]} -->
<button class="gb-button gb-button-36a69a9d gb-button-text gb-tabs__button  megamenu-close " id="gb-tab-button-36a69a9d" role="tab"></button>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"d489ba76","isDynamic":true,"blockVersion":4,"variantRole":"tab-items","lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"47667c3b","anchor":"gb-tab-item-47667c3b","isDynamic":true,"blockVersion":4,"variantRole":"tab-item","display":"flex","alignItems":"center","justifyContent":"center","spacing":{"paddingLeft":""},"htmlAttributes":[{"attribute":"role","value":"tabpanel"}]} /-->

<!-- wp:generateblocks/container {"uniqueId":"7750a827","anchor":"gb-tab-item-7750a827","isDynamic":true,"blockVersion":4,"variantRole":"tab-item","display":"flex","alignItems":"center","justifyContent":"center","spacing":{"paddingLeft":""},"htmlAttributes":[{"attribute":"role","value":"tabpanel"}]} -->
<!-- wp:generateblocks/container {"uniqueId":"63fc83b3","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":4,"sizing":{"width":"600px"},"spacing":{"paddingLeft":"1rem","paddingRight":"1rem","marginLeft":"-250px"},"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"},"globalClasses":["DatahubStandardPadding"]} -->
<!-- wp:generateblocks/grid {"uniqueId":"e2748328","columns":2,"horizontalGap":20,"verticalAlignment":"center","isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"b8b5ac8b","isGrid":true,"gridId":"e2748328","isDynamic":true,"blockVersion":4,"sizing":{"width":"33.33%","widthMobile":"100%"}} -->
<!-- wp:image {"id":3310,"width":"139px","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://riocwfi5lx-staging.onrocket.site/wp-content/uploads/2024/09/handshake.svg" alt="" class="wp-image-3310" style="width:139px;height:auto"/></figure>
<!-- /wp:image -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"fb6e7135","isGrid":true,"gridId":"e2748328","isDynamic":true,"blockVersion":4,"sizing":{"width":"66.6%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"560d1969","element":"div","blockVersion":3,"typography":{"fontSize":"36px","fontFamily":"Panton"}} -->
<div class="gb-headline gb-headline-560d1969 gb-headline-text"><strong>Onze Diensten</strong></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"d137ba32","element":"div","blockVersion":3,"typography":{"lineHeight":"40px","fontSize":"22px","fontWeight":"500","fontFamily":"sans-serif"},"textColor":"var(\u002d\u002dcontrast)","linkColor":"var(\u002d\u002dcontrast)","linkColorHover":"var(\u002d\u002daccent)"} -->
<div class="gb-headline gb-headline-d137ba32 gb-headline-text"><a href="https://riocwfi5lx-staging.onrocket.site/cloud-architecture/" data-type="page" data-id="3320">Cloud Architecture</a><br><a href="/data-architecture/">Data Architecture</a><br><a href="/data-engineering-en-management/">Data Engineering & Management</a><br><a href="/data-analytics/">Data Analytics</a><br><a href="/data-science-en-ai/">Data Science & AI</a></div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"314bd5c5","anchor":"gb-tab-item-314bd5c5","isDynamic":true,"blockVersion":4,"variantRole":"tab-item","display":"flex","alignItems":"center","justifyContent":"center","spacing":{"paddingLeft":""},"htmlAttributes":[{"attribute":"role","value":"tabpanel"}]} -->
<!-- wp:generateblocks/container {"uniqueId":"088d01ce","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":4,"sizing":{"width":"300px"},"spacing":{"paddingLeft":"2rem","paddingRight":"2rem"},"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"},"globalClasses":["DatahubStandardPadding"]} -->
<!-- wp:generateblocks/grid {"uniqueId":"0a06ae97","columns":1,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"7837f408","isGrid":true,"gridId":"0a06ae97","isDynamic":true,"blockVersion":4,"sizing":{"width":"50%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"f7586670","element":"div","blockVersion":3,"typography":{"fontSize":"36px","fontFamily":"Panton"},"spacing":{"marginBottom":"15px"}} -->
<div class="gb-headline gb-headline-f7586670 gb-headline-text"><strong>Partners</strong></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/image {"uniqueId":"83e341f7","mediaId":338,"sizeSlug":"full","width":"225px","blockVersion":2,"spacing":{"paddingBottom":"15px"}} -->
<figure class="gb-block-image gb-block-image-83e341f7"><img class="gb-image gb-image-83e341f7" src="https://riocwfi5lx-staging.onrocket.site/wp-content/uploads/2024/01/logo-microsoft-csp.png"/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/image {"uniqueId":"605434e8","mediaId":339,"sizeSlug":"large","width":"250px","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-605434e8"><img class="gb-image gb-image-605434e8" src="https://riocwfi5lx-staging.onrocket.site/wp-content/uploads/2024/01/databricks-logo-1024x162.png"/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"bac231a8","anchor":"gb-tab-item-bac231a8","isDynamic":true,"blockVersion":4,"variantRole":"tab-item","display":"flex","alignItems":"center","justifyContent":"center","spacing":{"paddingLeft":""},"htmlAttributes":[{"attribute":"role","value":"tabpanel"}]} -->
<!-- wp:generateblocks/container {"uniqueId":"23c61166","backgroundColor":"var(\u002d\u002dbase-2)","isDynamic":true,"blockVersion":4,"borders":{"borderTopLeftRadius":"15px","borderTopRightRadius":"15px","borderBottomLeftRadius":"15px","borderBottomRightRadius":"15px"},"globalClasses":["DatahubStandardPadding"]} -->
<!-- wp:generateblocks/grid {"uniqueId":"970253e8","columns":3,"isDynamic":true,"blockVersion":3} -->
<!-- wp:generateblocks/container {"uniqueId":"24fdcab4","isGrid":true,"gridId":"970253e8","isDynamic":true,"blockVersion":4,"sizing":{"width":"33.33%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"52210280","element":"div","blockVersion":3,"typography":{"fontSize":"36px","fontFamily":"Panton"}} -->
<div class="gb-headline gb-headline-52210280 gb-headline-text"><strong>Overz</strong></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Blog</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Blog2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"27b2d131","isGrid":true,"gridId":"970253e8","isDynamic":true,"blockVersion":4,"sizing":{"width":"33.33%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"626dca06","element":"div","blockVersion":3,"typography":{"fontSize":"36px","fontFamily":"Panton"}} -->
<div class="gb-headline gb-headline-626dca06 gb-headline-text"><strong>Text</strong></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p>Here's some more text to display</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"e8a66bae","isGrid":true,"gridId":"970253e8","isDynamic":true,"blockVersion":4,"sizing":{"width":"33.33%","widthMobile":"100%"}} -->
<!-- wp:generateblocks/headline {"uniqueId":"ac23c146","element":"div","blockVersion":3,"typography":{"fontSize":"36px","fontFamily":"Panton"}} -->
<div class="gb-headline gb-headline-ac23c146 gb-headline-text"><strong>Meer text</strong></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Test</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Test2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"ccae5d00","anchor":"gb-tab-item-ccae5d00","isDynamic":true,"blockVersion":4,"variantRole":"tab-item","display":"flex","alignItems":"center","justifyContent":"center","spacing":{"paddingLeft":""},"htmlAttributes":[{"attribute":"role","value":"tabpanel"}]} /-->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:html -->
<script>
const tabButtons = document.querySelectorAll('.megamenu .gb-tabs__button');
const megaMenu = document.querySelector('.megamenu');
const megaMenuClose = document.querySelector('.megamenu-close');

// Add event listeners to tab buttons to open tabs on hover
tabButtons.forEach((tabButton) => {
  tabButton.addEventListener('mouseover', () => {
    tabButton.click();
  });
});

// Add event listener to mega menu to close menu when mouse leaves the entire menu area
megaMenu.addEventListener('mouseleave', () => {
  megaMenuClose.click();
});
</script>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->