[Support request] Any way to show GB tabs on button/link hover instead of click?

[Gary]

I’ve been playing around with the new GB tabs which are very flexible and I can see lots of applications for. I’ve been looking into whether they could be used to create more advanced menus and they seem to work well but there is one limitation currently as you can only trigger a tab change on click/tap.

Wondering if there’s any way they could be triggered on hover to more closely resemble a typical hover navigation by way of a filter or whether there’s any plans to allow this?

Thanks

[David]

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 ?

[Gary]

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

[David]

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.

[Gary]

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

[David]

You’re welcome

[Author]

Posts