Menu icon Foundation
F6 off-canvas noob question

Hi All
Just trying to get my head around the new foundation for sites(F6) but seem to be having an issue with the off-canvas menu, I have tried to follow the documentation but having a problem understanding it, it seems to be different to F5.

can anyone help me with a full example of a working version please

Thanks in Advance

sitesoff-canvas

Hi All
Just trying to get my head around the new foundation for sites(F6) but seem to be having an issue with the off-canvas menu, I have tried to follow the documentation but having a problem understanding it, it seems to be different to F5.

can anyone help me with a full example of a working version please

Thanks in Advance

Euan G about 4 years ago

Yes Chris I have looked at that already

Chris Oyler about 4 years ago

There are several working off-canvi on that page, is there anything specifically you need help with?

Euan G about 4 years ago

I am battling to understand who these two interact:

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button" data-open="offCanvas"></button>
    <span class="title-bar-title">Foundation</span>
  </div>
</div>

  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
      <div class="off-canvas-content" data-off-canvas-content></div>
    </div>
  </div>

what JS needs to be declared in order to get this to work?
looking for a full working example that I can deconstruct to better understand, on here or code pen