Streaming live at 10am (PST)

How to design a complex layout of 3 levels of structure dependency?

Hello Community,

I have some complex UI layout here. PLEASE REFER SCREENSHOT
Requirement is:

  1. Add vertical slider/tabs of “Category of products”
  2. On the current tab, display all the products of the selected category below it. (In the white horizontal section below vertical Slide/tabs)
  3. Display the information of the first product on the slide/tab change event and allow a user to select other products to view information.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Here’s a structure using no hack, no code and only 2 Tabs elements. There’s work left for the content of the level 1 tab link, they need some interactions to show/hide content depending on their state.

It’s using a very simple set of flexbox rules for the shrink/grow effect, and the animation is simply a CSS Transition. No IX at this point.

It’s live here

Read only link

And you can clone the site from here

1 Like

Hence, I always love (from the heart) working on Webflow.

Thanks @vincent for a prompt response. You saved a lot of my time.
I will share the link of finished version.

1 Like

Hey I found the idea nice and I thought I could try to do it without IX.

Probably going to use it for my current project, so thank you.

1 Like

Here is the finished product.

Big thanks to @vincent