Any way to show GB tabs on button/link hover instead of click?

Hi there,

not really, as the HTML, Scripts and CSS that Tabs require is completely different to that of a navigation.

Is this hypothetical "navigation" for within the content or is it to be found in the usual places ?

Hi David

No the content in question is not for regular page use which was the reason for the enquiry.

Essentially I'm trying to create some mega menu elements using GP block elements, hooking it in to certain navigation sub menu items. Got that part working after some trial and error, however now in my mega menu panels I need some dropdown style menus to show hide menu items within the block and I was thinking I might be able to utilise the new tabs features as it has most of what I need apart from the hover effect.

Appreciate the tabs markup would not be a traditional format for creating a menu, but as the intended use is inside a mega menu the content in this block is quite custom as a result.

Thanks

Ah ok.
In that case you could try triggering a click on hover with some Javascript.
Something like this:

const tabButtons = document.querySelectorAll('.gb-tabs__button');

tabButtons.forEach((tabButton) => {
  tabButton.addEventListener('mouseover', () => {
    tabButton.click();
  });
});

You may want to change the .gb-tabs__button class to something more specific.

Thanks David, that helps a lot. I’ll work with this example and hopefully get the hover effect working to make the tabs appear more menu like.

Cheers

You're welcome