解説
スマホサイトでも使える汎用性のあるタブメニューです。 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>
