/ / Foundation 6 Off Canvas, kde by som mal dať obsah menu? - zurb-foundation, zurb-foundation-6, off-canvas-menu

Nadácia 6 Vypnuté plátno, kde by som mal umiestniť obsah ponuky? - zurb-foundation, zurb-foundation-6, off-canvas-menu

Ja som po dokumentácii nadácie 6 vytvoriť menu mimo plátno: http://foundation.zurb.com/sites/docs/off-canvas.html

Tu je to, čo som urobil:

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

Ale keď otvorím menu, tu je to, čo mám:

tu zadajte popis obrázku

Môžem ju posúvať a prezrieť si môj test1 / 2/3/4, ale prečo mám tento výsledok?

To, čo chcem, je rovnaké ako to, čo môžeme vidieť v nadačnej dokumentácii po kliknutí na tlačidlo "Toggle Off-Canvas"

Dal som zoznam na nesprávnom mieste? Som si istý, že môj rámec je aktuálny a ja som postupne sledoval dokumentáciu, ale neposkytuje toľko informácií, ako by som chcel mať

odpovede:

3 pre odpoveď č. 1

Máte menu na správnom mieste a váš príklad je ekvivalentný s príkladmi uvedenými v dokumentácii nadácie 6.

Zdá sa, že to je trochu problém dizajnudĺžka ponuky Off Canvas závisí od veľkosti obsahu. Keďže na stránke nemáte žiadny obsah, ponuka je rovná výške na paneli s ponukami.

Akonáhle ste obsadili off-canvas-content, menu by sa malo zobraziť podľa očakávania.

kliknite Tu pre demo.


0 pre odpoveď č. 2

Ďakujeme za zdieľanie vášho kódu. Je mierne odlišný od príkladov zo strany ZURB pre štartovacie stránky nadácie 6. ZURB používa "wrap" namiesto "wrapper". Zmenil som kód tak, aby zodpovedal vašim a voila! Ich výučba je na:

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

S pozdravom:

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