Question

使用Foundation 6.3.1，我想在桌面上显示我的非画布菜单，并在手机上显示手风琴菜单。 e.g。

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

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

桌面上的幕外菜单，手机上的手风琴菜单[基础6.3]

1 个答案: