/ / Foundation 6 Off Canvas, où dois-je mettre le contenu du menu? - zurb-foundation, zurb-foundation-6, menu hors-toile

Foundation 6 Off Canvas, où dois-je mettre le contenu du menu? - zurb-foundation, zurb-foundation-6, menu hors-toile

Je suis la documentation de Foundation 6 pour créer un menu hors-toile: http://foundation.zurb.com/sites/docs/off-canvas.html

Voici ce que j'ai fait :

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

Mais quand j'ouvre le menu, voici ce que j'obtiens:

entrer la description de l'image ici

Je peux le faire défiler et voir mon test1 / 2/3/4, mais pourquoi ai-je ce résultat?

Ce que je veux, c'est la même chose que ce que nous pouvons voir sur la documentation de base lorsque vous cliquez sur "Activer / désactiver la toile"

Est-ce que j'ai mis ma liste au mauvais endroit? Je suis quasiment sûr que mon framework est à jour et j'ai suivi la documentation pas à pas, mais cela ne donne pas autant d'informations que je voudrais avoir

Réponses:

3 pour la réponse № 1

Vous avez le menu au bon endroit et votre exemple est équivalent aux exemples fournis dans la documentation de Foundation 6.

Cela semble être un problème de conception oùla longueur du menu Off Canvas dépend de la taille du contenu. Comme vous n'avez aucun contenu sur la page, le menu est égal en hauteur à la barre de menus.

Dès que vous peuplez off-canvas-content, le menu devrait apparaître comme prévu.

Cliquez sur Ici pour une démonstration


0 pour la réponse № 2

Merci de partager votre code. Il diffère légèrement des exemples fournis par ZURB pour les pages de démarrage de Foundation 6. ZURB utilise "wrap" au lieu de "wrapper". J'ai changé mon code pour correspondre au vôtre et le tour est joué! Leur tutoriel est à:

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

Le tiens:

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