/ / Foundation 6 Off Canvas, ¿dónde debería poner el contenido del menú? - zurb-foundation, zurb-foundation-6, menú fuera de la lona

Foundation 6 Off Canvas, ¿dónde debería poner el contenido del menú? - zurb-foundation, zurb-foundation-6, menú fuera de la lona

Estoy siguiendo la documentación de Foundation 6 para crear un menú fuera del lienzo: http://foundation.zurb.com/sites/docs/off-canvas.html

Aquí esta lo que hice :

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

Pero cuando abro el menú, esto es lo que obtengo:

enter image description here

Puedo desplazarme y ver mi prueba el 1/2/3/4, pero ¿por qué tengo este resultado?

Lo que quiero es lo mismo que lo que podemos ver en la documentación de la fundación cuando hace clic en "Alternar entre bastidores"

¿Puse mi lista en el lugar equivocado? Estoy bastante seguro de que mi marco está actualizado, y he seguido la documentación paso a paso, pero no proporciona tanta información como me gustaría tener.

Respuestas

3 para la respuesta № 1

Tiene el menú en el lugar correcto y su ejemplo es equivalente a los ejemplos proporcionados en la documentación de Foundation 6.

Esto parece ser un problema de diseño dondela longitud del menú Off Canvas depende del tamaño del contenido. Como no tiene contenido en la página, el menú tiene la misma altura que la barra de menú.

Tan pronto como llenes off-canvas-content, el menú debería aparecer como se esperaba.

Hacer clic aquí para una demostración.


0 para la respuesta № 2

Gracias por compartir tu código. Es ligeramente diferente a los ejemplos de ZURB para las páginas iniciales de Foundation 6. ZURB usa "wrap" en lugar de "wrapper". Cambié mi código para que coincida con el tuyo y listo! Su tutorial es en:

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

Tuya:

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