Off Canvas Menu

[dgsibert]

I’m trying to achieve an off canvas menu (on the homepage/desktop) that toggles when a hamburger is clicked. The rest of the pages would be the regular side menu. On mobile it would always be the burger.

This site does exactly what I am trying to accomplish: http://www.ottoportland.com/

I’ve searched around here quite a bit but am not finding a related post.

[franticape]

I’m not really sure about what you want to accomplish. when i click the hamburger menu on desktop, a menu opens but then it never closes (it’s as if i invoke a left-side menu), is that what you want to accomplish?

[dgsibert]

Exactly, on the homepage only.

[franticape]

well, this is what i’d do to replicate it:

1. create a left menu in PRO
2. Click “top” ( http://prntscr.com/hvkg0u ) and then the first bar. go to customize and make it visible on desktop.

3)add a class for both the horizontal menu and the vertical menu: http://prntscr.com/hvkgkm

4. Create a text element in the horizontal menu and write “menu” with the burger graphic and add a class “toggle” to it

5. for the purpose of this example i added 2 classes for the horizontal menu bar and the vertical bar respectively : “menubar” and “leftmenu”

then just add this code in the JS Section:

jQuery(document).ready(function($){
  var horizontalmenu= document.getElementById("menubar");
  var leftmenu= document.getElementById("leftmenu");
  
  $("#toggle").on("click",function(){
    $(horizontalmenu).addClass("hide");
    $(leftmenu).removeClass("hide");
  });
  
  
});

That will basically toggle both bars.

that should get you started.

WARNING: Please note that i’m NOT part of the support team, i’m just a regular web developer/designer/programmer. it’s not difficult to replicate the entire animation the site has, but the basic of what you want is pretty much what i wrote up there.

Cheers.