/ / Foundation 6 Off Canvas, dove devo inserire il contenuto del menu? - zurb-foundation, zurb-foundation-6, off-canvas-menu

Foundation 6 Off Canvas, dove devo inserire il contenuto del menu? - zurb-foundation, zurb-foundation-6, off-canvas-menu

Sto seguendo la documentazione di Foundation 6 per creare un menu off canvas: http://foundation.zurb.com/sites/docs/off-canvas.html

Ecco cosa ho fatto:

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

Ma quando apro il menu, ecco quello che ottengo:

inserisci la descrizione dell'immagine qui

Posso farlo scorrere e vedere il mio test1 / 2/3/4, ma perché ho questo risultato?

Quello che voglio è lo stesso di quello che possiamo vedere nella documentazione di base quando fai clic su "Attiva / disattiva"

Ho inserito la mia lista nel posto sbagliato? Sono abbastanza sicuro che il mio framework sia aggiornato, e ho seguito la documentazione passo dopo passo, ma non fornisce tutte le informazioni che vorrei avere

risposte:

3 per risposta № 1

Hai il menu nel posto giusto e il tuo esempio è equivalente agli esempi forniti nella documentazione di Foundation 6.

Questo sembra essere un po 'un problema di design in cuila lunghezza del menu Off Canvas dipende dalla dimensione del contenuto. Poiché non hai contenuto sulla pagina, il menu è uguale in altezza alla barra dei menu.

Non appena si popola off-canvas-content, il menu dovrebbe apparire come previsto.

Clic Qui per una dimostrazione.


0 per risposta № 2

Grazie per aver condiviso il tuo codice. È leggermente diverso dagli esempi di ZURB per le pagine introduttive di Foundation 6. ZURB usa "wrap" invece di "wrapper". Ho cambiato il mio codice per abbinare il tuo e voilà! Il loro tutorial è a:

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

Il tuo:

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