/ / Foundation 6 Off Canvas, gdzie powinienem umieścić zawartość menu? - zurb-foundation, zurb-foundation-6, off-canvas-menu

Fundacja 6 Off Canvas, gdzie powinienem umieścić zawartość menu? - zurb-foundation, zurb-foundation-6, off-canvas-menu

Śledzę dokumentację Foundation 6, aby utworzyć menu poza płótnem: http://foundation.zurb.com/sites/docs/off-canvas.html

Oto co zrobiłem:

<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 kiedy otwieram menu, oto co otrzymuję:

wprowadź opis obrazu tutaj

Mogę go przewinąć i zobaczyć mój test1 / 2/3/4, ale dlaczego mam ten wynik?

To, czego chcę, jest takie samo, jak to, co widzimy w dokumentacji fundamentowej po kliknięciu przycisku "Wyłącz płótno"

Czy umieściłem listę w niewłaściwym miejscu? Jestem pewien, że moje ramy są aktualne i krok po kroku śledzę dokumentację, ale nie daje ona tak wielu informacji, jak bym chciała mieć

Odpowiedzi:

3 dla odpowiedzi № 1

Masz menu we właściwym miejscu, a twój przykład jest równoważny z przykładami podanymi w dokumentacji Foundation 6.

Wydaje się, że jest to kwestia projektowaniadługość menu Off Canvas zależy od wielkości zawartości. Ponieważ nie masz żadnych treści na stronie, menu jest równe wysokości na pasku menu.

Zaraz po wypełnieniu off-canvas-content, menu powinno pojawić się zgodnie z oczekiwaniami.

Kliknij Tutaj dla wersji demonstracyjnej.


0 dla odpowiedzi nr 2

Dziękujemy za udostępnienie Twojego kodu. Jest nieco inny niż przykłady ZURB dla stron startowych Fundacji 6. ZURB używa "wrap" zamiast "wrapper". Zmieniłem kod, aby pasował do twojego i voila! Ich samouczek znajduje się pod adresem:

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

Twój:

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