基础导航答案

【问题标题】：Foundation navigation基础导航
【发布时间】：2014-01-19 17:25:23
【问题描述】：

我在使用 Zurb 的基础导航时遇到问题（我是新手，我的学习曲线很陡峭，而且我碰壁了）

我想做几件事：

在切换顶栏时，左侧有“菜单图标”。
当顶栏被切换时，我想要三个部分（标题/中间/菜单）

任何想法或帮助将不胜感激！

<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><a href="index.html"></a><h1>Title</h1></li>
<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="divider"></li>
    <li><a href="#"></a></li>
    <li class="divider"></li>
    <li class="has-dropdown"> <a href="#"></a>
    <ul class="dropdown">
            <li class="divider"><a href="#"></a></li>
            <li class="divider"><a href="#"></a></li>
            <li class="divider"><a href="#"></a></li>
            <li class="divider"><a href="#"></a></li>



    </ul>
    </li>
    <li class="divider"></li>
    <li><a href="#">Contact</a></li>
    </ul>
</section>

【问题讨论】：

标签： zurb-foundation nav

【解决方案1】：

试试这个代码：

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">Menu</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li><a href="#">Second link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

继续：http://foundation.zurb.com/docs/components/topbar.html#

【讨论】：