ハンバーガーメニューの実装もこれなら簡単！パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js
Post on:2018年7月23日
sponsors
Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。
実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。
Pushbar.jsのデモ
デモでは、ドロワーが軽快にスライドします。
左・右・上・下からのスライドが用意されています。
オーバーレイやブラーはオプションで簡単に設定可能。
デモページ: ドロワーを左からスライド
デモページ: ドロワーを右からスライド
デモページ: ドロワーを上からスライド
デモページ: ドロワーを下からスライド
Pushbar.jsの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link rel="stylesheet" type="text/css" href="pushbar/pushbar.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="pushbar/pushbar.js"></script> </body> |
Step 2: HTML
ドロワーはdiv要素で実装し、classに「pushbar」を与え、方向「from_left」を指定します。data-pushbar-id属性でidを与え、そのidに対応するようにドロワーを開くボタンにdata-pushbar-target属性を与えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div data-pushbar-id="mypushbar1" class="pushbar from_left"> ドロワー1のコンテンツ <button data-pushbar-close>閉じる</button> </div> <div data-pushbar-id="mypushbar2" class="pushbar from_bottom"> ドロワー2のコンテンツ <button data-pushbar-close>閉じる</button> </div> <div class="pushbar_main_content"> メインのコンテンツ <button data-pushbar-target="mypushbar1">ドロワー1を開く</button> <button data-pushbar-target="mypushbar2">ドロワー2を開く</button> </div> |
Step 3: JavaScript
スクリプトを初期化して、実行します。
|
1 2 3 4 5 6 |
<script type="text/javascript"> var pushbar = new Pushbar({ blur:true, overlay:true, }); </script> |
スクリプトのオプションでは、ブラーとオーバーレイを設定できます。
sponsors
