I am trying to have the Drop Down Menus in our Nav Bar expand, or open with a simple mouse over rather than click. I have viewed several posts to the Forums, but I am having no luck.
Ideally a video would be great, but I am looking for a step by step solution.
Thanks
If you look at my post from yesterday, Import example routines, @vincent details how to add ease and hover a dropdown menu. There’s a website example and lots of instruction. I got it to work, so must be straightforward. good luck.
thank @pnewest (:
The page is here http://sab.webflow.com/
Thank you Pnewest and Vincent. Actually, I found this post and samples earlier today, before I made my post to the board. Nicely done, but I’m not able to get it to work, and I just retried again, in hopes of perhaps a bit of luck, but still not able. I am clearly missing something. Do you happen to know of any videos that may exist? Even a short one, might do the trick.
Thanks for all your help …greatly appreciated!!!
thanks for @vincent for the link.
Why not try the following. This should show you the dropdown menu appearing on Hover. I’ll work out some instructions for the menu to go on mouse-out later hopefully (just between stuff at the moment):
Trigger(s): click +
Thank you very much Pnewest. I will try this now and let you know how I make out. Fingers crossed!!! While we are on the subject, Webflow seems like an amazing tool, and Drop Down Menus, with Mouse Over interaction is a very popular request. With that being said, are you aware of any Menu Building Programs that can be purchased on the market today, that the script or HTML created can be simply embedded into the site? I have Sothink DHTML and CoffeeCup Menu Builder already and thought perhaps you may know of their usage in the past with Webflow.
Once again, thank you for all you help!!!
Well there’s a coincidence. I’ve been using Sothink dhtml and tree menus for years. Here’s one of my typical sites - http://www.vinesurgery.nhs.uk
I’ve recently been playing with http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu–net-15129 and was going to build my next GP site using Dreamweaver, until I found Webflow (when looking for CSS structure tools). This menu does work really well and you could add the js / css using in the Site Settings > Custom code then use within Webflow. I added an RSS feed this way yesterday - to this site - http://webadore.co.uk/dev/eastkent/. This is my learning site!
Let me know how you get on and I’ll try and work out the rest later.
Mike
Very nice Pnewest!!! I tried the suggestion you posted a few minutes ago and didn’t have any luck then either. For what it is worth, I have been designing and building sites for about 18 years, which is why I am pulling my hair out with the Drop Down/Hover issue. The site I am using this on, which is my first Webflow site, is about 150 pages, which means I will use sub domain for anything over the 80 page limit. I’m overlooking something, just can’t put my finger on it.
Hi Pnewest. I gave it another try and this time it appears to open on Mouse Over!!! Fantastic, any simple suggestions for it closing once the mouse has left the Drop Down?
I think I am making some headway. I am able to have the Dropdown on the Nav Bar expand with mouse over hover and disappear when I remove the mouse. The only problem I am seeing is that when I expand the Drop Down and I move my mouse to one of the links in the Drop Down, it closes back up instantly and I am not able to click a link, once I move off of the main link for the Drop Down. Hope this makes sense.
Thanks for the comments. This site was without the help of my designer but should improve somewhat once I have her input. I’ve been writing sites for 18 years too (first one in '96 for a beer campaign group). Was a programmer for 14 years prior to that. I’ve always found CSS tricky so this product is great.
Glad you got there with the hover - I was just about to post a screenshot of the triggers. I’m going to have at the disappearing menu now. @vincent said 
But for when the user moves his cursor to the menu and click no links and finally :hovers out of the menu, we need an interaction to hide the menu back. First we put a 55px padding top on the drop down menu, and the same negative margin, so that it overlaps the menu item.
Then we set its :hover out interaction to display:none.
(The Display:none is the symbol next to T Inline)
I’ll race you …
btw - I noticed the bit about embedding the the code didn’t come through in my last post (probably because of the angle brackets) - but I found this last night and using -embed you can drop in a section of code anywhere - really useful!
I’m just writing in Webflow to produce the templates. then splitting once finally exported and using php includes to put back together. This way I can separate the content as all my clients use CushyCMS content management. But Webflow looks good to use for demos and small arty sites.
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. I’ve asked @vincent if I’m on the right lines?..
this is the hover - show dropdown trigger:
I should have said that the class used in the hover trigger is the drop down menu, but the class used in making it disappear is the menu option above the drop down list.
Hi Pnewest. I’m not entirely sure where it is exactly I adjust the 55px padding, class, etc… Could you maybe touch on that a bit? Also, if there is anything else you can add for the most recent step you just showed, it would also be a great help.
Thanks for all your input.
Hi Pnewest. I am getting very close, but do have a couple of questions, if you or anyone else can help.
First, I need to have the Drop Down List closer to the Main Link by 7 or 8 pixels. I tried lowering the padding and margin numbers but the Main Link then disappears, which becomes a problem in itself.
Secondly, when previewing and hovering to expand the Drop Down after a few menu expansions (over/off), on mouse out the Main Link also disappears along with the Drop Down List, when it closes. Could that be because I am only viewing in preview and not actually published?
Hi Candleman
Sorry, been away for a day. Not really sure. I wonder if @vincent can throw anything into the ring?
I’ve a dev day tomorrow so will have a go - quite late here now.
Cheers
Mike
In the meantime… Did you add the margin/padding to the Dropdown menu option or the submenu block?
Hi there
You may have seen the post with myself and @vincent tonight. Basically you just need to open http://sab.webflow.com/ then click ‘Public Project’ at the bottom left and you can see @vincent 's page in all its glory. Armed with this it took a couple of minutes to see how the two interactions were made up and where the margins need to be set. Good luck.
Mike
Hi @pnewest - thank you for your contributions on this forum. Your solution makes a lot of sense. While the dropdown menu appears when I’m building the interaction, it doesn’t work once published.
Would you mind taking a look at this instance to see if you spot an obvious fix? The dropdown should appear on hover over “Products”.
https://webflow.com/design/servicerocket-inc?preview=4e62a392bf0ae2b01d831291fe24989f
