Tabs Section where just a limited part slides

Hi guys, I am new to the community and I hope that I’m doing it right asking here about an issue that I just had trying to create a Tabs element in my design.

I’d like to create something like this http://99ui-6.webflow.io/ but it seems that this design has a bug (maybe because of the lack of the Tab Content element!)

Can you help me? I really love the idea of creating a tab section where just a limited part slides!

Paul.

Welcome Paul!

You’re doing right, never hesitate!

So, step one, where you can see the structure of a tab element:

http://vincent.polenordstudio.fr/snap/pm5tt.jpg

Step 2: we’ve added a DIV, put the Tab element inside, and added another div inside of it as a sibling of the tab element

http://vincent.polenordstudio.fr/snap/l8t6t.jpg

Step 3: we have colored the sibling div in blue and gave it width 50%, we’ve gave the tab element width 50% and position:auto, and we’ve made the outer (parent) div Flexbox and position:relative

http://vincent.polenordstudio.fr/snap/rcequ.jpg

Now we select the tab menu element and give it position:absolute and corner top right

http://vincent.polenordstudio.fr/snap/0hv8t.jpg

Now we add a padding top to the outer div so the menubar isn’t overlapping the content below

http://vincent.polenordstudio.fr/snap/92ybl.jpg

Let’s center the nav menu to mimick your example

http://vincent.polenordstudio.fr/snap/0fqid.jpg

That’s pretty much it. What we’ve done is define a reference for the opsition of the menu by giving the outer div position:relative and removing the position:relative property of the tab element, so we can move the menu bar around. Now you have your tab content with static content on it’s left.

1 Like

Awesome!
Thank you, Vincent :smile::smile::smile: