<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a href="#" onclick="$('.aside').asidebar('open')">Open aside</a> <div class="aside"> <div class="aside-header"> jQuery asidebar <span class="close" data-dismiss="aside" aria-hidden="true">×</span> </div> <div class="aside-contents"> <h4>This is an off-canvas menu</h4> <p>Aside contents</p> </div> </div> <div class="aside-backdrop"></div>

.aside { min-width: 350px; width: 15%; position: fixed; top: 0; left: 0; bottom: 0; background-color: #fafafa; font-family: Helvetica, Arial, sans-serif; border-right: 1px solid #333; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); z-index: 2000; width: 0px; min-width: 0px; overflow: hidden; transition: 0.35s width ease, 0.35s min-width ease; } .aside .aside-header { background-color: #3498DB; padding: 1em; padding-left: 0.5em; border-bottom: 3px solid #2980B9; font-size: 1.2em; color: #fff; } .aside .aside-header .close { float: right; cursor: pointer; } .aside .aside-contents { padding: 0.5em; padding-bottom: 1em; } .aside.in { width: 15%; min-width: 350px; } .aside-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; transition: 0.2s opacity ease; opacity: 0; display: none; } .aside-backdrop.in { display: block; opacity: 0.5; }

function injectAsidebar(jQuery) { jQuery.fn.asidebar = function asidebar(status) { switch (status) { case "open": var that = this; // fade in backdrop if ($(".aside-backdrop").length === 0) { $("body").append("<div class='aside-backdrop'></div>"); } $(".aside-backdrop").addClass("in"); function close() { $(that).asidebar.apply(that, ["close"]); } // slide in asidebar $(this).addClass("in"); $(this).find("[data-dismiss=aside], [data-dismiss=asidebar]").on('click', close); $(".aside-backdrop").on('click', close); break; case "close": // fade in backdrop if ($(".aside-backdrop.in").length > 0) { $(".aside-backdrop").removeClass("in"); } // slide in asidebar $(this).removeClass("in"); break; case "toggle": if($(this).attr("class").split(' ').indexOf('in') > -1) { $(this).asidebar("close"); } else { $(this).asidebar("open"); } break; } } } // support browser and node if (typeof jQuery !== "undefined") { injectAsidebar(jQuery); } else if (typeof module !== "undefined" && module.exports) { module.exports = injectAsidebar; }