Foundation 6 Off Canvas,菜单内容应该放在哪里?
Foundation 6 Off Canvas, where should I put the menu content?
我正在按照 Foundation 6 文档创建一个关闭 canvas 菜单: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'
时我们在基础文档上看到的一样
我是不是把列表放错地方了?
我很确定我的框架是最新的,并且我一直在逐步遵循文档,但它没有提供我想要的那么多信息
您的菜单在正确的位置,您的示例等同于 Foundation 6 文档中提供的示例。
这似乎是一个设计问题,关闭 Canvas 菜单的长度取决于内容的大小。因为页面上没有内容,所以菜单与菜单栏的高度相等。
填充 off-canvas-content
后,菜单应该会按预期显示。
单击 Here 观看演示。
感谢您分享您的代码。它与 ZURB 为 Foundation 6 起始页提供的示例略有不同。 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">
我正在按照 Foundation 6 文档创建一个关闭 canvas 菜单: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'
时我们在基础文档上看到的一样我是不是把列表放错地方了? 我很确定我的框架是最新的,并且我一直在逐步遵循文档,但它没有提供我想要的那么多信息
您的菜单在正确的位置,您的示例等同于 Foundation 6 文档中提供的示例。
这似乎是一个设计问题,关闭 Canvas 菜单的长度取决于内容的大小。因为页面上没有内容,所以菜单与菜单栏的高度相等。
填充 off-canvas-content
后,菜单应该会按预期显示。
单击 Here 观看演示。
感谢您分享您的代码。它与 ZURB 为 Foundation 6 起始页提供的示例略有不同。 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">