/ / Foundation 6 Off Canvas, onde devo colocar o conteúdo do menu? - zurb-foundation, zurb-foundation-6, menu off-canvas

Foundation 6 Off Canvas, onde devo colocar o conteúdo do menu? - zurb-foundation, zurb-foundation-6, menu off-canvas

Estou seguindo a documentação do Foundation 6 para criar um menu fora de tela: http://foundation.zurb.com/sites/docs/off-canvas.html

Aqui está o que eu fiz:

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

Mas quando eu abro o menu, aqui está o que eu recebo:

insira a descrição da imagem aqui

Eu posso rolar e ver o meu teste 1/2/3/4, mas por que eu tenho esse resultado?

O que eu quero é o mesmo que podemos ver na documentação da fundação quando você clica em "Toggle Off-canvas"

Coloquei minha lista no lugar errado? Tenho certeza de que meu framework está atualizado, e tenho acompanhado a documentação passo a passo, mas ele não fornece tantas informações quanto eu gostaria de ter.

Respostas:

3 para resposta № 1

Você tem o menu no lugar certo e seu exemplo é equivalente aos exemplos fornecidos na documentação do Foundation 6.

Esta parece ser uma questão de designo comprimento do menu Off Canvas depende do tamanho do conteúdo. Porque você não tem conteúdo na página, o menu é igual em altura à barra de menu.

Assim que você preencher off-canvas-content, o menu deve aparecer como esperado.

Clique Aqui para uma demonstração.


0 para resposta № 2

Obrigado por compartilhar seu código. É um pouco diferente dos exemplos da ZURB para as páginas iniciais da Fundação 6. ZURB usa "wrap" em vez de "wrapper". Eu mudei meu código para combinar com o seu e pronto! Seu tutorial está em:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html

Sua:

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

ZURB:

<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">