How to make a Dropdown Tab Menu (like mmenujs.com) video example

Design help Animations & Interactions
1

adding this for the search cos i searched for a solution and saw others had asked about it. here’s how to make a dropdown tab menu.

https://preview.webflow.com/preview/menu-builder-7eefac?utm_medium=preview_link&utm_source=designer&utm_content=menu-builder-7eefac&preview=91fd0a46c6e48e7e0cd500dea6fd90fa&workflow=preview

1 Like
2

bear in mind - & i just discovered this - That if you create this menu and then copy it to another project, even if there are NO conflicts, when it is pasted into the other project ALL the interactions get completely screwed up and the entire menu is wrecked completely… so yet ANOTHER glaring bug that clearly NOBODY in webflow’s beta testing team even bothered to try despite the fact they have a video tutorial explaining how you can “easily copy/paste assets between projects”.

oh deary me

so the upshot is i have to build it all again from scratch in the other project… way to go webflow!!! :rage: :rage: :rage:

3

actually if you copy the menu to another project it’s got far worse bugs than the interactions getting messed up when you copy it. even if you delete the interaction for the triggers (but dont delete the actual interactions from the interactions list) and start again, adding the interactions to the triggers all from scratch, some of the them seem to still function even though they are clearly deleted. It’s a complete and utter disaster.

and no there are NO clashing classes or elements.

4

So the bottom line is you must build such a menu in situ, you can build one as a re-usable template and just copy/paste it into any new projects (unless maybe if you begin with it as the start point, that would probably work.

I build a new one from scratch in the actual project i wanted it in and it’s almost done, so will post a link to it when finished :+1:

6

just to complete the thread so it ends with an ending if anyone reads it…

here’s the finished menu - i may do more overall layout or design tweaks after this, but this is it basically

There is a bug with the preview which means drop downs don’t work when the preview loads unless you FIRST reload the entire page by clicking on the main site logo at the page top - after that the drop downs all work (dunno why that is)

the drop downs tabs work well because i’ve managed to put about 18 menu links into just 3 drop down tabs, and because the tabs offer extra estate I’ve been able to add more than 12 extra direct links to product classes & main article-series pages which could not have had a menu link with a trad’ horizontal menu

here it is

https://preview.webflow.com/preview/dancetech-cca62dd1fef55e4-25563abdb4a55?utm_medium=preview_link&utm_source=designer&utm_content=dancetech-cca62dd1fef55e4-25563abdb4a55&preview=70d3a081c0052fd1877c4eadd9cb1540&workflow=preview