Help creating a tab on hover effect

Design help General
1

Hello all,

I am trying to create an effect where on hover over a tab, the tab pane slides out from under the tabs menu. and on hover out, that tab pane slides back up.

Thanks all,

2

Hello @tgchiriga1

I don’t think it is possible to create with tabs-widget, because you can control tab’s content only when it is active. It means you will not see 2nd, 3rd, 4th tabs-pane until you will not click on it’s link and make it active (current).

But you could try to recreate such effect “from scratch” by using link-blocks (instead of tab-links) and divs (instead of tab-panes) :wink:

Cheers,
Anna

1 Like
3

Hi! @sabanna,

Thanks for the reply :smile: I’ve started doing that to see how that works

4

@sabanna

So I continued to work on the tab solution as the manual way proved a little above my paygrade. I thought I had figured it out until I got a weird problem…Not sure if its Webflow malfunctioning on me or what.

https://preview.webflow.com/preview/dgfund?preview=31190c67ae1799f13b9059b6cd58871f

if you click on the first tab and go to the settings and click on tab one, you’ll see the about is linked to tab 1 and tab 2 and there seems to be a third phantom about

It seems my hover over the tabs only works when the tab is current. There must be some kind of work around here to avoid that.

Another annoying little thing, when I click from tab to tab in preview the text shifts a little. What is that?

5

Hey @tgchiriga1,
A simpler solution for this desktop hover nav may be to instead have each of the Secondary links within their own div (call this Secondary Link Container). Each secondary link container would be fixed underneath the Main navigation. Then upon Hover of each Main Navigation element, have the respective secondary link container slide down into view. Make sure to nest the Secondary Link Containers & main navigation inside of parent div.

To my knowledge, the tab widget can’t do what you’d like it to do, so the work around is what I recommend.

Please let me know if you have any questions or trouble with this, I believe in you! :smiley:

Waldo :slight_smile:

1 Like
6

Hey, @tgchiriga1, when you start to ask about tabs I thought there will be some pics or paragraphs.
BUT if you want to create a menu with submenu you could use navigation widget, such a navbar" and “dropdown menu”. It is much easier to style and got this kind of effect.

1 Like
7

@Waldo_Broodryk @sabanna thanks for all the help today! I got it to work with navbar.

I just one other silly question and I dont want to start a new thread. Is there an easy way to reset the default values of the default h1, h2, h3 etc classes?

8

Remove your classes and it will go to default settings

9

I believe he meant how to reset values not classes itself. @tgchiriga1 Once you have default classes for h1… elements All H1 Headings or something like that you have to click on each blue value you have changed and hit reset to default option :)

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.