/ / Foundation 6 Off Canvas, wo soll ich den Menüinhalt platzieren? - zub-foundation, zub-foundation-6, Off-Canvas-Menü

Foundation 6 Off Canvas, wo soll ich den Menüinhalt einstellen? - zub-foundation, zub-foundation-6, Off-Canvas-Menü

Ich folge der Dokumentation von Foundation 6, um ein Off-Canvas-Menü zu erstellen: http://foundation.zurb.com/sites/docs/off-canvas.html

Hier ist, was ich getan habe:

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

Aber wenn ich das Menü öffne, hier ist, was ich bekomme:

Bildbeschreibung hier eingeben

Ich kann es scrollen und sehe meinen Test1 / 2/3/4, aber warum habe ich dieses Ergebnis?

Was ich möchte, ist das gleiche wie das, was wir in der Fundament-Dokumentation sehen können, wenn Sie auf "Toggle Off-Canvas" klicken

Habe ich meine Liste falsch platziert? Ich bin mir ziemlich sicher, dass mein Framework auf dem neuesten Stand ist, und ich habe die Dokumentation Schritt für Schritt verfolgt, aber es gibt nicht so viele Informationen, wie ich gerne hätte

Antworten:

3 für die Antwort № 1

Sie haben das Menü an der richtigen Stelle und Ihr Beispiel entspricht den Beispielen in der Foundation 6-Dokumentation.

Dies scheint ein kleines Designproblem zu seinDie Länge des Off Canvas-Menüs hängt von der Größe des Inhalts ab. Da Sie keinen Inhalt auf der Seite haben, ist das Menü in der Höhe der Menüleiste gleich.

Sobald Sie bevölkern off-canvas-contentDas Menü sollte wie erwartet angezeigt werden.

Klicken Hier für eine Demo.


0 für die Antwort № 2

Vielen Dank für die Freigabe Ihres Codes. Es ist etwas anders als die Beispiele von ZURB für die Startseiten der Foundation 6. ZURB verwendet "wrap" statt "wrapper". Ich habe meinen Code so geändert, dass er zu deinem passt und voila! Ihr Tutorial ist unter:

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

Deine:

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