Off-canvas 桌面菜单，手机手风琴菜单 [Foundation 6.3]

Question

使用 Foundation 6.3.1，我希望在桌面上显示我的关闭-canvas 菜单，在移动设备上显示手风琴菜单。例如

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

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

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%);
}

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

Off-canvas 桌面菜单，手机手风琴菜单 [Foundation 6.3]

Off-canvas Menu On Desktop, Accordion Menu on Mobile [Foundation 6.3]

jquery

css

zurb-foundation

zurb-foundation-6