Streaming live at 10am (PST)

Using interactions for multi-level navigation


#1

Hi guys,
sorry ahead of time but can't post the link for this project, may create a separate one to better explain what is happening.
Essentially I have multiple divs that I'm showing/hidding through the display:none/block with interactions. What happens is that they start behaving erratically. Sometimes they hide, sometimes they don't, sometimes only certain ones. Not sure if I'm pushing the interactions past their limitation or if this is a bug.


#2

its hard to picture in my head what could be causing the issue. If possible, can you please post your project link?


#3

@Jonas76 - Sounds very odd. If time permits, please create a test site that demonstrates this behavior and we will investigate it further. Thanks!


#4

Here is an example.
https://webflow.com/design/tester92187313219851?preview=3365f62589be8a507cc2df342b6f4b0d

The only interactive buttons are the "Click" ones. The interaction seems to loop at the second level, not remain hidden. I can't seem to "stop" the loop effect. BTW I'm not intentionally looping it. Those ticks are off. I'm thinking, but not sure, its because I'm using the same class in different Interactions?


#5

Hmm, this example is a bit hard to follow.

Can you describe what you'd like to accomplish with these clicks? Maybe I can help with a different type of div layout and/or IX settings to get it done.


#6

Hi @Danro,
sorry about that rushed reply. I'll better illustrate my conundrum in Ps and try to explain what my goal is.
I'm playing around with a multi-level navigation and I'm trying to use Webflow Interactions for the transitions that I would like to see take place. Here is an animatic of the sequence

Each subsequent level should behave identical to this illustration, showing only one level at a time, each having an slide-in/out interaction when called. Currently I can't seem to achieve this with interaction. I'm defaulting to jQuery and jQuery UI for Show/Hide, CSS and Slide effects to achieve this for now. If there is a better way to approach this than I have please advise!
Thanks.


#7

Thanks @Jonas76, the animatic really helps.

Unfortunately, I think a multi-level navigation is still best expressed in code. Good idea using jQuery to get this done. Don't forget, you can also use the global tram() function, which makes it easier to animate the x property (and is much more performant than jQuery.animate).

Here's a basic example using Tram to animate the x properties of two divs:
http://jsbin.com/nerin/1/edit


#8

@danro
Thanks! You know I'm a big fan of Tram and still waiting on more documentation on the TO DO Methods. Thanks for the example.


#9