Foundation 5 中的移动菜单未折叠

Question

请在这方面提供一些帮助。在手机上查看我正在开发的网站，我观察到菜单正在显示，而无需单击菜单图标并覆盖我的内容。我能做些什么来解决这个问题。这是我的代码。我正在与基金会 5 合作

    <!-- tab bar navigation -->
        <nav class="tab-bar hide-for-medium-up">
          <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon"><span></span></a>
          </section>
        </nav>
        <aside class="left-off-canvas-menu">
          <ul class="off-canvas-list">
             <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="store.php">Store</a></li>
          <li><a href="clients.php">Our Clients</a></li>
          <li><a href="contact.php">Contact</a></li>
          </ul>
        </aside>
        <a class="exit-off-canvas"></a>

谢谢

Answer 1

这是你的答案......

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
  <div class="large-12 columns">
    <nav class="top-bar" data-topbar="" role="navigation">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</a></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 show-for-large-up">
          <li class="active"><a href="#">Right Button Active</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Button Dropdown</a>
            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
              <li><a href="#">First link in dropdown</a></li>
              <li class="active"><a href="#">Active link in dropdown</a></li>
            </ul>
          </li>
        </ul>
        <ul class="right hide-for-large-up">
          <li class="active"><a href="#">Right Button</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Dropdown</a>
            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Dropdown</a></li>
              <li><a href="#">First link in dropdown</a></li>
              <li class="active"><a href="#">Active link in dropdown</a></li>
            </ul>
          </li>
        </ul>
        <!-- Left Nav Section -->
        <ul class="left show-for-large-up">
          <li><a href="#">Left Button</a></li>
        </ul>
      </section></nav>
  </div>