Javascript

【Javascript】スライド式のドロワーメニューを作成するための軽量のjavascriptプラグインPushbar

August 19, 2018
Pushbar.js

Pushbar.jsは、スライド式のドロワーメニューを作成するための軽量のjavascriptプラグインです。

Installation

<script type="text/javascript">
  var pushbar = new Pushbar({
        blur:true,
        overlay:true,
      });
</script>

Example HTML

  <div data-pushbar-id="mypushbar1" class="pushbar from_left">
      Push bar content 1

      <button data-pushbar-close>Close</button>
  </div>

  <div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
      Push bar content 2

      <button data-pushbar-close>Close</button>
  </div>

  <div class="pushbar_main_content">
      Main content of the page

      <button data-pushbar-target="mypushbar1">
      Open my pushbar 1
      </button>

      <button data-pushbar-target="mypushbar2">
      Open my pushbar 2
      </button>
  </div>

Options

  1. blur
  2. overlay