Question

我有基础6的问题，我是一个非常初学者，我正在尝试将它应用到我正在为大学项目开发的网页上。我直接从Zurb网页上制作了topbar代码的copypaste并应用于我的项目，它根本不起作用。这是我应用的代码：

<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 vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li><a href="#">Asesoreo</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Contacto</a></li>
   </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
     <li><a href="#">Log in</a></li>
    <li><a href="#" class="signup_button">Sign Up</a></li>
    </ul>
  </div>
</div>

问题是菜单永远不会崩溃，而且顶栏在显示菜单时会被隐藏，除非设备屏幕很小，它总是在看到。

提前致谢！

The Pc screen

The mobile screen

Answer 1

这里运作正常

http://codepen.io/fabiovaz/pen/zrwvjq

请检查您的js / css路径以及是否开始基础

$(document).foundation();

Answer 2

这应该解决它：

 <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 class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

Zurb Foundation 6：topbar没有崩溃

2 个答案: