スマホアプリで「ボタンをタッチして画面の左や右からメニューがスライド表示される」みたいない動きをよく見ます。
ブラウザの見えない所からダイナミックにコンテンツをスライド表示させる動きを、PCサイトでも実装可能にしてくれるjQueryプラグインがPageSlideです。
PageSlide のダウンロード
以下のページからPageSlide のファイルを一式ダウンロードします。http://srobbin.com/jquery-plugins/pageslide/
PageSlide プラグインの設置
jQuery ファイルと一緒にquery.pageslide.jsファイルを設置します。|
1 2 |
<script src="./jquery.min.js"></script> <script src="./jquery.pageslide.js"></script> |
※上記ファイルを<head>に置いて動かない場合は、</body>直前に設置します。
スライドの方向を調整する
スライドさせるコンテンツをhtml ファイルで別途用意し、そのページを左右どちらの方向からスライド表示させるか？を設定します。「左」からスライド
以下のサンプルで、$("a.first").pageslide();で指定したリンクをクリックすると、first.html のページを画面「左」側からスライドさせることができます。
|
1 2 3 4 5 6 7 8 9 |
<a href="first.html" class="first"> クリックして画面「左」から first.html のページがスライド </a> <script src="./jquery.min.js"></script> <script src="./jquery.pageslide.min.js"></script> <script> $("a.first").pageslide(); </script> |
「右」からスライド
今度はオプションにdirection: "left"を指定することで、second.html のページを画面「右」側からスライドさせることができます。※directionは「方向」なので、右からスライド表示させる場合は「右から左方向へ」という意味で、ここでは
leftの指定となります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<a href="second.html" class="second"> クリックして画面「右」から second.html のページがスライド </a> <script src="./jquery.min.js"></script> <script src="./jquery.pageslide.min.js"></script> <script> $("a.second").pageslide({ direction: "left" }); </script> |
Modal オプションを利用
オプションとして、modal:trueを指定することもできます。direction: "left"にしているので、モーダルウィンドウを画面「右」側からスライドさせることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<a href="#modal" class="modal"> クリックして画面「右」からモーダルウィンドウをスライド </a> <!--▽Modal--> <div id="modal" style="display:none"> <h2>モーダルウィンドウ</h2> <p>「閉じる」ボタン付きで、モーダルウィンドウをスライド</p> <a href="javascript:$.pageslide.close()">Close</a> </div> <!--▲Modale--> <script src="./jquery.min.js"></script> <script src="./jquery.pageslide.min.js"></script> <script> $(".modal").pageslide({ direction: "left", modal: true }); </script> |
<a href=”javascript:$.pageslide.close()”>Close</a> のような「閉じる」ボタンも設置することができます。
スライドメニューのデザインや幅の変更
スライドメニューの幅値は、jquery.pageslide.css ファイル内に記載されているwidth:260pxの値を変更します。また、CSS ファイル内の
background-color: #333やcolor: #FFFをデザインに合わせて変更することもできます。サンプル
スライドのデモを以下のページに用意しています。PageSlide によるスライドのデモ
コメント