Streaming live at 10am (PST)

Dropdown Menu (sub menu)


#1

I would like to know if webflow has a dropdown menu function for sub menu.
If not, anyone know how to export and add the function separately?
Will webflow have this function available soon?


How do I create a drop down list/menu?
Dropdown submenus
Dropdown Menu Hacks & Requests
Menu features, what is available?
#2

It was already said on forum, that drop-down menu will be available sooner or later. They add new things super fast so you have to wait wink


#3

Until they add the functions, is there a way around using hover function to make a dropdown menu?
I need to present the website to my company next week and really want to continue to use webflow.
Thank you in advance!


Trouble with dropdown
#4

One idea that comes to mind for a quick result is to make an image that looks like your drop-down element in its "opened" state. Then in webflow simply make the height the size of the "un-opened" item and set the overflow to none (this way the remaining portion of the image is hidden). Next add a transition, i.e. "All - 300ms - ease-in/ease-out" and choose the hover state and change the height to the full height of the element. Play around with float and/or z-index to have it animate without effecting other elements on the page.

You could use actual html in webflow rather than an image if you want to give links and hover effects to the menu items. Just use the same principal with the height to hide/show your menu.


#5

Thank you so much for your input.
So are you saying I can get a dropdown menu like any other websites?

pingram3541... can you explain what you mean by using actual html in webflow?
I would really love to learn to make a drop down in webflow.
Thank you


How do I create a drop down list/menu?
#6

Btw I'll ask... Is it possible to make an ease-out effect? I can make only ease-in on hover, but can't do it on out.


#7

The last option is both ease-in and ease-out

@vinsuh - all I meant is instead of an image like this example http://dropdown.webflow.com/ (one on left) simply use webflow to build the menu in its drop down state showing all options, then set its native height only just enough to show the top item and keep overflow hidden, then on hover change the height to the full drop down (one on right).


#8

Wow... the dropdown menu on the right.... that was done using webflow's tools?
Please! That is the dropdown menu I am trying to do. Can you please teach me step by step?
Your help is very much appreciated! Sorry I'm having a hard time with this.

you said "use webflow to build the menu in its drop down state showing all options" <-- How is that done?


#9

Glad to help. Here's the brick and mortar to get you going in the right direction.

1) Ok, first I created the top level div block item. This is the wrapper. I chose 45px fixed height and gave it some top margin.
2) I then created another div block item inside the wrapper, this is the first "settings" element. I chose 45px fixed height.
2) I gave it a gradient background and rounded borders. I then dropped in a column block and chose 2 columns and set the ratio to 9/3 (this is the 2 sections you see)
3) I then gave the left col section a 1px light right-border, the right col section a 1px right border and then aligned the text center, lastly dropped in a text block. (this is the visible top level item)
4) I then gave parent div block of the 2 columns a transition easing in/out 300ms and changed the hover event styling to reverse the gradient and some of the borders...this takes a lot of patience to get a good result. You can inspect my code to see how I did it.
5) I then copied the parent div block of the 2 columns and pasted a few copies below changed the styling (blue gradient) and hid the right side column by giving it another class called "hidden" and choosing display none. I also changed the hover state to a purple gradient and changed each options text to be unique, i.e. option #1, etc.
6) I then went back to the wrapper div block parent (that envelopes the 5 items) (currently 45px, same as the top level item) and set its overflow to hidden so only the top level item is showing (nothing past 45px is visible). I gave it also a ease-in/out transition and for the hover state changed the height to reveal all 5 of the options (i.e. 45x5).


#10

OMG sorry this is making me crazy. I'm trying so hard to follow the instructions but its not anywhere close to what you did. Is there any visual way I can learn this? Video tutorial?
You don't know how much I want this drop down menu -_-
I know I'm asking for a lot but I really want to make things possible with webflow.
All the wrapper.. div block.. settings are not clicking in with me. Please help once more.


#11

You know the saying "no pain no gain"? Here's the export of my example above. Good luck!

export


#12

Yes I am trying my best right now.. been trying for hours but unfortunately I'm trying to use webflow to make a site for the company i work for. If I dont have a drop down menu they will not use webflow and I really wished they did.
I don't mind the pain but just worried I will not be able to get in done on time... leaves me 1 day from today to figure it out.
Hopefully someone can help me out here.
Thanks for the help pingram3541.. I just need a little more help.

I got the menu to drop down on hover... Im just trying to figure out how to put the title on the buttons without an underline.
Also trying figure out how to have more menus aside from each other.

(just trying to create a normal top nav bar)


#13

Hi following pingram3541 instructions I managed to make the drop down navigation.Now I am trying to make it work on mobile devices, so I added on press state...the problem now is that the drop downs opens but when you release the mouse it closes.Is there any solution to keep the drop down opened?
Thanks smile


#14

Hi,
sorry for the double posts am writing in case someone has the same problem.The solution was pretty easy- I had to add both hover and press and it works perfectly.Please let me know If anybody has troubles with the drop down, and I will try to explain how I made it.It's very easy.


#15

@pingram3541 brilliant explanation and thank you for sharing


#16

You sir are awesome! smile


#17

You Have Photo Link or Youtube Step by step
Something try to do it can not.

Thank you


#19

Topic is 754 days old (as of this response)... still no answer for sub-menus :frowning:


#20