小编Woo*_*guy的帖子

如何在单击链接时关闭Foundation顶部栏菜单?

我在我的单页网站上使用Zurb Foundation的固定顶部栏,它包含指向页面内各个位置的锚点链接.我希望这样,只要点击展开的移动菜单中的链接,菜单就会关闭.

目前,当点击链接时,页面会滚动,但菜单会在页面顶部打开,不在视图范围内.

在以前版本的Foundation中,我能够对代码进行反向工程并找到一个简单的解决方案.由于更新到4.3.1以解决顶部栏的另一个问题,由于我对javascript的了解有限,我无法找到解决方案.

顶栏

在我看来,如果我点击菜单中的链接时可以触发菜单关闭的事件或功能,它将被修复.以前,我将我的代码发生在链接上,点击第261行.

当移动菜单关闭时,.fixed将添加到顶部栏周围的div,而.expanded和.fixed将从.topbar div中删除.

html javascript css zurb-foundation

6
推荐指数
1
解决办法
5978
查看次数

使用Zurb Foundation滚动浏览页面时,粘性顶栏会使页面跳起来

我在我的网站上使用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)

html navigation zurb-foundation

5
推荐指数
2
解决办法
9989
查看次数

标签 统计

html ×2

zurb-foundation ×2

css ×1

javascript ×1

navigation ×1