Foundation 导航

Foundation 是一款流行的前端框架，提供了多种样式和组件。其中之一就是导航组件，可以方便地创建功能丰富和美观的导航栏。

基础用法

水平导航

水平导航条可以通过 ul 和 li 元素来构建。使用 Foundation 的 class 可以添加样式。下面是一个基本的示例：

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>

垂直导航

垂直导航可以通过设置 ul 的 class 来实现。使用 vertical class 可以获得一个垂直的导航栏，如下所示：

<ul class="vertical menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>

带子菜单的导航

Foundation 的导航组件也支持带有子菜单的导航栏。使用 dropdown 类可以创建菜单。示例如下：

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Products</a>
    <ul class="menu">
      <li><a href="#">Product 1</a></li>
      <li><a href="#">Product 2</a></li>
      <li><a href="#">Product 3</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>

高级用法

Foundation 的导航组件也支持更高级的用法，例如：megamenu、accordion menu、off canvas、title bar 等。

Megamenu

Megamenu 是一个大型的多级下拉菜单。可以通过设置菜单的 class 来实现。示例代码如下：

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Home</a>
  </li>
  <li class="has-submenu is-dropdown-submenu-parent">
    <a href="#">Products</a>
    <ul class="submenu menu vertical" data-submenu>
      <li class="is-submenu-item is-dropdown-submenu-item">
        <a href="#">Product 1</a>
        <ul class="submenu menu vertical" data-submenu>
          <li class="is-submenu-item">
            <a href="#">Product 1.1</a>
          </li>
          <li class="is-submenu-item">
            <a href="#">Product 1.2</a>
          </li>
        </ul>
      </li>
      <li class="is-submenu-item is-dropdown-submenu-item">
        <a href="#">Product 2</a>
        <ul class="submenu menu vertical" data-submenu>
          <li class="is-submenu-item">
            <a href="#">Product 2.1</a>
          </li>
          <li class="is-submenu-item">
            <a href="#">Product 2.2</a>
          </li>
        </ul>
      </li>
      <li class="is-submenu-item is-dropdown-submenu-item">
        <a href="#">Product 3</a>
        <ul class="submenu menu vertical" data-submenu>
          <li class="is-submenu-item">
            <a href="#">Product 3.1</a>
          </li>
          <li class="is-submenu-item">
            <a href="#">Product 3.2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Accordion menu

Accordion menu 类似于展开菜单，可以在导航栏中部署。示例代码如下：

<ul class="accordion menu" data-accordion-menu>
  <li>
    <a href="#">Products</a>
    <ul class="menu vertical nested is-active">
      <li><a href="#">Product 1</a></li>
      <li><a href="#">Product 2</a></li>
      <li><a href="#">Product 3</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Off canvas

Off canvas 导航是一种常用的响应式导航。它允许将导航以层叠的形式隐藏在页面侧面。示例代码如下：

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul class="vertical menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <div class="title-bar">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
          <span class="title-bar-title">Site Navigation</span>
        </div>
      </div>
      <p>Your content goes here.</p>
    </div>
  </div>
</div>

Title bar

Title bar 是一种横向的导航工具栏，可以包含多个链接和按钮。示例代码如下：

<div class="title-bar" data-responsive-toggle="example-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="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One - 1</a></li>
          <li><a href="#">One - 2</a></li>
          <li>
            <a href="#">One - 3</a>
            <ul class="menu vertical nested">
              <li><a href="#">One - 3A</a></li>
              <li><a href="#">One - 3B</a></li>
              <li>
                <a href="#">One - 3C</a>
                <ul class="menu vertical nested">
                  <li><a href="#">One - 3C1</a></li>
                  <li><a href="#">One - 3C2</a></li>
                  <li><a href="#">One - 3C3</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

总结

Foundation 的导航组件提供了丰富的功能和样式，可以帮助开发者轻松创建出功能强大和美观的导航栏。以上是基础和高级用法的介绍，开发者应该根据自己的需求选择适合的方式。