Question

大多数人都在谈论扩展栏时的下拉菜单当您将浏览器窗口调整为手机大小时，我正在谈论菜单。你应该可以超过菜单，项目列表应该下拉 http://foundation.zurb.com/docs/components/topbar.html 代码来自此页面（第二个示例）。如果你重新调整它应该显示菜单并下拉项目。

<!doctype html>
    <html>
    <head>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/custom.modernizr.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/foundation.js"></script>
        <script src="js/foundation.dropdown.js"></script>
        <meta charset="utf-8">
    <title>Gideon Sassoon</title>
    </head>
<body>
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</a></h1>
      </li>    
      <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span>
            </a>
        </li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="active"><a href="#">Right Nav Button Active</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Button with Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>
      </section>
    </nav>
    <script>$(document).foundation();</script>
</body>
</html>

好的，所以代码是正确的，我已经检查过，而且朋友也有。澄清我并不是指具有下拉菜单的右键。这完全没问题。

Answer 1

如果我理解正确，您希望悬停在此处的“移动模式”中的顶部菜单按钮下拉

enter image description here

用鼠标。

在这种情况下，顶部按照设计工作 - 移动触摸设备上没有悬停，因此它只会在移动模式下对触摸/点击作出反应。

修改

我现在明白你的问题是单击“菜单”切换重新加载页面。您似乎忘记了包含Foundation topbar脚本：

<script src="js/foundation.js"></script> <script src="js/foundation.dropdown.js"></script> <script src="js/foundation.topbar.js"></script>

Answer 2

我知道这已经过时了，但我想我刚刚解决了你遇到的同样的问题所以我正在为那些碰到它的人添加这个答案。

对我来说，问题是我试图覆盖CSS中顶部栏元素的高度。删除此条目后，我的顶栏在小屏幕上正常运行

.top-bar {
    height: 3em;
}

希望这有助于某人

Answer 3

我遇到了同样的问题，修复了：

$('.left-off-canvas-toggle').on('click', function(){});

Zurb Foundation顶栏菜单栏下拉列表无法正常工作（手机大小一）

3 个答案: