/ / Foundation 6 Off Canvas, де я повинен вмістити вміст меню? - ЗУББ-фундамент, ЗУББ-Фундамент-6, холст-меню

Фонд 6 Off Canvas, де я повинен вмістити вміст меню? - ЗУББ-фундамент, ЗУББ-Фундамент-6, холст-меню

Я підходю до документації Фонду 6, щоб створити меню з меню. http://foundation.zurb.com/sites/docs/off-canvas.html

Ось що я зробив:

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

Але коли я відкриваю меню, ось що я отримую:

введіть опис зображення тут

Я можу прокрутити його і побачити мій test1 / 2/3/4, але чому я отримав цей результат?

Те, що я хочу, таке ж, як ми бачимо на документації фонду, коли ви натискаєте кнопку "Toggle Off-canvas"

Чи поставив мій список у неправильному місці? Я впевнений, що мої рамки є актуальними, і я послідовно виконую документацію, але не надає такої кількості інформації, якою я хотів би мати

Відповіді:

3 для відповіді № 1

У вас є меню у правильному місці, і ваш приклад еквівалентний прикладам, наведеним у документації Фонду 6.

Це, здається, трохи дизайнерської проблеми, дедовжина меню Off Canvas залежить від розміру вмісту. Оскільки у вас немає вмісту на сторінці, меню дорівнює висоті до рядка меню.

Як тільки ви заселите off-canvas-content, меню має виглядати так, як очікувалося.

Натисніть Ось тут для демонстрації


0 для відповіді № 2

Дякую, що поділилися своїм кодом. Він дещо відрізняється від прикладів, зроблених ZURB для 6 стартових сторінок. ZURB використовує "обгортку" замість "оболонки". Я змінив код, щоб він відповідав вашим та воля! Їх навчальний посібник:

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

Ваш:

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