WebMD Ignite DX Engine

Offcanvas: Push 

<div class="px-4 py-5 my-5" style="text-align: center">
    <div class="col-lg-6 mx-auto">
        <h1>Off-Canvas Demo</h1>
        <p>Off-canvas demonstration showing push animation effect.</p>
        <a class="hgm-button hgm-offcanvas-trigger" href="#hgmOffCanvas" role="button" aria-controls="hgmOffCanvas">Open off-canvas menu</a>
    </div>
</div>

<div id="hgmOffCanvas" tabindex="-1" class="hgm-off-canvas" aria-labelledby="hgmOffCanvas" data-position="right" data-animation="push">
    <div class="hgm-off-canvas__wrapper">
        <div class="hgm-off-canvas__header">
            <a href="#" title="Close" class="hgm-off-canvas__close">Close</a>
        </div><!-- &__header -->
        <div class="hgm-off-canvas__body">
            <p>Content for the offcanvas goes here. You can place just about any component or custom elements here.</p>
            <p>Slide animation: the off-canvas slides out and pushes the site.</p>
        </div><!-- &__body -->
    </div><!-- &__wrapper -->
</div><!-- .hgm-off-canvas -->
 
<div class="px-4 py-5 my-5" style="text-align: center">
    <div class="col-lg-6 mx-auto">
        <h1>Off-Canvas Demo</h1>
        <p>Off-canvas demonstration showing push animation effect.</p>
        <a class="hgm-button hgm-offcanvas-trigger" href="#hgmOffCanvas" role="button" aria-controls="hgmOffCanvas">Open off-canvas menu</a>
    </div>
</div>


<div id="hgmOffCanvas" tabindex="-1" class="hgm-off-canvas" aria-labelledby="hgmOffCanvas" data-position="right" data-animation="push">
    <div class="hgm-off-canvas__wrapper">
        <div class="hgm-off-canvas__header">
            <a href="#" title="Close" class="hgm-off-canvas__close">Close</a>
        </div><!-- &__header -->
        <div class="hgm-off-canvas__body">
            <p>Content for the offcanvas goes here. You can place just about any component or custom elements here.</p>
            <p>Slide animation: the off-canvas slides out and pushes the site.</p>
        </div><!-- &__body -->
    </div><!-- &__wrapper -->
</div><!-- .hgm-off-canvas -->
 
/* No context defined. */

Customizaton via Data Attributes

Use data attributes directly on the off-canvas to change the visual behavior; the following data attributes are currently in use:

  • data-position - set direction the off-canvas slides from; options include “left” and “right”
  • data-animation - set the off-canvas animation style; default behavior slide; the “push” value slides the off-canvas from off-screen while simultaneously pushing the main contents of the page to the side
  • data-overlay-bg-hex - set the hex value of the background color of the overlay; takes a hexadecimal string value, hashtag optional
  • data-bg-alpha - set the transparency of the overlay; works in conjunction with the overlay-bg-hex attribute; value must be within the range of 1 to 99