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
https://sbx.webflow.io/3-levels-navigation

Read only link
https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=d91efb276cd351eb16ffb217cf8e136e&pageId=5f3f8e12b37c341ad82570e2&mode=preview

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.