Question

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" integrity="sha256-NqI559iHqiWe5VxDi9mXE8i83ghn8Ru8BINyiPN7lDg=" crossorigin="anonymous">
  </head>
  <body>
    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
      <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar" id="example-menu">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Site Title</li>
          <li class="has-submenu">
            <a href="#0">One</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#0">One</a></li>
              <li><a href="#0">Two</a></li>
              <li><a href="#0">Three</a></li>
            </ul>
          </li>
          <li><a href="#0">Two</a></li>
          <li><a href="#0">Three</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
    </div>

    <script
			  src="http://code.jquery.com/jquery-3.1.1.js"
			  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
			  crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js" integrity="sha256-6Po73qUOfEfrvKtDy88HN0Xx6wjx3ZlngccJjsIVpIg=" crossorigin="anonymous"></script>
  </body>
</html>

这是我的所有代码。我添加了Foundation的CSS和JS插件，以及F6 Responsive Navbar的代码。但是，即使在片段中，导航栏也不会像它应该的那样工作。它应该只是大屏幕上的ul，但在大屏幕和小屏幕上，我把所有东西放在一起。为什么会这样？我已经测试过跨浏览器和跨CDN，但是徒劳无功。

Answer 1

js代码中的cdn和body脚本。将最后的js和cdn脚本部分放在head标记之间，并在正文标记中为$(document).foundation();编写脚本。

然后尝试一下，我希望它对你有用，因为它适合我。

http://codepen.io/anon/pen/LxLBBE

Answer 2

从F6.2升级到F6.3后，我遇到了类似的问题。对我有用的解决方案是将以下块添加到我的foundation_and_overrides.scss文件中：

.is-drilldown li, .is-drilldown .menu > li {
  display: block;
}

对于上下文，我挖掘了基础样式表，发现了一些有趣的东西。以前，Foundation的drilldown组件具有这种样式：

~/gems/ruby-2.3.1/gems/foundation-rails-6.2.3.0/vendor/assets/scss/components/_drilldown.scss
.is-drilldown li {
  display: block !important;
}

此更新更改为F6.3：

~/gems/foundation-rails-6.3.0.0/vendor/assets/scss/components/_drilldown.scss

.is-drilldown li {
  display: block;
}

尽管避免使用!important是最佳做法，但在这种情况下，删除!important似乎导致了您所描述的问题，因为drilldown组件的F6.3样式正在变得越来越被F6.3 menu组件中的以下样式覆盖：

~/gems/foundation-rails-6.3.0.0/vendor/assets/scss/components/_menu.scss
.menu > li {
  display: table-cell;
  vertical-align: middle;
}

希望有所帮助！

F6 Navbar无响应，将所有内容显示在一起

2 个答案: