Question

我正在学习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 http://img543.imageshack.us/img543/6249/yte.png

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

Answer 1

加载基础4提供的所有js文件

为什么Zurb Foundation Top Bar不工作？

1 个答案: