Push page to side with menu like Squarespace?

Publishing help General
1

Hello All,

I was wondering if anyone knew if there was a way to have the hamburger menu push the page to the left like www.squarespace.com

Thanks!

1 Like
2

I just checked, not with the navbar element at the moment. But i’m sure you can achieve the same effect with interactions.

3

Yes, with interactions is doable. I did it on a website I’m working on. Click on “contact”
https://webflow.com/design/serenapapait?preview=4c01ea9ba2afbe1f36eca1dff5a05689

1 Like
4

I see why it works on yours, because your contact div is a section which automatically pushes the rest of the content down. It is also at the top by default and requires no additional positioning. A side menu needs fixed positioning which means it does not affect the elements adjacent to it. Still hoping to find a solution.

5

Couldn’t just be a floating element with 100% height?
PS: I tried myself, now I see it’s more complicated than it looks!
I found a tutorial here: http://callmenick.com/2014/03/26/slide-and-push-menus-with-css3-transitions/
and here: Slide and Push Menus | Codrops

1 Like
6

Hi @DFink. Something like this?

http://menu-like-squarespase.webflow.com/#page-nav-share
https://webflow.com/design/menu-like-squarespase?preview=f7f4647089bf40c769c6ea6409c6d505

Or like this?
http://menu-like-squarespase12141127.webflow.com/
https://webflow.com/design/menu-like-squarespase12141127?preview=86e620bb188ebe3d62fb8bd8939f216c

1 Like
7

With the page wrapper like Daniel has set up you can also transition percentage widths for the page content and menu and it adds a nice fluid feel to the menu opening and closing.

8

Yes, how exactly did you do that? Is the allwrapper class what holds everything and that moves to the side when the menu opens?

9

Hi @DFink

  1. I created a DIV block and gave him a “menu” of the class. (Height : 100% Width : “N”; Position: Fixed correctly , Z- code: 0)
  2. Place all objects except the “Menu” in the section of the class " all " (Z -index : 1)
  3. Create a " Menu button " and added interaction . “All” is shifted to the left to “N” pixels when I press the “Menu”
1 Like
10

@Daniel_Ace Links are all broken, any chance you can update so I can view in webflow :slight_smile: really needing this. Cheers

11

Hi @daniel_cleayweb
I beg your pardon, I could not answer in time. Example I deleted , but if you’re still interested , then I’ll do it again. It will not take long.

12

Hi DFink, I did all this in Webflow

Nanban website
clickthe various menu items for pushing pages left right up and down

13

care to share how you did that? it will help me and others. i’ll gladly appreciate. another thing, did you use 100% VH in the section heights? i see each section takes the full height of my screen.

14

Hi @brilliantlights and @DFink,

I’ve made a clonable version of this effect on my playground, inspired by Slide and Push Menus | Codrops (thanks to @Dario) :smile:

The link is here: http://arthurplayground.webflow.io/push-out-menu
and the clone link is here: Playground - Webflow

Let me know if this helps!

Arthur

5 Likes
15

Thank You very much,exactly what i need. I’ll put it to test and send you any of my questions. :slight_smile:

1 Like
16

That’s neat stuff @Arthur! :smile:

1 Like
17

@Arthur I followed your clone push menu exactly and I just cannot get push menu working, am I missing any little tricks ? custom code I cannot see?

18

@daniel_cleayweb are you using the interactions correctly? If you post your read only link, How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow I can take a look :smile: