横から出てくるJqueryスライドメニュー「PageSlide」

Yukimi Sato 6,232views 更新:2014年6月2日

jsはこちらからダウンロードできます。
http://srobbin.com/jquery-plugins/pageslide/

body閉じタグの直前にJqueryと一緒にjsを配置。
配布サイトでは1.8系でしたが、1.11でも動作は確認できました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/js/jquery.pageslide.min.js"></script>
<script>
$(".leftSlide").pageslide();
$(".rightSlide").pageslide({ direction: "left", modal: true });
</script>

ヘッダーにはCSSを読み込んでください。

<link rel="stylesheet" href="/css/jquery.pageslide.css">

あとは配布サイトにある通りのHTMLを置いてテストします。

<a href="#modal" class="rightSlide">Link text</a>
<div id="modal" style="display:none">
<h2>Modal</h2>
<a href="javascript:$.pageslide.close()">Close</a>
</div>

無事に右側からスライドして出てくれば問題ありません。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません