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

Design help General
1

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.
    products
    products1124×960 196 KB

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

2

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.

https://dl.dropboxusercontent.com/s%2Fc4qicg2suh61sy8%2Fscreencast%25202020-08-21%252012-28-25.mp4

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
https://webflow.com/website/My-2019-Fall-Forum-Sandbox

1 Like
3

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
4

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
6

Here is the finished product.

Big thanks to @vincent

7

Hi,

can i clone this menu? or where can i found this?

https://sbx.webflow.io/3-levels-navigation

thx
toby

8

In the navbar, “clone this site”

9

sorry. i can’t find it in the navbar. :frowning:

10

CleanShot 2022-06-08 at 19.09.37@2x
CleanShot 2022-06-08 at 19.09.37@2x2270×988 136 KB

11

Yes, that’s quite clear. I have already done that, but the menu is not there.

12

Is here

CleanShot 2022-06-09 at 12.31.36
CleanShot 2022-06-09 at 12.31.36255×1187 66.5 KB

1 Like
13

Oh. OK. Oh Jesus. I am blind. :slight_smile: thx

1 Like
14

Well, that’s a Sandbox, is drafty af, naming is random, disorganised… :smiley: Glad you found it.

15

Thank you Stan. I’ll ask you when I can’t find my own stuff back :smiley:

1 Like
16

Sorry Vincent. I saw the list, but…

:sweat_smile: