スマホでよく見るかんじの横からニュルっとメニューがでてくるjQueryプラグイン「Sidr」

スマホのGoogleとかYoutubeとかfacebookでよく見るアレを簡単に設置できる、

結構みんな使ってるやつの自分用メモ。

Sidr – A jQuery plugin for creating side menusにアクセス → 「Download」クリック。

ダウンロードファイル解凍して css と js アップロード → head 内で読み込む。

htmlブチこむ。

CSS

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

js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.sidr.min.js"></script>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>

HTML

<a id="simple-menu" href="#sidr">Menu</a>
<div id="sidr">
<ul>
<li><a href="#">Menu 1</a></li>
<li class="active"><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>

備考 右バージョンのメニュー

js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.sidr.min.js"></script>
<script>
$(document).ready(function() {
	$('#right-menu').sidr({
	name: 'sidr-right',
	side: 'right'
	});
});
</script>

HTML

<a id="right-menu" href="#right-menu">Menu</a>
<div id="sidr-right">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>