Streaming live at 10am (PST)

Multi Level Push Menu


#1

Hi guys!
I'm the process of creating a Multi-Level Push Menu (the push is optional). I'm currently trying to make it work with the Navbar Widget, but find myself unable to edit or override the parameters for the widget itself. Which brings me to the following question. Is the Navbar Widget using jQuery, Javascript or CSS3 for its interactions? Its not a big deal at all, just wondering if I could use what was already there before I build it from scratch.
As always you guys are awesome!


#2

Hey @Jonas76!

We've actually discussed the push / drawer effect at length, and during development I tried a few different ways to integrate it with our Navbar widget. Unfortunately, in order to achieve that sort of layering animation, you must structure the divs in a very specific way.

If you look at their source, you can see that they are separating the main content into a wrapper div, with a navigation div at the same level. This is completely different from how we structure our Navbar widget, as our goal was to make the div structure as simple as possible.

Perhaps in the future we'll release a "Drawer" component that provides this type of layout. It does seem a bit different than the typical responsive nav, and could be very powerful for app-like sites.

As always, if you're curious about how our widgets work, you are free to look through webflow.js in our published and exported code grin

-Dan


#3

Dan,
thanks for the response! I will look into the webflow.js and see what I can sort out. In the meantime I'm using pre "baked" divs that are simply hidden on the outer margin as a prototype for an E-commerce for deep level phone navigation with jQuery animate. I can't show that link publicly (yet) but if I get it working decently I'll copy a version. Thanks again!


#4

Nice! Also keep in mind that the open source animation library we include in webflow.js: tram is much more performant on mobile devices than jQuery.animate. Especially when using x,y,scale,rotate.

You can find more information about tram here, along with a few examples:
https://github.com/BKWLD/tram

-Dan


#5

You did mention tram to me before and I read a bit about it. However now knowing that performance has a leg up I will further investigate. Thanks again Dan!


#6