jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]

Question

使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如

This is the desktop view with a consistently-open off-canvas (intentional).

Now on mobile when clicking the hamburger, I'd like the menu to expand as such, versus working per usual.

这是我当前的代码:

    <div class="off-canvas position-left reveal-for-medium" id="masthead" data-off-canvas>

      <!-- start main navigation -->
      <nav class="main-menu">
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ul>
      </nav>
      <!-- end main navigation -->

      <section class="copyright">
        <div class="row">
          <div class="small-12 columns">
            <p><small>&copy; 2017<br>All Rights Reserved.</small></p>
          </div>
        </div>
      </section>

    </div>
    <!-- off-canvas -->

    <div class="off-canvas-content" data-off-canvas-content>

      <!-- start title-bar -->
      <div class="title-bar hide-for-medium">
        <div class="title-bar-left">
          <span class="title-bar-title">Title Bar</span>
        </div>
        <div class="title-bar-right">
          <button class="menu-icon" type="button" data-open="masthead" aria-expanded="false" aria-controls="masthead"></button>
        </div>
      </div>
      <!-- end title-bar -->

      <!-- start body content -->
      <main class="body-content">
        <p>Welcome, one and all.</p>
      </main>
      <!-- end body content -->

    </div>
    <!-- off-canvas-content -->

  </div>
  <!-- off-canvas-wrapper-inner -->
</div>
<!-- off-canvas-wrapper -->

我知道这可以通过一些隐藏/显示类轻松完成，但我宁愿不必为此复制菜单，这样效率太低了。有任何想法吗？感谢您的宝贵时间。

Answer 1

您可以尝试将您的汉堡位置设置为fixed 或absolute，或者在您的position-left 容器中添加另一个关闭按钮，并且将 offcanvas css 重写为类似的东西:

.position-left {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  overflow-y: auto;
}

.position-left.is-open~.off-canvas-content {
    transform: translateX(100%);
}

然后使用媒体查询调整您的菜单。