Creating an Off-Canvas Main Menu that slides in from left

Does anyone have any suggestions for doing this in Webflow?

Has anyone created a site with an off canvas main menu? I’m looking for a hidden main navigation that will work in mobile size. I’m seeing something similar in effect to CNN’s mobile site or Facebook’s mobile app. There’s also an example on the Foundation site http://foundation.zurb.com/docs/components/offcanvas.html

I’d like it to move the current page content to the right and reveal itself “behind” the page.

Any suggestions for making this in Webflow?

Design your page with the menu opened (so your content zone bleeds outside on the right, be sure to give overflow:hidden property to the parent element).

Instead of shifting the menu to the left with the Transformation panel, create an interaction only for shifting the menu OnLoad. So onload interaction and move n pixels to the left, timing 0ms. That way, when you’re in edit mode, the menu is open and you can work on it.

Create a new interaction and affect it to the Menu button. Select “Affect different element”, set it to the menu element, then onclick, first click, click on move and nothing else, timing 250ms ease in, then second click shift back n pixels left 250ms ease out.

That’s pretty much what you whould aim at.

2 Likes

You can also do this by creating your menu into a div and have it just off canvas and wrapping your entire page in a div just inside the body. Then use an interaction to move that wrapper while simultaneously moving the menu div into view.

Thank you @vincent and @DFink for the input! I have a lot more questions.

I’m looking to move both the Menu and the content to the right simultaneously (see foundation example). I’m assuming the position on the menu and the content should be set to Absolute. In terms of building the page within the Webflow structure, should the Menu be set up as a “Section” or a “Container”? Are there any advantages or shortcomings to that approach?

The menu should be a section or Div. Containers go inside sections to center content.

You can see that part in action at www.canalalarm.com

Thanks again @vincent and @DFink for the feedback.

I’m running into a few issues. I wonder if anyone has some experience/insight into this.

I have quickly put together a prototype of what I’m trying to achieve. It’s being designed as a mobile targeted site so it will look a bit sparse at wider browser sizes.

  1. Nav Links
    I have an interaction affecting to the main content container to make it slide to the right and reveal the Main nav “behind” it. I have some links that aren’t clickable in the Main sidenav when it appears (it’s Z-index is -1)

You can click on logo to see Main Nav appear. http://mobile-prototype26031757.webflow.com

  1. Fixed Menu Bar
    I have set the MenuBar to be fixed to the top of the browser. It works initially, but then breaks after you display the Main side nav.

  2. Is there anyway to have one item be a trigger for multiple interactions? I’d like to have the Main Side nav slide in as the main content container slides right.

  3. Also - I may have built this incorrectly, but when the main content slides to the right it makes the page “wider” and you can scroll to the side. Is there a way to build this so that the page width remains the same?

Thanks for any help you can provide.

Here’s the project link https://webflow.com/design/mobile-prototype26031757?preview=f38aae30bfde390bbc3ce5be8a9083b2

Okay… Through some testing and editing I was able to resolve some of the above issues.

  1. Most notably, the links in the side nav started working once I changed the z-index to 0 and put the other elements on +1 and above.
  2. Figured out how to add multiple controls within one interaction Trigger.
  3. Also figured out how to wrap the content in a div so that it doesn’t make the browser think that the content is wider than the view area.

Last item is figuring out why the fixed menu bar breaks when I trigger the side nav.

@DFink Can you expand on this, i am trying to implement but having some issues structure wise.

I have the following

  1. Body
    • Nav desktop - fixed position (15% width)
    • Main content - abosolute position (85% width)

https://preview.webflow.com/preview/inkfndry?preview=26bcfd6d07cd5a400b5b3f8d2e097811

Can you apply what you are saying above to my strucutre?

Thanks

I have no idea what you are referring to on here. This thread is over a year old. Can you post a new thread and explain exactly what you are having issues with? Tag me