个人中心
gpt4 book ai didi

css - Foundation f6 顶部栏似乎不起作用

转载 作者：行者123 更新时间：2023-11-28 05:11:15 24 4
gpt4 key购买 nike

我下载了 foundation 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

进入foundation 6下载index.html页面的index.html文件。

然后我在此处复制了“f6-top-bar”的 CSS:

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

进入foundation 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;
}

最终结果:(

enter image description here

最佳答案

答案是，这需要基础“完整”。基础“基本”将不起作用。

关于css - Foundation f6 顶部栏似乎不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39541623/

24 4 0
文章推荐： javascript - 如何保存函数调用之间的参数值？
文章推荐： c++ - 在集合 0-N 中找到基数 C 的所有可能子集
文章推荐： javascript - 有什么方法可以设置绕过 url 的重定向吗？
文章推荐： css - 表格尺寸最小