/ / Foundation 6 Off Canvas, къде трябва да поставя съдържанието на менюто? - zurb-foundation, zurb-foundation-6, off-canvas-меню

Foundation 6 Off Canvas, къде трябва да поставя съдържанието на менюто? - zurb-foundation, zurb-foundation-6, off-canvas-меню

Следвайки документацията на Фондация 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, но защо имам този резултат?

Това, което искам, е същото като това, което можем да видим в документацията на фондацията, когато кликнете върху "Превключване на извън платното"

Сложих ли списъка си на грешното място? Сигурен съм, че рамката ми е актуална и аз съм следвала документацията стъпка по стъпка, но не дава толкова информация, колкото бих искала

Отговори:

3 за отговор № 1

Имате менюто на правилното място и вашият пример е еквивалентен на примерите, предоставени в документацията на Foundation 6.

Това изглежда е малко на тема дизайн, къдетодължината на менюто "Изкл. платно" зависи от размера на съдържанието. Тъй като нямате съдържание на страницата, менюто е равно на височината на лентата с менюта.

Щом напълниш off-canvas-content, менюто трябва да се покаже според очакванията.

Кликнете Тук за демонстрация.


0 за отговор № 2

Благодарим ви, че споделихте кода си. Тя е малко по-различна от примерите от ZURB за началните страници на фондацията. ZURB използва "wrap" вместо "wrapper". Промених кода си така, че да съвпада с твоя и вола! Техният урок е на адрес:

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