我在我的单页网站上使用Zurb Foundation的固定顶部栏,它包含指向页面内各个位置的锚点链接.我希望这样,只要点击展开的移动菜单中的链接,菜单就会关闭.
目前,当点击链接时,页面会滚动,但菜单会在页面顶部打开,不在视图范围内.
在以前版本的Foundation中,我能够对代码进行反向工程并找到一个简单的解决方案.由于更新到4.3.1以解决顶部栏的另一个问题,由于我对javascript的了解有限,我无法找到解决方案.
在我看来,如果我点击菜单中的链接时可以触发菜单关闭的事件或功能,它将被修复.以前,我将我的代码发生在链接上,点击第261行.
当移动菜单关闭时,.fixed将添加到顶部栏周围的div,而.expanded和.fixed将从.topbar div中删除.
我在我的网站上使用Zurb Foundation 4框架.我想要一个位于标题下方的导航栏,当您滚动过去时,该标题会粘在页面顶部.这样可以正常工作,除了当顶栏粘在页面顶部时页面内容跳起~45像素.可以在此页面上看到效果,但这是一个不同的导航元素:http://foundation.zurb.com/docs/components/magellan.html
有没有办法解决这个问题,还是我必须更改我的网站设计以适应这个错误?
文档在这里:http://foundation.zurb.com/docs/components/top-bar.html
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="/">Top Bar</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><a href="/grid.php">Item 1</a>
<ul class="dropdown">
<li><label>Level One</label></li>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li class="divider"></li>
<li><a href="#">Sub-item 3</a></li>
<li class="has-dropdown"><a …Run Code Online (Sandbox Code Playgroud)