[JS]画面の右や左から、ダイナミックにメニューをスライド表示できるjQueryプラグイン「PageSlide」｜jQueryプラグイン・ライブラリ

[JS]画面の右や左から、ダイナミックにメニューをスライド表示できるjQueryプラグイン「PageSlide」

スポンサード

スマホアプリで「ボタンをタッチして画面の左や右からメニューがスライド表示される」みたいない動きをよく見ます。

ブラウザの見えない所からダイナミックにコンテンツをスライド表示させる動きを、PCサイトでも実装可能にしてくれるjQueryプラグインが「PageSlide」です。

PageSlide のダウンロード

以下のページから PageSlide のファイルを一式ダウンロードします。

PageSlide

PageSlide プラグインの設置

jQuery ファイルと一緒に、query.pageslide.js ファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.pageslide.js"></script>

※上記ファイルを <head> に置いて動かない場合は、</body> 直前に設置します。

スライドの方向を調整する

スライドさせるコンテンツをhtml ファイルで別途用意し、そのページを左右どちらの方向からスライド表示させるか？を設定します。

「左」からスライド

以下のサンプルで、$("a.first").pageslide(); で指定したリンクをクリックすると、first.html のページを画面「左」側からスライドさせることができます。

<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 の指定となります。

<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" にしているので、モーダルウィンドウを画面「右」側からスライドさせることができます。

<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 をデザインに合わせて変更することもできます。