Custom "open sub nav" follow down menu "click" and "scroll" interaction problems

Design help Animations & Interactions
1

Hi everyone
I scoured the forums and couldn’t seem to find exactly the problem I’m having here. I know there are a million questions about navigation menus but this might be a problem with having two different trigger interactions affecting the same elements.

Please check my public link below.

If you go into tablet view then toggle preview then scroll down the page… you’ll see my menu scrolling in and out of view as usual. Click on the “Navigation” button and you’ll see a sub nav appear. Click it again and it will disappear. All working great so far.

What I want is if someone leaves the sub nav open and scrolls back to the top the sub nav and the regular nav will disappear and reset.

Try it and it will disappear as it should BUT you have to click the Navigation button twice to get it to work again correctly.

I’m guessing the two trigger interactions don’t work well together. Is there a workaround? Or will this require additional custom coding? I didn’t want to post in the coding section since I wasn’t using coding for it to begin with.

I hate bothering people but I wasted my whole day trying to figure this out and now I really need help.

Thanks,
-Justin-

Here is my public share link: https://preview.webflow.com/preview/cele69-89b508b84ce19b8f063cad7fe8ebcf1a?preview=cedb64a37dd0829185af6e08ab2ef39b

2

How about this…

Your first Section… directly under baseline.
Put an div inside - absolute position bottom - height 25%

onScroll and onHover… hide the subMenu… show the mainMenu.

3

I’m not sure how that would work better? Are you suggesting putting in two “on scroll” triggers?

The problem I’m having is on the scroll out with the sub menu open. It reverses all of the animations but then someone has to click the [Navigation] button twice for the subnav to show up again after that trigger.

Not sure if this is a problem with mixing trigger interactions or a fault with browsers.

4

Let me see if I understand what you need.

You have a navbar that initializes hidden - fixed position top.

You have (about) 2 or 3 sections of information displayed in sequential order.

The navbar basically appears when you scroll down the page… perhaps somewhere in section 2.

When someone clicks on the navbar… a subnav appears.

You want the subnav to remain open as you scroll towards the top of the page… where it then automatically closes… and maybe the navbar will display.

If that’s what you want / need… then the outline (bellow) is “roughly” what I would do.

fixed top navbar… initial opacity 0
fixed top subnav margin-top = height of navbar +1… initial opacity 0

section 1
---- section 1 will contain a div 100% absolute bottom 25% height… call it div 1
---- div 1 will have an onHover and onScroll trigger that will hide subnav

section 2
---- section 2 will have onHover and onScroll triggers that make navbar visible
---- section 2 will contain a div 100% absolute top 25% height… call it div 2
---- div 2 will have an onHover and onScroll trigger that will hide div 2

section 3
---- section 3 could use the same onHover and onScroll trigger that section 2 uses

5

try this. see if this is what you need.

https://preview.webflow.com/preview/keep-subnav-open?preview=618d1fbdac37c769e9375cc4d4fd6b55

scroll up and down a bit to trigger the menu
select the click me button… you need to be a ways down the page… else the menu will hide.

6

@Revolution, first of all, thanks for all the help. I’ve adjusted my project to what you suggested.

Unfortunetly this still has the same problem. Check out my project for tablet: https://preview.webflow.com/preview/cele69-89b508b84ce19b8f063cad7fe8ebcf1a?preview=cedb64a37dd0829185af6e08ab2ef39b2 Scroll down to show the nav bar and if you click the button “navigation” and then scroll up with the sub nav open and then scroll back down to show the nav bar again try clicking the button “navigation” again… You’ll have to click it twice to get the sub nav shown.

I think there is some problem with the trigger interactions that causes this double click.

7

@cyberdave @Waldo

Is this a known problem with combining trigger interactions? As you can see I just want to reset my follow down navigation bar, if it’s open, when you scroll up.

8

you changed all the links to “4444…”
which link is “navigation” ?

and none of the “4444…” links are assigned an href or an interaction.

The only interaction I see for navigation is…

  • Move up bar.onHover (moves that bar below the “4444…” up and down).

in your previous example… you had subnav.
where did it go ? did you remove it ?

9

You cannot trigger 2 different elements in the same interaction.

ie:
onClick… do someone the current element, and a different element.

You can create 2 different actions with the same trigger.

ie:
onClick… do something with the current element
onClick… do something with element2

10

Didn’t remove anything. Go to my preview page link. Click on the Tablet view. Then click preview. When you scroll down you’ll see a button that says [Navigation =], click that.

I’m doing all of the interactions correct. I’m aware that you can’t have more than one other element triggered.

11

ok… I see your issue.

I reported this issue back in June 2015.

I am trying to remember if & how I ever got around this.

And I remember… there is a css trick to fix this. Trying to find it.

12

ok - I remember how I got around this.

I had to use 2 links to make this work.

The problem you will encounter here is…

Because the textlength of “Navigation” and “Close” are different…

  • the menu will “shift left and right”.
13

@esoteric_designs

ok… here’s a solution for you.

I remember how I got around the 2nd click issue.

  • I created a 2nd link.

In a way it actually made it “easier”. It simplified the workflow.

In the example website (following your requirements)… I have a Navigation and a Close link.

When you select the Navigation link… it hides the Navigation link - and shows the Close link.

When you select the Close link… it hides the Close link and shows the Navigation link.

The problem you encounter here is…

  • the textlength of Navigation and Close are different

So as one link becomes visible and other hides… the other menu options (such as Home) will shift left and right depending on which link was selected.

So… what I did was use an icon to represent Open and another to represent Close.

Using the icons instead… removes the shifting issue.

I include both the text and icon examples in the demo website for you.

As expected… the navbar displays when you scroll down.
The subnav displays when you select Navigate.
Close… closes the subnav… if you don’t select Close… the subnav will remain open until the mouse hits the subnav check on the first section. When it hovers over… the subnav will automatically close.

At the bottom of the Hero section… there is an interaction to close the navbar

  • as well as the subnav
    ---- (subnav just in case someone moused around the interaction. This would close navbar but leave subnav open… so I added this action).

Preview this site.

http://open-close-action.webflow.io/

@waldo @thesergie @callmevlad @PixelGeek @webflow @cyberdave

  • Are there any plans to address the 2nd click issue I brought up back in June of 2015 ???
14

Hey @Revolution. Thanks for all the help. I tried doing your two links but still have the double click problem. Le sigh. I did it with two links overlapping at absolute 100%. That way I don’t have to worry about any weird jumping.

It’s works fine and one disappears while the other appears and all the animation works fine. It’s just on the scroll up reset trigger that it requires a double click. Such a shame. I’m not sure how I can fix it. I might have to ask some JS experts if they have any suggestions.

I wish someone from WEBFLOW would jump in on the convo and let me know what they think.
@waldo @thesergie @callmevlad @PixelGeek @webflow @cyberdave

15

@esoteric_designs

You have a 2nd click on class:holder-nav-small-links.

If you add a 2nd link… the 2nd click must execute before the cycle is complete

  • similar to “12 12 12 12 12 12”… or “open close open close open close”.

In your case… (based on your requirements)

  • You don’t want the 2nd click
  • because you want the submenu to remain open
  • until you use a link (click) to close the submenu
  • or the user goes to a control div that auto-closes the submenu.

In essence… you are creating a “1 1 1 1” or “open open open open” process…

  • which is an implicit requirement based on your requirements.

The problem is created by your control div.

(this is how it works... or actually "doesn't work")...

When the user scrolls down the page… the navigation menu appears…

  • the user selects the Navigation link
  • which performs the steps in the first click of the assigned interaction.

If the user scrolls up the page…

  • the control div will automatically close the submenu
  • the 2nd click of the interaction (navigation link) never executes.

So when user scrolls back down the page…

  • the navigation menu re-appears.

If the user then selects the Navigation link

  • the interaction now performs the steps as defined for the 2nd click
  • which “closes the submenu”… but since it’s already closed… appears to do nothing.

Then when the user click-again (hence your double-click)…

  • the Navigation link performs the step in the first click
  • and now everything works again.

If the user then selects the close link… the submenu closes… this creates the “12 12 12 12” process.

So… if you use a 2nd link to close the submenu…

  • then both the Navigation and Close links will only have 1 steps in their respective interactions.

Step 1 in the Navigation link displays the submenu.
Step 1 in the Close Link hides the submenu.
onHover of the control div hides the submenu.

(I believe) this is design issue. Not a technical issue.

I’ve been using webflow for about 3 years now…

  • basically about the 15 hours a day is my average usage… 7 days a week.

So I know the product inside out. And I know the product works.

Occasionally Webflow (support) is slow to respond…

  • which is why I think they are looking to hire more support staff
  • to cover the spread… (available tech support hours)

But most of the times Webflow is pretty good about responding.

At least that’s been my experience.

16

Hi @Revolution
I think you were looking at the old button. I’ve cleaned up the tablet version so you can see the two separate links. I had/have them both only doing one click. I did the same with the scroll into view divs. I just gave them the one scroll into trigger. Still requires the double click though.

I think it’s terminal at this point. :frowning: Thanks for trying to help though.

17

you must be making changes to the site…
because with what I see now… navigation no longer works

basic nav was working 10 minutes.

This is what I see…

http://quick.as/3xbVTZVvo

18

I’m only working on the tablet view so far. Just ignoring desktop. :slight_smile: Just hid the button now. I’ve been only concentrating on tablet though. That’s where the subnav exists.

I was really hoping the one click would work! I thought I was pretty clever making two of them absolute inside the button so it would have any jumping problems. :stuck_out_tongue:

19

The one click does work. I’ve used it myself several times for different projects.

There’s an implementation problem in your site

  • and I can’t really look into your site while it’s being changed.

My advice…

You need to simplify the website. You are making it to complicated.

Personally… I would delete all the extraneous submenu interaction code for now.

It’s easy enough to recreate.

You need to make the code simpler… so you can figure why it’s not working.

The demo I made shows you how to do it. It’s pretty clean demo.

Look at the demo. It works.

20

Hi @Revolution
I did check out the link you sent. It doesn’t close on scrolling up. That’s what I’m trying to do.

I will have normal “fixed” navigation links at the top. I just want a “follow down” nav when the pages get super long. What I’m trying to do is have the “follow down” nav AND the “follow down” subnav disappear on scroll up. So if you click the menu button on the “follow down” nav, leave the subnav open, and go to the top it will disappear and reset to how it originally looked. I think this is a problem with Webflow actually, because the scroll trigger doesn’t act like a click.

Does that make sense?

I might try doing a simpler version later but I bet I’ll have the same problem. Been working on it for so long I’m going blind. I think I need to step away from it for a second. ha.