html
- ここでのマークアップがすべてです。
- クラス名の付け方にもセンスが必要です。
<div class="accordion">
<ul class="nav"><div class="category">家具・インテリア</div>
<ul class="menu">
<li><a href="#">ソファ</a></li>
<li><a href="#">ベッド</a></li>
<li><a href="#">テーブル</a></li>
<li><a href="#">チェア</a></li>
</ul><div class="category">ステーショナリー</div>
<ul class="menu">
<li><a href="#">ペン・鉛筆</a></li>
<li><a href="#">ノート</a></li>
<li><a href="#">ファイル</a></li>
<li><a href="#">付箋</a></li>
</ul><div class="category">生活雑貨</div>
<ul class="menu">
<li><a href="#">キッチン用品</a></li>
<li><a href="#">掃除・洗濯用品</a></li>
<li><a href="#">バス・トイレ用品</a></li>
<li><a href="#">その他</a></li>
</ul></ul><!--nav-->
</div><!--accordion-->
css
- resetは除いた状態
.accordion{
width: 600px;
margin: 0 auto;
padding-top: 32px;
}
ul.nav{
overflow: hidden;
}
li.nav{
width: 200px;
float: left;
text-align: center;
}
.category{
height: 24px;
font-weight: bold;
padding-top :8px;
font-size: 16px;
border: 1px solid #09F;
background: #039;
color: white;
cursor: pointer;
}
.menu li{
height: 24px;
background: #AFF;
border: 1px solid #09F;
padding-top: 8px;
}
jQuery
<script>
$(function(){
$('.menu').hide();
$('.category').on('click',function(){
if($(this).next('ul').css('display')=='none'){
$('.menu').slideUp();
$(this).next('ul').slideDown();
};
});
});
</script>
