解説
メニューが左右から現れるタイプのナビゲーションです。 この文章は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>