/ / Foundation 6キャンバスを外して、メニューコンテンツはどこに置くべきですか? - zurb-foundation、zurb-foundation-6、オフキャンバスメニュー

ファンデーション6オフキャンバス、メニューコンテンツはどこに置くべきですか? - zurb-foundation、zurb-foundation-6、オフキャンバスメニュー

オフキャンバスメニューを作成するためにFoundation 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を見ることができますが、なぜ私はこの結果を持っていますか?

私が望むのは、「オフキャンバスを切り替える」をクリックしたときに基礎文書で見ることができるものと同じです。

リストを間違った場所に置いたのですか? 私はフレームワークが最新であることをかなり確信しており、ドキュメントを段階的に辿ってきましたが、私が望むほどの情報は提供していません

回答:

回答№1の場合は3

適切な場所にメニューがあり、あなたの例は、Foundation 6のドキュメントにある例と同じです。

これはデザイン上の問題のようですオフキャンバスメニューの長さは、コンテンツのサイズに依存します。ページにコンテンツがないため、メニューの高さはメニューバーと同じになります。

あなたが移入するとすぐに off-canvas-content、メニューが期待どおりに表示されます。

クリック ここに デモのために。


回答№2の場合は0

コードを共有していただきありがとうございます。 Foundation 6のスターターページのZURBの例とは若干異なります。 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">