Streaming live at 10am (PST)

Full browser width dropdown list in dropdown widget


#1

Hi,

I'm trying to style the dropdown widget so that when it opens, the dropdown list it would occupy the entire,100% width of the browser.
I went through previous posts on this forum and can't seem to find a clear path on how to do it.
The dropdown list would also have to have several columns with pictures and links inside.
These websites, https://www.royalacademy.org.uk, http://www.summerfuel.com, have the kind of menu I've been trying to achieve in Webflow.
I'd appreciate if someone could point me out to some sort of path or tutorial on how to do it inside webflow.


#2

I was trying to do that this morning and couldn't... the % dimensions rules of the drop list will always refer to their parent, which has fixed dimensions.
When I do my Mega Drop Down Menus experiment, I always have to give the drop down specific px dimensions and position.

That's why if I had to build the menu you want to, I would not start with the drop down widget. I would build it from scratch with interactions, starting with a text link widget added to the navbar.


#3

I've actually ran into your sandbox site, and for a moment I thought I had found the solution, but the Mega drop menu wasn't full width.
I could use the dropdown widget as it is, but I think that the full width of the dropdown list really helps navigation and lets the information inside breathe (pic, logo, a couple links).

So, do you think that maybe a button could be used to show and hide a section, which by nature spans the entire width of the browser?


#4

Easily. You can even start with the drop down widget.

Try this: drag the drop down in the navbar, select it, click on show menu, select the menu (the list) and delete it.
Now create your drop list the way you want: drag a section under your navbar and build your drop list in it.
Now set it to display none and opactity 0%, and make a click interaction on the dropdown menu item that effects your list, make it display:block and 100% opacity, reverse that for the second click and there you go.

Now you can add some animation, like the menu coming from under the navbar (move it up beforehand and make the interaction move it down).

See what I mean or you need more help to do that? I got to go but if you're relly lost I can help later.


#5

Oh what the hell here it is http://sab.webflow.com/menus/menu-in-dropdown-menu

You actually can't delete the list associated with the drop down button.... but you can hide it.


#6

Check out this guys examples: http://sab.webflow.com/

He has a bunch of the styles and interactions that you can use on Webflow, including the one you're talking about specifically. Check under "Navbars & Menu Experiments". Hope this helps. smile


#7

The best way to do this with the most control is to avoid the dropdown widget completely. Instead use a fixed div that contains all your elements and a link block that shows/hides it with an interaction. You then gain full control over every parameter instead of being stuck with the dropdown limitations. This will also allow you to easily adjust how it displays on mobile which is a problem with the dropdown element.

Check out my post on this thread for descriptions on how to make a sidebar and adjust the div accordingly and change the show hide to slide down instead of right/left. http://forum.webflow.com/t/my-first-freelance-multi-page-site-under-my-new-design-business-done-completely-in-webflow/6566/12

Here is the text from that post:
Just make a section and make it fixed to the left side however wide you want and 100% height. Then choose display:none

Then apply an interaction to it with an initial saying move right or left (depending on what side of the page) however many pixels wide it is.

Then make a button and apply an interaction to that choosing the style of the section you just made and say display block, move left/right x pixels ease action and do the opposite on the second click. You can also make another X button in the upper corner and tell it to do the opposite.

Hope that helps.

Good luck.


#8

Thanks a lot for the explanations.

I've been trying to reproduce what you have done, and have mixed results.
On one side I could do the Full Width Dropdown Menu, but I stumbled in a couple of problems:
I'm sharing the public link: https://webflow.com/design/sum?preview=a5da918b3f12d13f517b1be50b8e86da

There are two pages: Page 1 with a section/DDlist that appears and disappears, Page 2 with a DD/List that is moved up and comes down. All actions triggered by a click, I tried with Hover, but couldn't have the DD/List stick after I hovered out of the Toggle.

Page 1. - When the menu appears, the slider below will be pushed down, and not just covered by the DDList. How to keep the Slider, or whatever is there, in place and have the DD/List just stay on top without pushing anything down.

Page 2. - I was trying to use percentages to move the DD/List up and then within the interaction have again percentages to move the DD/List up and down. But the DD/List just jumps up and down to twice its size. I think I'm doing something wrong with the positioning, but can't seem to figure it out.

Thanks a lot for the help...


#9

Hi,

I think I could fix the issues described in my previous post.
I just can't seem to avoid the icons on the slider beneath the Dropdown menu to appear on top of it.

I tried giving the DD menu list a higher Z index but the icons remain there.


#10

Hi,

Could you share some procedures how to do it (setting the submenu to 100% width)? Thanks!


#11