Foundation 5 简单导航答案

【问题标题】：Foundation 5 Simple NavigationFoundation 5 简单导航
【发布时间】：2015-04-07 20:36:21
【问题描述】：

如何在基础 5 中制作简单的顶部菜单？需要使用topbar还是有其他可能性？我的实际代码是：

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
    <li class="name">
    <h1><a href="#">Site Name</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
    </ul>
    <section class="top-bar-section">
    <ul class="right">
    <li class="active"><a href="#">Domov</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </section>
</nav>

但我有移动版本的问题。导航被破坏并在菜单下跳转而不是在简单按钮中折叠。有人能告诉我为什么吗？以及如何修复它，或更简单的导航？谢谢。

【问题讨论】：

您是否确保包含必要的 javascript 文件和$(document).foundation();？
你能做个小提琴吗
您可以在此处查看当前版本：sauny.osuchane.sk login: dev 密码: developer 。尝试调整显示器大小，你会发现主要问题。
请做一个小提琴，链接到你自己的页面不是一个很好的例子，因为它不能被试图帮助你的人实时编辑，而且它也不像小提琴岛最后，fiddle 不太复杂，因此更容易找到错误。无论如何，来自 CZ 的问候 :)

标签： css responsive-design zurb-foundation

【解决方案1】：

这是一个标准的基础 .top-bar 导航。不要忘记包含必要的js文件并初始化它们。

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

【讨论】：

是的，但那是标准版本，我需要一些不同的东西。您可以在此处查看当前版本：sauny.osuchane.sk 登录名：dev 密码：developer。尝试调整显示器大小，你会发现主要问题。

【解决方案2】：

添加这个

.top-bar {
    overflow: visible;
}

DEMO

【讨论】：

这并没有解决我的问题，我认为topbar导航的断点会有一些问题，我不知道如何更改它。似乎无论里面有多少菜单项，topbar 总是在 625px 左右变为“移动版”。

【解决方案3】：

我认为，您可以使用 iconbar 来代替 topbar ，这将很容易满足您的要求。移动版和桌面版的 UI 将相同。检查以下链接： http://foundation.zurb.com/docs/components/icon-bar.html

【讨论】：