zurb-foundationzurb-foundation-6off-canvas-menu

Foundation 6 Off Canvas, where should I put the menu content?

I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html

Here is what I did :

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
        <ul class="vertical menu">
          <li>test1</li>
          <li>test2</li>
          <li>test3</li>
          <li>test4</li>
        </ul>
      </div>

      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
           data-position="right"></div>

      <div class="off-canvas-content" data-off-canvas-content>
        <div class="title-bar">
          <div class="title-bar-left">
            <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
            <span class="title-bar-title">Zurb</span>
          </div>

          <div class="title-bar-right">
            <button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

But when I open the menu, here is what I get :

enter image description here

I can scroll it and see my test1/2/3/4, but why do I have this result?

What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'

Did I put my list in the wrong place? I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have

Solution

  • You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.

    This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.

    As soon as you populate off-canvas-content, the menu should appear as expected.

    Click Here for a Demo.