Bootstrapにサイドメニュー(スライドイン)を追加する方法
手前ミソですが。。。
本記事を書いてからしばらく経ちましたが、この辺りに興味がある方が多いようで、引き続き高アクセスが続いています。
BootstrapもVer3.xがリリースされた事から、もっと簡単にスライドメニューを追加できる専用プラグインを作成しましたので、良ければそちらもご参照下さい。
前回：「Sidrの基本的な使い方」へ
Bootstrapへの最適化
前回終わりのサンプルを見て頂くとわかると思いますが、メニュー用に用意したHTML要素が「#sidr」というid名でコピーされ、画面左からスライドインしてくる仕様です。
なので、このまま使う場合には、用意したメニューリスト(サンプルでは「#navigation」)を別途cssで非表示にしてあげる必要があります。Bootstrapに組み込む場合は初期状態で非表示になっているため必要ありません。
※id名を変えずに「#sidr」とした場合は、コピーされずにそのまま利用されます。
#navigation {
display: none;
}
Bootstrapのテンプレートを出来るだけいじらずに実現したいので、サンプルで「#navigation」としたところを「.navbar .container .nav-collapse.collapse」として、上からスライドダウンしてくるメニューを直接コピーしてもらうことにします。
また、トリガーのボタンはデフォルトのボタン「.navbar .container .btn.btn-navbar」を活用するものとします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrapデフォルトテンプレート</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
// デフォルトボタン(ブラウザ幅768px未満で表示)
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand">Project name</a>
<div class="nav-collapse collapse"> // 上部メニュー
<ul class="nav">
<li class="active"><a>Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a>Separated link</a></li>
<li><a>One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
～中略～
<script type="text/javascript" charset="UTF-8">
$(document).ready(function() {
$('.navbar .container .btn.btn-navbar').sidr({
source: '.navbar .container .nav-collapse.collapse'
});
});
</script>
</body>
</html>
ここまでで右上のボタンをクリックすると、上からのメニューと左からのメニューが同時に開きます。(下記右画像)
これは、Bootstrapのデフォルトスクリプトの中で処理しているもので、キーはボタンに設定された「data-toggle="collapse"」と「data-target=".nav-collapse"」になります。
なので、これらを削除してしまうことで、デフォルトの上からのスライドダウンを動かなくしてしまう事が可能です。
<script type="text/javascript" charset="UTF-8">
$(document).ready(function() {
$('.navbar .container .btn.btn-navbar')
.attr('data-toggle', '')
.attr('data-target', '')
.sidr({
source: '.navbar .container .nav-collapse.collapse'
});
});
});
</script>
最後に、メニューを開いた時、ボタンが右上にあると、画面からはみ出し、メニューを閉じることが出来ませんので、左上に表示するように変更します。
.navbar .container .btn.btn-navbar {
float: left !important;
}
これで、動作部に関しては完璧です。見た目に関しては、サイトの見た目に合わせてCSSで個別にカスタマイズしてください。
最終完成サンプル オンラインデモ