[ jQuery ] アコーディオンパネルその2

f:id:suge1040:20140425150904j:plain

<body>
<div id="container">
<ul class="navi">
<li>
<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>
<li><a href="#">靴</a></li>
<li><a href="#">アクセサリー</a></li>
</ul>
</li>

<li>
<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>
<li><a href="#">チェア</a></li>
<li><a href="#">証明</a></li>
</ul>
</li>

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

<li>
<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>
</li>
</ul>
</div>
</body>

body {
background: #FFF;
font-family:
    "Hiragino Kaku Gothic Pro N",
    Meiryo,
    sans-serif;
font-size: 14px;
color: #164158;
}
#container {
margin: 50px;
}
ul.navi {
width: 220px;
margin: 0px;
}
ul.navi, ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
div.category {
margin: 2px;
padding: 0 1em;
height: 40px;
line-height: 40px;
background-color: #B9DDE8;
cursor: pointer;
}
ul.menu a {
display: block;
height: 35px;
line-height: 35px;
color: #164158;
padding: 1em;
}
ul.menu li {
background-color: #F2F9FB;
}
a {
text-decoration: none;
}

Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。