Question

我下载了基础6“必不可少”。这里：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

进入基础6 index.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

答案是，这需要基础＆＃34;完成＆＃34;。基础＆＃34;必要＆＃34;不行。

基金会f6顶栏看起来不起作用

1 个答案: