jQuery 横アコーディオンメニュー
水平のアコーディオン(開閉式)メニューを生成
jQuery
$(function () {
// デフォルトで1番目を開くようにする
// $('ul').eq(0).show();
$('span').click(function() {
// メニュー表示/非表示
$(this).next('ul').animate({
width : 'toggle'
}, 'normal')
});
});
CSS
span {
float: left;
cursor: pointer;
}
ul {
display: none;
float: left;
}
li {
width: 80px;
}
HTML
<span>メニュー 1</span>
<ul>
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
<span>メニュー 2</span>
<ul>
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
<span>メニュー 3</span>
<ul>
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>
サンプル
