スマホサイトの制作時にFacebookのような横から開くメニューを実装したので覚書。
jQueryプラグイン「Sidr」が比較的簡単に実装できました。
ボタンクリックで左右からメニューが展開します。
サンプルデモ・ダウンロードはこちら
レスポンシブウェブデザインのような横幅が可変するサイトでも利用できます。
とっても便利なのでおすすめです。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>レスポンシブメニュープラグイン「Sidr」スマホやタブレット画面で、Facebookの様な画面横から展開するスライドメニューを実装できます。</title>
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/jquery.sidr.min.js"></script>
<script src="lib/jquery-loader.js"></script>
<link rel="stylesheet" href="lib/jquery.sidr.dark.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
padding: 30px 0;
background: #ccc;
}
#header,
#content,
#menu {
width: 90%;
margin: 0 auto 20px;
list-style: none;
}
</style>
</head>
<body>
<header id="header">
<h1>Sidr デモ</h1>
</header>
<div id="content">
<p>スマホやタブレット画面で、Facebookの様な画面横から展開するスライドメニューを実装できます。</p>
</div>
<ul id="menu">
<li><a class="simple-menu" href="#sidr">シンプル</a></li>
<li><a class="left-menu" href="#sidr-left">左固定</a></li>
<li><a class="right-menu" href="#sidr-right">右固定</a></li>
</ul>
<div id="sidr">
<ul>
<li><a href="#">リスト1</a></li>
<li class="active"><a href="#">リスト2</a></li>
<li><a href="#">リスト3</a></li>
<li><a class="simple-menu" href="#sidr">閉じる</a></li>
</ul>
</div>
<div id="sidr-left">
<ul>
<li><a href="#">左固定</a></li>
<li><a class="left-menu" href="#sidr-left">閉じる</a></li>
</ul>
</div>
<div id="sidr-right">
<ul>
<li><a href="#">右固定</a></li>
<li><a class="right-menu" href="#sidr-right">閉じる</a></li>
</ul>
</div>
<script>
$(function() {
$('.simple-menu').sidr();
});
$(function() {
$('.left-menu').sidr({
name: 'sidr-left',
side: 'left'
});
});
$(function() {
$('.right-menu').sidr({
name: 'sidr-right',
side: 'right'
});
});
</script>
</body>
</html>