解説
メニューが左右から現れるタイプのナビゲーションです。 この文章はSlidebarsというプラグインの 設置サンプルと解説になります。ファイルはSlidebarsでダウンロードしてください。 メニューボタンをクリックすると、メニューが開閉します。メニューボタンはactive時とoffのときで文字をCSSで変えられるよう、 CSSを改良しました。
メニュー部分のclass指定sb-style-pushは左右に寄せたい場合、 コンテンツ部分の上に重ねて対場合はsb-style-overlayを指定します。 左右に寄せたい場合sb-style-pushまずは右側からメニューが出るサンプルから、
HTML
<div id="sb-site"> <header> <h1>ドロワーメニューサンプル</h1> <ul class="navi"> <li class="sb-toggle-right"> <a href="#"></a> </li> </ul> </header> </div> <div class="sb-slidebar sb-right sb-style-push"> <h2>左メニューの内容</h2> <ul class="menu"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> </div>
CSS
下記のCSSを読み込ませる。
<link rel="stylesheet" href="slidebars.css">
メニューなどのCSS指定。
.sb-slidebar{ color:#fff; padding:0px; } header{ background:#ccc; height:40px; position:relative; } header h1{ text-align:center; color:#000; margin:0px; font-size:14px; line-height:40px; } .sb-toggle-right{ position:absolute; top:0; right:0; } .navi a{ color:#333; display:block; width:40px; height:40px; line-height:40px; text-align:center; text-decoration:none; font-weight:bolder; } .navi a:after{ content:"☰" } .sb-active .navi a:after{ content:"×" } .menu{ list-style:none; background:#666; } .menu li{ border-bottom:#CCC solid 1px; padding:10px; } .sb-slidebar h2{ font-size:14px; padding:0 0 0 10px; height:40px; line-height:40px; }
jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Slidebars --> <script src="slidebars.js"></script> <script> (function($) { $(document).ready(function() { $.slidebars(); }); }) (jQuery); </script>
続いては左側からメニューが出るサンプル。
HTML
<div id="sb-site"> <header> <h1>ドロワーメニューサンプル</h1> <ul class="navi"> <li class="sb-toggle-left"> <a href="#"></a> </li> </ul> </header> </div> <div class="sb-slidebar sb-left sb-style-push"> <h2>左メニューの内容</h2> <ul class="menu"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> </div>
CSS
下記のCSSを読み込ませる。
<link rel="stylesheet" href="slidebars.css">
メニューなどのCSS指定。
.sb-slidebar{ color:#fff; padding:0px; } header{ background:#ccc; height:40px; position:relative; } header h1{ text-align:center; color:#000; margin:0px; font-size:14px; line-height:40px; } .sb-toggle-left{ position:absolute; top:0; left:0; } .navi a{ color:#333; display:block; width:40px; height:40px; line-height:40px; text-align:center; text-decoration:none; font-weight:bolder; } .navi a:after{ content:"☰" } .sb-active .navi a:after{ content:"×" } .menu{ list-style:none; background:#666; } .menu li{ border-bottom:#CCC solid 1px; padding:10px; } .sb-slidebar h2{ font-size:14px; padding:0 0 0 10px; height:40px; line-height:40px; }
jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Slidebars --> <script src="slidebars.js"></script> <script> (function($) { $(document).ready(function() { $.slidebars(); }); }) (jQuery); </script>