解説
スマホサイトでも使える汎用性のあるタブメニューです。 jqueryとcssを使い簡単にタブメニューが実装できます。 タブをクリックすると下のコンテンツ内容が変わります。 タブはアクティブ状態が分かるようにclassがつくようになっています。
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
#tab ul{ width:100%; } #tab li{ float:left; display:block; width:33.3333%; } #tab li a{ display:block; width:100%; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; border-bottom:none; background:#CCC; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #tab li a.active{ background:#fff; } #tabContents div{ width:100%; height:300px; padding:20px; border:#ccc 1px solid; border-top:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #contents1{ } #contents2{ display:none; } #contents3{ display:none; }
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>