带有粘性关闭按钮的画布外菜单答案

【问题标题】：Off-canvas menu with sticky close button带有粘性关闭按钮的画布外菜单
【发布时间】：2018-02-20 23:21:49
【问题描述】：

我使用了从左侧进入的非画布菜单，没有任何问题。在画布外菜单的底部有一个关闭按钮。有没有办法让关闭画布菜单上的关闭按钮变粘？

对于用户来说，必须滚动到底部才能找到底部是很尴尬的（而且不明显），尤其是在长菜单上。

编辑：添加了一些示例代码：在实时站点上可能有 80 个链接（而不是 3 个），我希望带有关闭按钮的 div 始终在当前屏幕底部可见菜单可见。

<div class="row">
  <button type="button" class="button hide-for-large" data-toggle="filterCanvas">Filters</button>
</div>
<div class="row">
  <div class="off-canvas-wrapper">
    <div class="off-canvas off-canvas in-canvas-for-large position-left float-left" id="filterCanvas" data-off-canvas>
      <div class="sidebar">
        <p><strong>List of options</strong></p>
        <div class="clearfix">
          <a href="link1">Link1</a>
          <a href="link2">Link2</a>
          <a href="link3">Link3</a>
        </div>
        <div class="buttons hide-for-large text-center">
          <button class="button expanded" data-toggle="filterCanvas">Close</button>
        </div>
      </div>
    </div><!-- /filterCanvas -->

    <div class="off-canvas-content float-left" style="min-height: 300px;margin-left:15px;" data-off-canvas-content>
      <div class="view-content" style="margin-bottom: 20px;">
        Page content here
      </div>
    </div><!-- /off-canvas-content -->
  </div><!-- /off-canvas-wrapper -->
</div><!-- /row -->

【问题讨论】：

标签： zurb-foundation zurb-foundation-6

【解决方案1】：

如果你发布一些代码会更容易......

但是，话虽如此，您可以相对于视口定位打开/关闭按钮，这样您就可以将其固定在左下方，并在打开时进行调整。

如前所述，我们需要一些代码才能使其有用。

编辑：基于提供的代码示例

因此，鉴于您的示例，您可以执行如下简单的操作，并在打开/关闭菜单时切换“激活”类。

<!-- The below button doesnt need to be in a row, as will be fixed,
     the activated class will only be present when the sidebar is
     open and not by default -->

<button type="button"
        class="button hide-for-large off-canvas-button activated"
        data-toggle="filterCanvas">Filters</button>

<div class="row">
 <-- example code removed for brevity -->  
</div><!-- /off-canvas-content -->


.off-canvas-button {
    position: fixed;
    left: 2em; // change to desired space from edge
    bottom: 2em; // change to desired space from edge
}
.off-canvas-button.activated {
    left: 6em; // adjust to suit with of sidebar (example is 4em)
}

【讨论】：