読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】sidr.jsの使い方

facebookであるようなメニュー。

sider.jsをダウンロード

sidr.jsをダウンロードするとjquery.sidr.dark.cssjquery.sidr.light.cssの2種類ファイルがあるのでどちらかをheadタグ内に読み込ませる。

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


②bodyしめタグの直前にJavaScriptを読みこませる記述。下記コードは左サイド右サイドどちらも出現する。

<script src="js/jquery.sidr.min.js"></script>
<script>
$(document).ready(function() {
	$('#left-menu').sidr({
	name: 'sidr-left',
	side: 'left' // By default
	});
	$('#right-menu').sidr({
	name: 'sidr-right',
	side: 'right'
	});
});
</script>


③メニューのhtml記述

これは筆者はfooterしめタグに記述。

<div id="sidr-right">
<!-- rightcontent -->
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>


④押すとメニューが出現するボタンを表示させたいところにhtml記述

<a id="right-menu" href="#right-menu">右メニュー</a>

ここ、「右メニュー」というテキストは画像でももちろんok


【参考URL】
http://pannyatto.firebird.jp/archives/1360