1

我在使用 Foundation 6 时遇到问题，我是一个完全的初学者，我正在尝试将它应用到我正在为大学项目开发​​的网页上。我直接从Zurb网页复制粘贴了topbar代码并应用到我的项目中，它根本不起作用。这是我应用的代码：

<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>

问题是菜单永远不会折叠，并且在显示菜单时预计会隐藏的顶部栏，除非设备屏幕很小，否则它总是在视线范围内。

提前致谢！

电脑屏幕

手机屏幕

4

2 回答 2

1

这里工作正常

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

请检查你的 js/css 路径，如果你开始基础

$(document).foundation();
于 2016-01-07T20:43:07.297 回答
0

这应该解决它：

 <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>
于 2016-01-04T02:26:51.920 回答