webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

ul でアコーディオン

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--> 

f:id:ohta-felica:20160522162329j:plain

 

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;
}

f:id:ohta-felica:20160522172510j:plain

 jQuery

<script>
$(function(){
$('.menu').hide();
$('.category').on('click',function(){
if($(this).next('ul').css('display')=='none'){
$('.menu').slideUp();
$(this).next('ul').slideDown();
};
});
});
</script>

f:id:ohta-felica:20160522172723j:plain