Question

我已经使用了从左侧进来的非画布菜单而没有任何麻烦。在非画布菜单的底部有一个关闭按钮。反正是否有关闭画布菜单上的关闭按钮？

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

编辑：添加了一些示例代码：在实际网站上可能有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 -->

Answer 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)
}

离开菜单与粘滞关闭按钮

1 个答案: