ハンバーガーメニューの実装もこれなら簡単!パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js

Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。

実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。

デモのアニメーション

Pushbar.js -GitHub

Pushbar.jsのデモ

デモでは、ドロワーが軽快にスライドします。

デモのキャプチャ

デモページ

左・右・上・下からのスライドが用意されています。
オーバーレイやブラーはオプションで簡単に設定可能。

デモのアニメーション

デモページ: ドロワーを左からスライド

デモのアニメーション

デモページ: ドロワーを右からスライド

デモのアニメーション

デモページ: ドロワーを上からスライド

デモのアニメーション

デモページ: ドロワーを下からスライド

Pushbar.jsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

Step 2: HTML

ドロワーはdiv要素で実装し、classに「pushbar」を与え、方向「from_left」を指定します。data-pushbar-id属性でidを与え、そのidに対応するようにドロワーを開くボタンにdata-pushbar-target属性を与えます。

Step 3: JavaScript

スクリプトを初期化して、実行します。

スクリプトのオプションでは、ブラーとオーバーレイを設定できます。

sponsors

top of page

©2018 coliss