スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る

スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作るサンプル Facebookをはじめスマートフォンサイトやアプリでは、メニューをタップするとサイドからにゅっと出てくるメニューが導入されて久しいです。
今回はSidr - A jQuery plugin for creating side menusを利用して、にゅっと出してみましょう。

使用方法 Sidrからファイル一式をダウンロード。
<link rel="stylesheet" href="jquery.sidr.dark.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.sidr.min.js"></script>
<script>
$(document).ready(function() {
$('#id名').sidr();
});
</script>

にゅっと表示させたいメニューの中身を記述します。
<div id="sidr">
<ul>
<li><a href="#">List 1</a></li>
<li"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>

最後にメニューを表示させるためのボタン的なやつ書きます。
<a id="id名" href="#sidr">いでよメニュー!</a>
オプションとして右に出せるsideと、表示速度調整するspeedがあります。
またメニューのデザインはダウンロードされるdarkかlightいずれかのcssを読みこめば変わります。

スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作るサンプル

sponsors

「スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る」をシェアする

記事作成:
記事URL:

TOP > > > スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る