東急ハンズのサイト
ウェルカムボードをどこで買おうか探しているうちに東急ハンズの｢ハンズネット｣に
辿り着きました。
そうすると、ウェルカムボード探しどころではなく、サイドナビがとても気になってしまい
ソースをのぞき、実際に１つだけ試してみました。
東急ハンズ｜JavaScript
本当のサイトもCSSがエンベットされていたので、そのまま記述することに。
HTML
＜div id="contents"＞
＜ul＞
＜li class="category_list">＜a href="#"＞＜img src="images/side_nav01.gif" alt="家具・寝具・収納" border="0" width="170" height="34" /＞＜/a>＜img name="img_1" src="images/side_nav01_off.gif" alt="家具・寝具・収納を開ける" onclick="expand(1, 1)" border="0" width="20" height="34" /＞＜/li＞
＜/ul＞
＜ul class="exp_hid" id="1"＞
＜li class="category_list2"＞＜a href="#" title="ソファ・ソファベッド"＞ソファ・ソファベッド＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="リラックスチェア・座椅子"＞リラックスチェア・座椅子＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="ダイニングテーブル">ダイニングテーブル＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="ローテーブル">ローテーブル＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="デスク"＞デスク＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="デスクチェア"＞デスクチェア＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="書棚"＞書棚＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="食器棚・レンジ台"＞食器棚・レンジ台＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="タンス・ワードローブ"＞タンス・ワードローブ＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="ハンガー・ハンガースタンド"＞ハンガー・ハンガースタンド
＜li class="category_list2"＞＜a href="#" title="収納用品"＞収納用品＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="収納ボックス"＞収納ボックス＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="キャビネット・テレビ台">キャビネット・テレビ台＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="コレクションケース・ディスプレイラック"＞コレクションケース・ディスプレイラック＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="ＣＤラック">ＣＤラック＜/a＞ ＜/li＞
＜li class="category_list2"＞＜a href="#" title="突っ張り棒・突っ張り収納">突っ張り棒・突っ張り収納＜/a>＜/li>
＜i class="category_list2"＞＜a href="#" title="傘立て">傘立て＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="ベッド">ベッド＜/a＞ ＜/li＞
＜li class="category_list2"＞＜a href="#" title="マットレス">マットレス＜/a＞＜/li＞
＜li class="category_list2"＞＜a href="#" title="寝具">寝具＜/a>＜/li>
＜lili class="category_list2"＞＜a href="#" title="鏡">鏡＜/a＞＜/li＞
＜/ul＞
＜/div＞
CSS
#contents {
margin: 20px;
width: 200px;
}
.category_list{
border-top:1px solid #999999;
}
.exp_hid{
display:none;
}
.exp{
display:block;
}
.category_list2{
background:url(images/icon_arrow01.gif) 0.8em 0.6em no-repeat;
padding-left:20px;
padding-top:3px;
padding-bottom:3px;
font-size:0.9em;
}
ul {
list-style-type: none;
}
以上の記述をするだけで、割と簡単にできました。
このサイトのリ･デザインに挑戦しようと思います！
