HTML

<div class="aside">

    <div class="aside-header">

        jQuery asidebar

        <span class="close" data-dismiss="aside" aria-hidden="true">×</span>

    </div>

    <div class="aside-contents">

     </div>

</div>

<div class="aside-backdrop"></div>

CSS

.aside{min-width:300px;width:15%;position:fixed;top:0;right:0;bottom:0;background-color:#fafafa;font-family:Helvetica,Arial,sans-serif;z-index:10000;width:0;min-width:0;overflow:hidden;transition:.35s width ease,0.35s min-width ease}

.aside .aside-header{background-color:#3498db;padding:1em;padding-left:.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;padding-bottom:1em}

.aside.in{width:15%;min-width:300px;border-left:1px solid #333;box-shadow:0 0 15px 5px rgba(0,0,0,0.5);}

.aside-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background-color:#000;transition:.2s opacity ease;opacity:0;display:none}

.aside-backdrop.in{display:block;opacity:.5}body{background:#EEE;font-family:'Roboto'}

JS

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;

}