CODEWITHSUNDEEP
zurb-foundationzurb-foundation-6
Programming123
Programming123

Reputation: 302

Off-canvas menu with sticky close button

I've made use of an off-canvas menu that comes in from the left without any trouble. At the bottom of the off-canvas menu there's a close button. Is there anyway to make the close button on an off canvas menu sticky?

For users, it is awkward (and not obvious) to have to scroll to the bottom to find the bottom, especially on long menus.

EDIT: Added some sample code: On the live site there might be 80 links (rather than 3), and I want the div with the close button to always be visible at the bottom of the current screen when the off-canvas menu is visible.

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

Upvotes: 0

Views: 737

Answers (1)

j5Dev
j5Dev

Reputation: 2042

Would be easier if you posted some code...

But, saying that, you could position the open/close button relative to the viewport, that way you could just have it fixed to the bottom left, and just adjust it when open.

As said, we would need some code though for this to be useful.

Edit: Based upon code sample provided

So given your example, you could do something as simple as the below, and just toggle the 'activated' class when opening/closing the menu.

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

Upvotes: 0

Related Questions