Foundation f6 顶部栏似乎不起作用

Question

我下载了基础 6 "essential"。这里：http://foundation.zurb.com/sites/download.html/

此下载有一个 index.html 文件，它是示例页面的入口。

我决定将这个名为 "f6-top-bar" 的模块集成到示例基础 index.html 页面的顶部： http://zurb.com/building-blocks/f6-top-bar

为此，我执行了以下操作：

我在这里复制了"f6-top-bar"的HTML代码：

http://zurb.com/building-blocks/f6-top-bar

进入基础6下载的index.html文件index.html页面

然后我把"f6-top-bar"的CSS复制到这里：

http://zurb.com/building-blocks/f6-top-bar

进入基础6index.html页的app.css文件

最终结果不是带有汉堡包样式图标的响应式菜单。它只是一个静态的无序列表。

我做错了什么？

HTML

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
   <div class="title-bar" data-responsive-toggle="main-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="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

css/app.css

body {
  margin-top: 2rem;
}

.title-bar {
  background: #333;
  padding: 0.9rem;
}

.top-bar {
  background: #333;
}

.top-bar ul {
  background: #333;
}

.top-bar ul li {
  background: #333;
}

.top-bar ul li a {
  color: #fff;
}

.menu-text {
  color: #fff;
}

@media only screen and (max-width:40em) {
  .menu-text {
    display: none !important;
  }

}

@media only screen and (min-width:40em) {
  .menu:last-child {
    border-left: 1px solid #4e4e4e;
  }

  .menu:first-child {
    border-left: none;
  }

  .menu li:not(:last-child) {
    border-right: 1px solid #4e4e4e;
  }

}

.dropdown.menu .submenu {
  border: none;
}

.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
  border-color: #fff transparent transparent;
}

.is-drilldown-submenu-parent > a::after {
  border-color: transparent transparent transparent #fff;
}

.js-drilldown-back::before {
  border-color: transparent #fff transparent transparent;
}

最终结果:(

Answer 1

答案是这需要基础"complete"。基金会 "essential" 将无法运作。

Foundation f6 顶部栏似乎不起作用

Foundation f6 top bar does not seem to work

css

zurb-foundation