Dropdown menu with DIVs as dropdown lists

Design help General
1

I’m trying to create a menu bar with various dropdown links, but I would like that each dropdown list expands different DIV elements, to include inside images, icons and text, and be able to arrange them.

Ideally, the dropdown DIVs should slide into the center of the menubar (under it I mean), since they’re gonna contain a lot of information; and this is where I’m stucked right now. I can’t find the way to center the dropdown lists, they always expand relating to the position of their parent dropdown button.

I could move them by establishing a fixed position but that would not work when the resolution of the display changes from mine. Also, right now, if the window is too stretch, the areas are expanded outside the visible screen area (and margins do not seem to work with the dropdown lists).

I’ve arranged a quick example of my problem:

https://preview.webflow.com/preview/mega-dropdown-menu?preview=e0b532a5b53574f04516dc4a4690390c

I’ve found the Mega dropdown menu by @vincent and have tried to replicate it but I guess it has the same problem as mine, more subtle since it has just one mega dropdown menu.

Thank you in advance !

2

You could probably take @Waldo 's solution and expand it out more.

1 Like
3

Hi did you get some results? The link doesn’t work for me…

4

Hi, yes I solved it with the dropdown interaction. I didn’t updated the example site that I created but I neither unpublished it (I guess I didn’t shared it correctly in first place).

Thank you very much for your interest !

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.