Drop Down Menus

I know that I’m probably missing something super basic here…Is there a simple tutorial for creating drop down sub menus on hover?

Hey John, we don’t have drop down widgets yet, but we want to build them. I’ll let you know when we start.

1 Like

Hi, at the moment, the navbar widget does not support sub-menus, but you can put multiple navbars on a single page with different links (i.e. to sub-menus). You can also make your own navbar menu that supports sub-menus as demonstrated:

Or you can also look into getting some menus from say codecanyon…I got lots of great menus from there that support sub-menus…

Cheers

Thanks for the reply. I know that there is a way to create sub menus with the tools provided in Webflow. I’m just not smart enough to figure it out in a timely fashion.

Thanks Dave! I’ll check this out.

You can achieve that 100% Webflow. Set the submenus display none, set them display block with interactions when a click is triggered on a menubar item. Do the inverse when a click is triggered on a sub-menu item.

It won’t work with opacity only as you can still click on links. With display none, you don’t even have to reposition the sub menus.

https://webflow.com/design/sab?preview=c8e9203ce4585987e1e74923be4eda13

2 Likes

Thanks Vincent. What about a hover/on hover/off situation like this Patagonia Outdoor Clothing & Gear ?

It seems like the element with the trigger(in this case “Shop”) would need to be associated with the drop down for the hover/on hover off to work.

Hello @John_Mollusk

About this effect like the shop you can use Show and Hide interactions…

Take a look here: http://tutorials.webflow.com/click-to-show-hide

Cheers

1 Like

I think it’s doable. Same interaction on the menu item but set to trig on hover. Then on the big panel that appear (a normal panel, not a menu, in the case of patagonia), set a mouseout to re-hide (display none) the big panel. Another interaction on the items of the big panel, on click, to hide the big panel too.

And all that section containing menu and panels, you need to make it absolute, so the content of the website will stay under and no pushed down when panels display.

Thanks Vincent…I’ll try that out.

Sergie gave a great solution that has worked for me. Check it out here:

:slight_smile: