Custom dropdown menu - Webflow interactions & animations tutorial
HTML-код
- Опубликовано: 24 июн 2018
- Learn how you can build a fully custom dropdown menu using Webflow's elements and interactions in four steps:
(1) 0:52 - creating a dropdown wrapper
(2) 1:25 - configuring the dropdown trigger
(3) 2:22 -adding the dropdown content
(4) 4:30 - building the dropdown interaction.
Check out these resources:
-------------------------------------------
o Custom dropdown menu (written guide): wfl.io/2K9La9W
o Building an FAQ using a custom accordion (video): • (Newer lesson availabl...
----------
Get started with Webflow: wfl.io/2ts9rhc
webflow.com
/ webflow
/ webflow
Webflow seriously has the best tutorials I've ever seen.
I totally agree! And they are very humorous too!
hands down
Too fast and too many jokes. I prefer other vids that get right to the point and show you more options.
Webflow tutorial from this man this the best there is. I watched all of them. Thank you for making it short, fun, and practical. 👍👏
People who don't even use webflow should just watch all the webflow vids coz the webflow narrator is hilarious!
This tutorial came from 5 years ago but I feel like it came from the future and this is more relevant than what's out there. Really good video.
Webflow honestly has some of the best tutorials I've ever seen.
These tutorials are the reason I use Webflow. Thank you.
your tutorials are so easy to understand!
I like the humor in these tutorials :).
"Then we'll use the option called editing..." lol, I could watch these tutorials for days.
Thank you very much for this tutorial! I am a COMPLETE beginner ... still going through the "21 days portfolio" tutorial, and since i have watched the module on CSS, i keep improving the style of my page ... and today just came up with the idea of having a drop-down to reduce the reading content (and give more control to the viewer), tried on my own for 30 min or so ... kind of understood how it could be done ... but still far from finding the right way; but thanks to this tutorial i understood more on how Webflow works, and quickly got the result i wanted! Thank you again!
And for a total newbie, my website starts looking like something an amateur designer/programmer would have done :D
P.S.: that "21 days portfolio" tutorial is really helpful for beginners ... much better than 101 [which i didn't finish because it was overwhelming with all the information and jargon being given] if you are considering making other such types of tutorials, i highly encourage it!
Great - literally had a client ask me to make these for their site :)
Just love the humour and fun he is having. Come to the UK and let's have a beer or three?
Wow. this took me an hour but I got it done - had to know you need to press every time the different between "trigger" and "content". phews
If I implement this this custom dropdown using click (rather than hover), when I click the dropdown trigger the menu opens correctly. But how do I make it close when I click elsewhere on the page (instead of clicking a second time on the dropdown trigger)? Many thanks!
What if we want this to sit in a navbar? So the menu drops down at the width it i snow but the nav trigger item is only 100px wide for example.
can anyone please tell me how to make the content of menu drop horizontally instead of vertically?
The second quick note that you say I want that function with hover and not closing the dropdown. But when I leave the dropdown it close it again. How can i do it?
did you ever figure it out?
*Want to toggle the dropdown menu on hover instead of click?*
Use the same animations, only select the "dropdown wrapper" instead of the "dropdown trigger". Then, instead of choosing click (tab), choose element trigger: mouse hover. Then, follow the steps to create the animation.
@@mikelatham5448 Mike, the animations need to be triggered on the "dropdown wrapper" not the trigger!
@@Webflow The trigger only covers the menu button, not the drop down items. This tutorial only works for clicks, not hovers.
omg, that was what i am looking for for 2 days... how stupid am i? (=
How do I keep the "options" open when I hover over them?
did you ever figure this out?
@@labseven Have the dropdown wrapper as the trigger instead of the dropdown trigger. make sure you only effect the dropdown content.
@@kristopherbell9885 Thanks a lot!
@@kristopherbell9885 You're a legend for this one. Thank you!
LEGEND OF THE PHEONIX 1
Do you have a dropdown option on "hover" of the menu instead of trigger?
Would love to see an updated tutorial on custom drop down menus in our nav bar with the hover interaction! finding it difficult to create and control :(
Thanks for the feedback. 🙏
Were you able to keep the menu open with the hover interaction? On-click interaction was easy, but with on-hover interaction the menu closes. Is there any way to keep the menu open sp links can be clicked?
Love.
Your sarcasm 😅
Very good video! The only problem I have is that when I want to close the dropdown, it closes the dropdown but as soon as it is closed, it immediately opens it again. That is, when I press the "dropdown trigger" again, it closes the "dropdown content", but then pops right back up. it seems like a bug. What can this be?
My dropdown is visible for a split second before it disappears. It then works as a drop down menu. That split second is bothering me. If I put the size to 0 in it's style properties, the drop down doesn't work, even though i set the hover to make it appear. This is confusing.
my dropdown cant be set as wide as the menu bar and it is already open when i preview. what did i do wrong?
What if I want to select "Option 2" and change "Menu" text to change to "Option 2" . Is that possible?
How do I get my drop down menu to not overlap surrounding content. Like I want surrounding content to be pushed down while menu is open and then come back to original position when menu closed
Help! I got this working, with hover, but when you try to click on one of your links in the menu, the off hover animation plays (as you mouse out of the dropdown container) and the menu goes away!
I am currently experiencing a challenge with managing multiple custom dropdowns on my site. The problem arises when trying to operate one dropdown while another is already open.
Ideally, what I would like to happen on the second click on DD1 is that if DD1 is already open, it should close, but if DD2 is open, DD1 should open. Unfortunately, I cannot find a way to set this 'if-else' state within the events/actions settings.
Could you provide guidance on how to achieve this desired behaviour using events and actions alone for multiple custom dropdowns?
But how do you select an element from the drop down?
It seems everything from the build works, yet after opening and closing the dropdown 2nd and 3rd time around.. the dropdown content overlaps divs underneath the dropdown. I tried turning "loop" on and off to see if it would help, with no luck.
Hey Charles, that sounds odd. Were you able to fix this issue? If not, can you please post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link of your project, screenshots and a description of the issue), and our amazing community and staff can help you there.
You can also post the link to your Forum post here, and I'll take a look and help you resolve this issue.
@@Webflow To be honest not really sure which project this was, It can easily be one of over several hundred projects. I somehow recall it had something to do with the display properties of the other containers it was nested inside of.
Aside,
Thank you for feedback!
When a user clicks on a dropdown menu in Webflow, I would like the currently open dropdown menu to close and the selected dropdown menu to be displayed.
If I do it by hover, the content closes when I move my mouse away from the trigger so I cant click. How do I fix this?
Don't add a "Hover Out" size animation to the Dropdown Trigger (Leave "Hover Out" blank with just the "Hover In" animation shown in video) Then, add a "Hover Out" size animation to the Dropdown Content and set height to 0px (Leave "Hover In" animation blank for Dropdown Content).
@@zachryan7994 that's it! Thanks!! 🙏🏻
Also works
"Have the dropdown wrapper as the trigger instead of the dropdown trigger. make sure you only effect the dropdown content."
Hello is there any way how to make it to the side?
For me, when I type in 0 pixels it only hides like half of my content. It doesnt hide it all the way like it does in 5:19 Please help.
Great, thanks! But wait, what if you want only one to be open at a time? I just went through this on nauto.com/product (see *“Context-Rich Coaching”* section), but it was a HUGE pain and I wasn't able to use animation.
You can use the interaction we explain in the Accordion lesson (ruclips.net/video/99nWFQz6XNU/видео.html) but tweak it a bit. We'll use two triggers: The first trigger closes all content, the second trigger opens the sibling content. That's it! See how in this video: cl.ly/0D2g3w3S222J. Note the order of the triggers is important - you'll want to close all content before opening the content you want.
Hope this is helpful. If you're having any trouble implementing this animation, you can always post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.
Thanks gents!
Does similar process works with navigation drawers? How could I make it to change into hamberger menu in small screens?
Yes. However, if you want a faster way of building a dropdown menu that converts to a hamburger menu on mobile screens, try using the Navbar component: university.webflow.com/lesson/navbar
I don't have the Interactions thing available to me in my Webflow... is that only something thats available if I have access to everything?
Hi, thanks for reaching out! Interactions are available on every single Webflow site created. Would you mind sending a screenshot of what you see to support@webflow.com so we can get this sorted out? Happy to take a look and get you pointed in the right direction!
Great tutorial but how can I make this work on hover? I tried but when I put the mouse away, the menu closes...
We'd be happy to take a look at your project. Send your share link to support@webflow.com and we'll get back to you ASAP! university.webflow.com/article/sharing-your-sites-read-only-link
Did you manage to solve this? I am asking the same question!
@@Stefan-zv2mn I gave up on this. I rather do it by clicking than hover...
Hi i've done this with hover but on my site, the drop down remains open on other pages as i've added this to my header and made the header a symbol. So every time i load a different page, the drop down is already open and won't close at all
Hey there, this is a great question to ask on the Webflow Community Forum (forum.webflow.com/). Please, post your question with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you with your design there.
Webflow thank you. Will do just that
D E L I C I O U S
Hello Webflow, we cannot do the same thing for hover function, I mean if the cursor leaves the "Dropdown Trigger" area the "Dropdown Content" will close and the user will not be able to interact with the link in the "Dropdown content". Here is the solution to that and also when the cursor hovers on any link it gets highlighted. Thank you.
preview.webflow.com/preview/gauravsharma?preview=0c4775f263bfe288528b5768d3ea010f&mode=preview.
I've tried to resolve the same problem, but your link sends to the project where is no such menu. Any idea how to resolve it?
what software is this ?
want to use it
and buy it if i have to
webflo bud and its free
is it possible to connect a CMS item in the dropdown menu?
Yes. You can replace the content in a dropdown menu with a Collection list.
Actually it works for me, but only one time: if i click on menu button the options appear, and if i click again they disappear.
But then it doesn’t work anymore. I tried to select “loop” button, but nothing changes.
Does anyone know where am I wrong?
Dude, do you solve the problem? I have the same what did you do
I''ve encoutered a problem, when i hover above the menu and want to move the cursor to one of the dropdown content the menu closes... How do i solve this? @webflow
I have this same problem, did you manage to fix it?
@@sam6 I couldn't find a solution... This is the problem when you can't code and dont have the knowledge how to do things. So I changed to open close on mouse click. And only have dropdown in tablet landscape and smartphone landscape.
@@Flowerpointa Thanks for your reply! I also have a problem where when on design mode it is constantly open so it gets in the way! Super annoying
@@sam6 while you have the nav menu marked you can go into settings and click "open/Close dropdown"
@@Flowerpointa Maybe I set it up wrong... but I can't find that anywhere at all
"Dear Sir Patrick Stewart:
I bet you get a lot of emails, but I'm just so proud of this dropdown menu I created with Webflow that I wanted to share it with you.
PS. I forgive you for signing up for 'Star Trek: Picard'. It's not your fault the executives have no idea what makes Star Trek special."
I copy and paste the dropdown links and guess what? the fking things don't even appear and I can't edit the text blocks inside of them. also, how the hell can you resize things and actually DRAG them to where I want them to be??? The point of webflow is to be a medium between programming and simple website design right? Well why is it so god damn complicated to just do the basic things...
Hi, can this be used to make 'inline footnotes', like this: wordpress.org/plugins/modern-footnotes/ (specifically the way it functions in mobile)?
I'd really like to start using Webflow, but i use Wordpress for this one plug-in at present...
That might work. Why don't you give it a try and let us know on the Webflow Community Forum (forum.webflow.com/) how it went. And if you run into issues implementing it, also post on the forum with as much information as possible [read-only link (university.webflow.com/article/sharing-your-sites-read-only-link), screenshots and a description of the issue], and our amazing community and staff can help you there.
And if you post a link to your forum post here, I'll be happy to check it as well. Best of success and keep us posted.
Hi @@Webflow, thanks for getting back to me. I've tried several methods for getting this done... with no real success....
I've put a post on the forum: forum.webflow.com/t/creating-in-line-footnotes/72735 but so far there are no solutions.
It seems that the ability to use the 'absolute' positioning tool to place an accordion paragraph directly beneath a text span containing the 'trigger' would give me the same effect as the word press plugin, BUT, from what i can see it is only possible to position the accordion paragraph with reference to another paragraph, rather than to specific part of that paragraph (in this case, the text span 'trigger')
Any suggestions?
please make tutorial about how to create mega menu like amazon e-commerce site
Thanks for the feedback, we'll send this over to our education team.
Just as someone else mentioned i'm having the problem with "On Hover". While hovering the dropdown shows but after that it disappears as soon as I am trying to move my mouse down.
Here is my preview preview.webflow.com/preview/webow?preview=8f278db5f0f3e3823d2d978493d9d12f
Btw: Your tutorials are AWESOME! Thanks a lot.
Also sent this to support-mail.
I don't understand how the animation will work when you set the height value to AUTO??
Height set to AUTO means that it'll animate to whatever the height is that the content within the element dictates. You can learn more about CSS sizes here: university.webflow.com/lesson/size-settings-width-height
Hope this helps :)
@@Webflow height option is not available in action timing for 1st click it shows only width help
@@Webflow why is height option auto not available anymore?
height auto not available anymore ?
@@whiteswordwarrior9995 r u facing same problem aswell?
Absolutely maddening. I've painstakingly copied this tutorial several times, only to wind up with nothing but wasted hours. It just does not work the way you show it to work.
Hey Ellen, sorry to hear that you're having trouble building this custom dropdown menu. Can you please send reach out to either the customer support team here: university.webflow.com/contact or to the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and we'll help you figure out what's the issue and resolve it together.
If you do post on the forum, please comment again here with a link to your post so I can take a look at the issue immediately. I'm standing by to help you with this issue.
Thanks. I do appreciate the kindness of the Webflow staff and community -- you are a much nicer bunch than most, truly. I didn't mean to sound so nasty -- I'd been having a frustrating day with Webflow. Sorry! I've given up on this for now and deleted that part of the project, but am having a heck of a time with one particular nav bar. I'll post something if I can't figure it out soon. Thanks!!
It's okay Ellen. I totally understand how frustrating it can get sometimes. Been there! I just want you to know that you can always reach out if you need any help.
Also, I highly encourage you take a look at our written content on Webflow University (university.webflow.com/) They may provide more details and easier to follow written steps.
Hope you'll have a wonderful week ahead, Ellen!
Engage!
"Dear Jonathan Frakes:
Check out this sweet dropdown menu I created using Webflow!
PS. Please get back into directing. The modern Star Trek series are such a mess."
this is how an AI will speak in the future! Your tonality is weirdly overcorrect :D
He's reading out a pre-written script ofc. Doesn't just make all these jokes on the fly