I’m having real problems trying to figure out how to ease the Dropdown Menu sub menu (Link 1, Link 2 Link 3 etc.). It occurred to me that it would be great if there were a set of example sites which demonstrate a particular feature. If we could open one of these example sites we could look at the settings to help us figure out this kind of thing. How about it Webflow? Just having Slate isn’t really enough. A few more one off videos would also be good.
If anyone has a suggestion how to ease the Dropdown menu I’d also like to hear. I’d also like to know how to make the Dropdown sub-menu show on mouse-over (not just when clicked)
Great product by the way, and Geoff Blake’s beginners training course is the best.
Hi Vincent. Thanks for taking the time to answer. I did search the forum for ease and drop down but could only find unanswered or pre-dropdown routine questions. I did find one interesting post by Gakazak and replied to by Danro (Webflow), who said:
Regarding animations, we originally built in navbar-style show/hide transitions but the result was far too limiting… especially in regards to nested dropdowns. Instead, we opted to provide an IX trigger that occurs when the menu is opened and closed. You can find this new trigger in the Interactions “Choose Trigger” panel:
I’ve been playing with Interactions all morning but cannot get any trigger to ease for a dropdown. I can do all the usual stuff like move images and text up and down, fading in/out etc. but not the dropdown. Probably quite encouraging as I’ve only just completed the beginners course and been using Webflow for a couple of weeks. I could just drop in my JS dropdown menu post Webflow but this would be a shame as navigation is probably the most important feature of a website so Webflow should be able to do this kind of basic stuff easily.
Ah, cool, thanks to you I kinda have figured out something. (how to make the dropdown interaction to work).
fact 1: there is no easing on dropdown menus
fact 2: there’s little to no help for the 4 last interactions triggers
I was wondering what was the DopDown trigger for… Thanks to you I just realized it’s for solving the easing problem.
So look at my example here, the first menu is eased with this trigger (I did a opacity thing but it must work with a moving thing too) http://sab.webflow.com/
So in order to make it work, select your menu item, then the settings tab, then click on Open menu. then select the menu itself, the one that just showed up. Then create an interaction, set the initial apparence opacity zero, add a trigger (the dropdown one), set the open menu to opacity 100% 500ms ease, and the menu close to opacity 0 500ms ease. Now you should have reproduced my example.
If you want the menu to drop instead, you’ll have to set z-indexes to make it go under the menu bar. Give the menu item a zindex of 2 and the menu a zindex of 1. Set initial appearance by moving menu to the top, etc…
cool, teamwork (: Yesterday I just had figured how to make the slider trigger to work.
Ah, nice one. I replicated, and the opacity easing works! Yeah! I’ve named the Interaction vincents_dropdown in your honour.
When I first tried your example I was using Chrome, and there was no opacity easing. So I tried Firefox and same problem. In IE11 (this must be a first for IE) it works. This is probably an issue at my end but you might want to have a go on different browsers and check.
It works on chrome icely even in preview here… I wouldn’t be worry, this is standard stuff for webflow and I’ve never experience compatibility bug with it.
I’ve got the drop down to work on hover from your instructions. I’m just struggling with hiding the menu when the mouse leaves. I’ve set the positive 55px padding and negative 55px margin, its just the setting the :hover out interaction to display:none. I can’t see display :none in your menu example below (only in the class style):
Forget that. I just found it. It’s the button to the right of the Inline button. got it.
I tried a similar thing by setting the opacity to 0 (which doesn’t need any resize). The problem I’m getting with both options is that the dropdown links disappear when you mouse away from the main link, but they need to disappear when you mouse away from the drop-down links themselves.
Yeah I had this problem when building this, but that’s why I have to margin, for the menu to be under the menu item that you hover to begin with. So you put the release on the menu itself, not the menu item.
So you hover the menu item, displays the menu, then the hover menu interaction kicks in and when you hover out the menus goes away. Analyse my page a bit more and you’ll figure that out.
Well I’ve kind of got it to work. I set the margin and padding.
I added another trigger for the menu option. It works perfectly - in that it disappears as soon as I leave the drop down - but reappears on the right. But I’ll play further. This is what my mouse-out trigger looks like. Am I on the right lines?..
Any chance I could see your page (http://sab.webflow.com/) via the new Public Link option? That way I might finally be able to work out out to do the mouse-out part of the drop-down routine. This would also be good for @Candleman.
Thanks Vincent. I got it to work on my test page now. This is the problem with being new to something. I only realised there was a Public Project feature when I saw the top post tonight, which you contributed to. So I learned lots, and definitely no time wasted, as you never forget when learning this way.
…so that brings me back to the title of this post. ‘Import example routines’. I was originally asking if we could import routines so we could dissect them and work out how to do - well, do stuff like this. So looks like we can. It would be nice if there was a directory of routines users (or Webflow) could contribute too, but just reading through the forums should provide enough (even if a few ‘please can you show me…’ requests need to be made. I’ll let @candleman know.
