css - Foundation-4 折叠菜单不出现

标签 css responsive-design zurb-foundation

我直接使用 Foundation 文档中的代码,但不知何故它对我不起作用。

我是这样写代码的:

  <nav class="top-bar">
    <ul class="title-area">
        <li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li>
    </ul>
    <section class="top-bar-section" style="left: 0%;">
    <!-- Left Nav Section -->
        <ul class="left">
          <li class="active"><a href="#">Main Item 1</a></li>
          <li class="active"><a href="#">Main Item 1</a></li>
          <li class="active"><a href="#">Main Item 1</a></li>
         </ul>
    </section>
</nav>

当我缩小浏览器窗口并达到“小”窗口大小时,菜单从页面上消失。 知道我做错了什么吗?

最佳答案

@Xarcell,我不是因为这个原因才使用 Foundation 的。我正在构建一个响应式网站,这就是我使用 Foundation 的原因。提到的问题只是我遇到这个框架的问题之一。顺便说一句:Foundation-4 是 Zurb 的响应式网页设计框架。

@Dawood Awan,jQuery 和 Foundation 链接正确。其余功能都运行良好,所以我知道它的链接。我遇到的问题是菜单本身。

我自己回答这个问题,因为我解决了这个问题。

文档提到下面提到的代码是可选的,因此我没有使用它。但似乎我必须使用它(即使它是空白的)来使我的菜单正常工作。

<li class="name">
  <h1></h1>
</li>

希望这对遇到类似问题的其他人有所帮助。

关于css - Foundation-4 折叠菜单不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16256866/

相关文章:

html - CSS 响应式图像元素

css - 响应式 Web 应用程序 CSS

javascript - 使用 javascript 关闭基础 4 下拉按钮菜单窗口

html - Zurb 的基础菜单按钮是如何编码的?

html - Angularjs - 在单击特定链接时滚动到特定 div 位置时无法折叠特定 div

css - 将 Bootstrap 导航对齐到中心

css - 如何在 CSS 中创建脉动发光环动画?

css - 隐藏 div float 和溢出的问题

css - float 页脚问题

javascript - 顶部栏中的基础下拉菜单有问题