▼
Streaming live at 10am (PST)

Help needed making a multi-level drop down menu

Design help Animations & Interactions
#1

I would like to create multi-level menu like

Products

Category 1

Sub Items
Sub Items
Category 2
Category 3
About
Etc

#2

So what do you exactly want. From what I understand you want a button that you press and more options appear below the button with more buttons. To do this is very easy in Webflow and all you have to do is know the Webflow tool and where this feature is located.

#3

Vlad,

Let’s see if I can make this make better sense.
:slight_smile:
I have the 1st (black) and 2nd (grey) levels of the menu.

I want to add a 3rd level (white)

#4

I don’t know how you would be able to do this feature in Webflow. @PixelGeek or @Waldo , do you guys have any idea?

#5

Hey @odog this is definitely possible in Webflow, making a progressive disclosure nav like that responsive though can be tricky. Do you plan on having that filtering on mobile devices as well or just on desktop? Have you already started building this out and can you share a read-only link if you already have?

1 Like
#6

Thanks guys.
Yes, Waldo I do want it to be mobile and it is in the works.
https://preview.webflow.com/preview/npi?preview=b93098fafc77f1cfb703ae4d523804eb

I haven’t added the 3rd level, as I have no idea how.

#7

any tips on where to start to create a progressive disclosure menu within webflow.

Added a dropdown within a dropdown.

It works,
but I don’t know how to control the styling of this 3rd level of menu.

#8

@odog make sure to tag them as to get there attention :wink:. @Waldo any ideas?

#9

Hey @odog could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster :slight_smile:

How to share a read-only link:

Thanks in advance! :slight_smile: (looks like your current read-only link is broken)

#10

Thanks guys, looks like my read only was turned off.

Let’s try this.
https://preview.webflow.com/preview/npi?preview=6136284efad3472d5a109bfd2afc846d

#11

@odog Please make sure to tag people’s names as to get their attention. Thanks! This way @Waldo gets a notification that you sent a message. :wink:

1 Like
#12

@waldo do you have any insight for me. ~:-)

#13

Hey @odog thanks for reaching out again! :smiley:

My recommendations would be to build out a div that would display block when you hover over the dropdown within a dropdown (in this case it doesn’t have to be a dropdown, just a div with an absolute positioned div inside of it that holds the tertiary nav components) if you’d like to keep this current design. Then on mobile devices. I recommend adding the tertiary navigation to the the page itself. So if you make “Activity” a text link, let it link to a page where you have activities listed to choose from.

Another approach could be to paginate your navigation with interactions like I made in this little example when you click the Options button (get’s a little hairy with this approach and can be difficult to edit):
http://paginated-nav.webflow.io/

https://preview.webflow.com/preview/paginated-nav?preview=6678507bd1b12040c33d644de7cc5e61

Those would be my recommendations, please let me know if this helps or if you have any questions I’m happy to help further. :smiley:

1 Like
#14

@Waldo i really like the way your menu reveals.

For this menu I want be a standard drop to the right.
I created a div for it.
Would you please show me how to make it open and close on hover?

#15

@Waldo would you please give me some help figuring this out. I’ve styled a div, but I’d like some help figure how to make it open on hover and close when off.

#16

nav-expanded.gif1144×564 1.76 MB

Hey @odog it takes a few interactions. Making this responsive in the way that this nav was built would be quite tricky though. I made a gif showing the interactions I applied to get this to function how you’d like it to on desktop devices at least. :smiley:

Basically an interaction on the “Device” button, to make the “Level 3” div display: block. And when hover out or on Dropdown close, make that “Level 3” div, display: none.

​Please let me know if this solves the problem, if not, I’m happy to help further :slight_smile:

#17

@Waldo that was a HUGE help thank you.

I was able to create it plus 2 more. The third one “Industry” switches to the Brand menu when I mouse over the Industry menu.

I’m not sure what I did wrong in this interaction. Would you please tell me what I missed?

Tablets and below.
I’m not going to display this on tablets or below. Desktop only.

#18

@VLADinSACRAMENTO how about you. Do you see the error of my ways?

#19

Don’t know yet, currently don’t have access to my iMac so once I get home I will check it out…:wink:

#20

Thanks Vlad. I know it can be tough being a way from my Mac.