Streaming live at 10am (PST)

Push page to side with menu like Squarespace?


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


#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


#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: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/


#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


#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"


#10

@Daniel_Ace Links are all broken, any chance you can update so I can view in webflow 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 http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/ (thanks to @Dario) smile

The link is here: http://arthurplayground.webflow.io/push-out-menu
and the clone link is here: https://webflow.com/website/Forum-Help

Let me know if this helps!

Arthur


#15

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


#16

That's neat stuff @Arthur! smile


#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, http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573/ I can take a look smile


#19