我从基金会开始,并试图让画布示例工作。我一直在苦苦挣扎,因为菜单会按照应有的方式打开和关闭,但是如果页面内容很长并且您向下滚动,则当您打开菜单时,焦点就是您在页面上的位置。 IE,固定工具栏和菜单在打开时无法修复。
我在一个小提琴上做了一个例子,并希望得到一些帮助!
HTML
<div class="off-canvas-wrap" data-offcanvas="">
<div class="inner-wrap">
<div class="fixed">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Forest School - PARS Insight</h1>
</section>
</nav>
</div>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>General</label></li>
<li><a href="#">Snapshot</a></li>
<li><a href="#">Timetable</a></li>
<li><a href="#">Homework</a></li>
</ul>
</aside>
Long Body Content Here
CSS
.off-canvas-wrap, .inner-wrap {
min-height: 100%;
}
.off-canvas-wrap{
height: 100%;
overflow-y: auto;
}
的Javascript
$(document).foundation();
答案 0 :(得分:7)
这是非常受欢迎的基金会问题:
http://foundation.zurb.com/forum/posts/965-fixed-menu-using-offcanvas
http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar
https://github.com/zurb/foundation/issues/3863
https://github.com/zurb/foundation/issues/3710
尽管官方解决方案似乎尚不存在,但我发现this one(reference)看起来很好解决了你的问题。
HTML
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div class="header">
<nav class="tab-bar" data-offcanvas>
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon">
<span></span>
</a>
</section>
<section class="right tab-bar-section">
<h1>Foundation 5 test</h1>
</section>
</nav>
</div>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Foundation</label>
</li>
[...]
<li><a href="#">The Psychohistorians</a>
[...]
</li>
</ul>
</aside>
<article class="small-12 columns">
<p>Content</p>
<p>Content</p>
<div data-magellan-expedition="fixed">
<dl class="sub-nav panel">
<dd data-magellan-arrival="build">
<a href="#build">Build with HTML</a>
</dd>
<dd data-magellan-arrival="js">
<a href="#js">Arrival 2</a>
</dd>
</dl>
</div>
[...]
<p>Content</p>
[...]
</article>
<a class="exit-off-canvas"></a>
<footer class="small-12 columns">
<div>...</div>
</footer>
</div>
</div>
CSS
article {
overflow-y: auto;
}
article,
body,
html,
.off-canvas-wrap,
.off-canvas-wrap .inner-wrap,
.row {
height: 100%;
width: 100%;
}
.header {
position: absolute;
top: 0;
width: 100%;
z-index: 99;
}
答案 1 :(得分:0)
我没有足够的声誉来发表评论......所以加上作为对Akarienta的回答。
我使用上述解决方案在移动浏览器上出现滚动问题。
我为滚动工作添加了-webkit-overflow-scrolling: touch
article,
.off-canvas-wrap,
.off-canvas-wrap .inner-wrap
height: 100%
width: 100%
-webkit-overflow-scrolling: touch
article
overflow-y: auto
感谢this问题