1

我正在学习 Foundation 4.0 的顶部栏设计。我的目标就像教程一样，在宽度变窄时具有菜单项的滑动效果。我正在关注文档： http: //foundation.zurb.com/old-docs/f3/navigation.php#topbarCode

<div class="row">
<div class="twelve columns">
<nav class="top-bar">
  <ul>
    <!-- Title Area -->
    <li class="name">
      <h1>
        <a href="#">
          Top Bar Title
        </a>
      </h1>
    </li>
    <li class="toggle-topbar"><a href="#"></a></li>
  </ul>

  <section>
    <!-- Left Nav Section -->
    <ul class="left">
      <li class="divider"></li>
      <li class="has-dropdown">
        <a class="active" href="#">Item 1</a>
        <ul class="dropdown">
          <li><label>Section Name</label></li>
          <li class="has-dropdown">
            <a href="#" class="">Level 1, Has Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">Level 2</a></li>
              <li><a href="#">Level 2</a></li>
              <li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
                <ul class="dropdown">
                  <li><label>Section</label></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Level 3</a></li>
                </ul>
              </li>
              <li><a href="#">Level 2</a></li>
              <li><a href="#">Level 2</a></li>
            </ul>
          </li>
          <li><a href="#">Level 1</a></li>
          <li><a href="#">Level 1</a></li>
          <li class="divider"></li>
          <li><label>Section Name</label></li>
          <li><a href="#">Level 1</a></li>
          <li><a href="#">Level 1</a></li>
          <li><a href="#">Level 1</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
      <li class="divider hide-for-small"></li>
    </ul>

    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider show-for-medium-and-up"></li>
      <li class="has-dropdown">
        <a href="#">Item 2</a>
        <ul class="dropdown">
          <li><label>Section Name</label></li>
          <li><a href="#" class="">Level 1</a></li>
          <li><a href="#">Dropdown Option</a></li>
          <li><a href="#">Dropdown Option</a></li>
          <li class="divider"></li>
          <li><label>Section Name</label></li>
          <li><a href="#">Dropdown Option</a></li>
          <li><a href="#">Dropdown Option</a></li>
          <li><a href="#">Dropdown Option</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
</div>
</div>

我使用的代码与我的环境完全相同。然而菜单是这样的：

1

这不是我想要的。有人和我有同样的问题吗？

4

1 回答 1

2

加载 Foundation 4 提供的所有 js 文件

于 2013-06-27T18:27:36.207 回答