Open Tab Pane on Hover Instead of Click

Design help Animations & Interactions
1

Looking specifically at section 1-3

I’m looking to be able to hover over my Tab Links and have them change content instead of needing to click them for the Tab Panes to change. A simple change and one that I’m sure is easily resolved. I’m still fairly new to Web Flow and design. Let me know if you have any solutions!

Edit 1: My link below doesn’t show the interaction as it is. Unsure if this is intended when sharing or a visual bug on my end.

Here is my public share link:
https://preview.webflow.com/preview/rocky-mountain-final?utm_medium=preview_link&utm_source=designer&utm_content=rocky-mountain-final&preview=a617d9142774692fb45585d3d865bb36&workflow=preview

(how to access public share link)

2

Hi kObe, yes you can find good discussions and solutions here;

3

Sharing another cloneable projects + a 1min tutorial to explain how to use it.

Here’s the cloneable project:

And here’s the code + attribute:

4

Duncan, I got this to work beautifully and easily, thank you!

Is there any Memberstack wizardry though to make the tabs also be a clickable link to a page? I’m not sure how it would be possible since it looks like the memberscript is essentially auto-clicking them on hover but I’m pretty much trying to recreate the Navbar from Boston Dynamics where their left side tabs are still clickable in their nav bar dropdowns.

Thank you!

1 Like
5

Wonderful!

I’d actually recommend using Webflow’s interactions to build a Navbar that complex. You’d have to rebuild the tab part too, but it would give you the level of flexibility you’re looking for.

… Although, I don’t think it would be too hard for me to add some code that triggers a page change on click :thinking: Hmmm… I’ll add it to my list and update this thread if I have some time. Best of luck in the meantime, and thanks for the kind words :grin:

6

Okay nevermind, I went ahead and did it :rofl:

Try this code. You’ll need to add attribute ms-code-navigate=“your-page-url” to your tabs.

<script>
  // Add a click event listener to elements with the ms-code-navigate attribute
  document.addEventListener('click', function(event) {
    const target = event.target;

    // Check if the clicked element has the ms-code-navigate attribute
    if (target.getAttribute('ms-code-navigate')) {
      // Prevent the default behavior of the link (e.g., following the href)
      event.preventDefault();

      // Get the URL from the ms-code-navigate attribute
      const navigateUrl = target.getAttribute('ms-code-navigate');

      // Navigate to the specified URL
      window.location.href = navigateUrl;
    }
  });
</script>

I did a quick test and everything appears to be working :crossed_fingers: (Click Green to navigate to https://www.memberstack.com)

7

I added a tutorial + updated script to this page. #92 - Change Page on Click | Webflow Powerups

I figured out there were some issues with the browser history, so opted for opening the page in a new tab instead.

https://webflow.com/made-in-webflow/website/add-link-to-tab-menu

8

@DuncanHamra is it possible to have both: trigger tab change on hover + redirect to another page on click? It looks like if we use your 2 solutions together, the redirection will happen on hover. Thanks!

1 Like
9

I’m afraid not as they stand today. The “change on hover” project is triggering a click which is why you’re seeing the redirect happen.

Possible solution: You might be better off building a custom UI with interactions instead of tabs. That way you can use regular links which redirect on click and then control the tab changes using the hover interaction.