Streaming live at 10am (PST)

Menu Recreation (Show the menu on hover, click or touch. Persist if it is click or touch.)


#1

Hey fellow Webflow-ers and the community experts,

Can I please get some help over here!??

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!! pensive

Any help / feedback would be greatly appreciated!! grin

Thanks in advance.


#2

Hello @DesignerDiana.

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.

Regards,
Anna


#3

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?

Feedback would be greatly appreciated! smiley


#4

why not just use some wf interactions ?


#5

Hey @Revolution,

Thanks for the respond.

But I tried numerous ways to recreate such effect with wf interactions and as stated in my first post, none of them worked.

Do you have any idea as to how may I be able to do so? If there is a way I would be extremely thrilled and thankful! grinning

Please help me out.

Thank you. Hope to hear from you soon.


#6

Lets see if I understand your needs.

You want a dropdown list that

1) Opens when you hover over the droplist, and
2) Remains open when you move your mouse away from the droplist

Is that correct ?

Also.... do you have an example of this ?


#7

Is this what you are talking about ?

video:

http://quick.as/lx1otxjpv


#8

Hey @Revolution,

So what i want to create is:

1. Yes, I do want the droplist to stay open when hovered over

2. But to close when hover off

3. And when clicked the droplist stays open until I click again ... Which closes and returns to hover state

... Exactly like the link provided.

Sorry, but i cant see your screencast because for some reason there is nothing recorded/played.

I hope my explanation of my needs makes sense.

If not, let me know. I`ll explain again! 😊


#9

The 1st 2 bullet points are pretty easy to do.

It's the last item... #3 that's a problem.

If you close the drop on item 2... then you cannot do step 3
- because the drop... is already closed.

If you need the drop open in item 3... then step 2 cannot exist.

So basically... you can have items 1 and 3 or 1 and 2.

But so far with my testing... you cannot have 1, 2, and 3.

As @sabanna indicated... this is workable with JQuery.

Is there a reason why you don't want to use JQuery ?

Other than JQuery... the only was I see this working only with Webflow

  • is to create a ghost menu that appears for item 3.

This is a lot of work when you can achieve a better result with JQuery.


#10

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?

Have you experienced this too?

Thank you.


#11

I would have to play with it some more... to ensure a correct answer. Will try to get an answer later.

But... I wanted to address the 3 items... of which I said you could have 1 and 2, or 1 and 3.

I might be able to give you all 3... am still playing with it. But so far - it does seem to work properly.

It's a lot of work - ask the method uses the "ghost" menu I mentioned.

You can't see the screencast I created at all ?

The screencast is basically an mp4 video.


#12

Here it is... this is all 3 steps in webflow.

1) Mouse over the menu - displays the drop list.
2) Mouse off the menu or drop list - hides the drop list.
3) Click on a menu item - hides the drop list - but displays a ghost drop in place of it
- allowing the menu to "appear to be open"
4) Clicking on a ghost item closes the ghost menu and reopens the original drop list
- allowing it to close on Mouse Off.

http://quick.as/7w10fgbog


#13

Thanks @Revolution for looking into this for me.

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.


#14

it's very much a pain to manage.
- 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.


#15

Specifically addressing this question...

In the screencast I provided... the hover, and click events are working together.

If you have an example... I can take a look.


#16

vs

Which method would you recommend if we didn't have to consider the fact that management would not be pretty?

You got that right!! wink

I am not talking about the hover state in the interactions panel but instead the hover pseudo class in the class definig panel.

Here is an example of the nav bar I'm having issues with:

screencast-

shared link -

https://preview.webflow.com/preview/p10095246?preview=975d10564ae0e7b8fc11a918e881899f2


#17

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.