I’ve been trying to create (for a week now) a menu similar to the style of the one seen in this link: http://codepen.io/elizabethchau268/full/dYGymr
using webflow, but has not been successful at all.
I really like how I could show the menu when hovered and persist when clicked … but just can’t seem to get it to work … either with css pseudo class or the interactions panel … they always cancel out each other … e.g. defining hover on to show / off to hide and when clicked it stays open but the problem is when I hover over it … it interferes with the click function and closes.
I’ve also tried hovering with the pseudo classes but after you click the element the hover doesn’t work!!!
Please Help!!
Any help / feedback would be greatly appreciated!!
Trick in this example, that there is javaScript function, that changing class of menu-container:
$(function () {
$('#menu__button').on('click touchstart', function (e) {
e.preventDefault();
$('#menu__container').toggleClass('is-active').removeClass('is-hovered');
});
$('#menu__button').on('mouseenter', function (e) {
$('#menu__container').addClass('is-hovered');
});
$('#menu__container').on('mouseleave', function (e) {
setTimeout(function () {
$('#menu__container').removeClass('is-hovered');
}, 300);
});
});
So really it is hard to recreate such effect “clear” in Webflow now. You can try to trick by using 2 similar menu-containers, which will become visible on hover or click.
Thanks Anna @sabanna for the respond. I was thinking that too but thought with the advancements of Webflow and the infinite possibilities we could create with it … I was hoping it could be done. I guess I was wrong.
I think I would just have to use the workaround for now and once I export the code, I would have to edit it because it might not be good for performance if I created 2 similar menu containers just for this effect.
Anyhow, when creating and defining interactions there seems to be the problem where I define the hover state on a class and a click interaction on it … but when the interaction is triggered in preview mode the hover class stops working forever as if it was never defined … what might be the cause? Is this normal?
No, I don’t mind using jQuery at all. It’s just, I try to have as little custom code as possible, because I want to depend on webflow itself as much as I can and keep everything organize / to a minimal. Which custom code does not follow because publishing is needed in order to view and editing is not available in the designer.
Anyhow, I think to this point I would just use the designer to the maximum, then export and after that I would have to edit the code according to my preference.
Thanks for the trying to help though.
Another question I have though ( In my response post to Sabanna) is: when creating and defining interactions there seems to be the problem where I define the hover state on a class and a click interaction on it … but when the interaction is triggered in preview mode the hover class stops working forever as if it was never defined … what might be the cause? Is this normal?
I can now see the screencast. I think it was because, before I was using mobile to view it and for some reason it showed nothing.
The screencast looks perfect. That’s exactly what I want and was considering doing it this way. The only problem with doing it this way is that I’m afraid of:
a) Modularity of the site
b) The cost of performance
c) Clean code
d) Scalability
… etc
because of having to create 2 similar elements just for this effect.
especially if you work in teams… and team members change…
or worse yet - when requirements change.
I use to run multiple teams of developers, designers, q&a, marketing and support staff
more often times ranging from 20 to 100 employees.
Talk about a PIA trying to get everything and everyone working together.
The hardest part of using this method is the (non) visibility of the containers.
Webflow could really use to secondary (sub) staging area where elements are visibly manage.
Really… I mean Webflow is visual designer, yes ? It needs a sub-stage so you can manage non-visible items.
It would also benefit Webflow should they ever allow the on-the-fly creation and destruction of elements.
This would make this type of project much easier to accomplish.
For myself… (without the sub-stage,) I would actually export and move the code into asp / cf / php to allow menu management to be done with a database or xml / csv file. This would be act as a “pseudo sub-stage” in place of what I mentioned above.
As for a performance… it’s not really that bad. The amount of additional css is small when considering the direction bandwidth, and speed are headed with the internet. That said - it’s easy for me though - because I’m a dedicated continual 50mb up/down digital fiber line. So I can’t complain.
Anyways… (for me,) this was more of a Webflow capabilities test. I wanted to see if it can done - only in Webflow.
If you follow the JQuery route (which I would recommend, )… there would be about 40 lines of additional code. And it would remove the need for a sub-stage.
