アコーディオンメニュー[JQ]
演習課題のアコーディオンメニューになります
HTML↓
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンメニュー</title> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block;} </style> <link href="jq01.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="container"> <header> <h1>キッチンクラブ</h1> <p><a href="#">お問い合わせ</a></p> <div id="nav"> <ul> <li> <div class="category"><a href="#" class="top">TOP</a></div> </li> <li> <div class="category"><span class="kitchen">Kitchenware Club</span></div> <ul class="menu"> <li><a href="#">リンク項目その１</a></li> <li><a href="#">リンク項目その２</a></li> </ul> </li> <li> <div class="category"><span class="seihin">製品情報</span></div> <ul class="menu"> <li><a href="#">リンク項目その１</a></li> <li><a href="#">リンク項目その２</a></li> </ul> </li> <li> <div class="category"><span class="canpany">会社概要</span></div> <ul class="menu"> <li><a href="#">リンク項目その１</a></li> <li><a href="#">リンク項目その２</a></li> </ul> </li> <li> <div class="category"><span class="shop">取扱ショップ一覧</span></div> <ul class="menu"> <li><a href="#">リンク項目その１</a></li> <li><a href="#">リンク項目その２</a></li> </ul> </li> </ul> </div><!-- nav--> <div id="bill"> <img src="img/vis01.jpg" width="552" height="230" alt="キッチンライフ"> </div><!-- bill--> </header> <div id="wrapper"> <div id="content"> <h3><img src="img/newProduct.gif" width="62" height="15" alt="新着情報"></h3> <dl> <dt class="japan">Kitchenware Clubオリジナル</dt> <dd class="product">厚手ガラスタンブラー・小 約280ml</dd> <dd>梨地の丈夫な厚手ガラスです。</dd> <dd>割れにくいガラスを使用しています。</dd> <dd>これからの季節にピッタリのタンブラーです。</dd> </dl> <p class="photo"><img src="img/vis02.jpg" width="158" height="128" alt="ガラスタンブラー"></p> <dl> <dt class="japan">山崎木工</dt> <dd class="product">木製 スプーン 39×155mm</dd> <dd>柔らかな形状の木製スプーンです。</dd> <dd>何通りもの試作品を作り、その中から</dd> <dd>最も手になじむ物を製品化しました。</dd> </dl> <p class="photo"><img src="img/vis03.jpg" width="158" height="128" alt="スプーン"></p> <dl> <dt class="germany">WAECHTERSBACH</dt> <dd class="product">ステンレスマルチトング 長さ23cm</dd> <dd>ドイツの老舗食器メーカー・べヒタフバッハから</dd> <dd>シンプルなステンレストングの入荷です。</dd> <dd>軽くてつかみやすい設計になっています。</dd> </dl> <p class="photo"><img src="img/vis04.jpg" width="158" height="128" alt="トング"></p> <p class="info"><a href="#">以前の新着情報を見る</a></p> </div><!-- content--> <div id="news"> <h3><img src="img/news.gif" width="62" height="15" alt="更新情報"></h3> <dl> <dt>2013.7.2</dt> <dd><a href="#">夏の新作商品を5点追加しました。</a></dd> </dl> <dl> <dt>2013.6.22</dt> <dd><a href="#">日本中の食器が集まるイベント"日本食器展示会"にキッチンクラブも出品しました。</a></dd> </dl> <dl> <dt>2013.6.12</dt> <dd><a href="#">取扱ショップ情報を更新しました。</a></dd> </dl> </div><!-- news--> </div><!-- wrapper--> <footer> <div id="footer_menu"> <ul> <li class="site"><a href="#">サイトマップ</a></li> <li class="site"><a href="#">プライバシーポリシー</a></li> <li><a href="#">アクセシビリティポリシー</a></li> </ul> </div><!-- footer_menu--> <p><small>Copyright © 2013 キッチンクラブ All Rights Reserved.</small></p> </footer> </div><!-- container--> <script> $(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $('ul.menu').slideUp(); if($("+ul",this).css("display")=="none"){ $("+ul",this).slideDown("slow"); } }); $('li:first-child').css('margin-top','12px'); $('li:last-child').css('margin-bottom','10px'); }); </script> </body> </html>
CSS↓
@charset "utf-8"; /* リセット */ body,ul,li,p,h1,h2,h3,img,div,class,dl,dt,dd,a{ margin:0; padding:0; } ul{ list-style-type:none; } a{ text-decoration:none; } img{ vertical-align:bottom; } /*全体*/ body{ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height:1.5; font-size:14px; } #container{ width:806px; height:auto; margin:0 auto; border-top:#FF0000 solid 5px; background:url(img/bg01.gif) repeat-y; } /*ヘッダー*/ header{ width:800px; height:400px; overflow:hidden; position:relative; background:url(img/line01.gif) no-repeat center 340px; } header h1{ width: 357px; height: 35px; display: block; white-space: nowrap; background:url(img/ci.gif) no-repeat; text-indent: 100%; margin:20px 0 10px 30px; } header p{ text-decoration:underline; padding-left:35px; background:url(img/ic01.gif) no-repeat left 3px; position:absolute; left:650px; top: 13px; letter-spacing:2px; } /*アコーディオン*/ #nav{ width:173px; height:auto; margin-left:30px; float:left; } .category{ cursor:pointer; } .menu{ background:url(img/bg02.gif); text-decoration:underline; text-align:center; line-height:2.0; } .top{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav01.gif) no-repeat; text-indent: 100%; overflow: hidden; border:2px solid #E1E1E1; } .top:hover,.top:active{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav01_o.gif) no-repeat; text-indent: 100%; overflow: hidden; } .kitchen{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav02.gif) no-repeat; text-indent: 100%; overflow: hidden; border:2px solid #E1E1E1; margin-top:-2px; } .kitchen:hover,.kitchen:active{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav02_o.gif) no-repeat; text-indent: 100%; overflow: hidden; } .seihin{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav03.gif) no-repeat; text-indent: 100%; overflow: hidden; border:2px solid #E1E1E1; margin-top:-2px; } .seihin:hover,.seihin:active{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav03_o.gif) no-repeat; text-indent: 100%; overflow: hidden; } .canpany{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav04.gif) no-repeat; text-indent: 100%; overflow: hidden; border:2px solid #E1E1E1; margin-top:-2px; } .canpany:hover,.canpany:active{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav04_o.gif) no-repeat; text-indent: 100%; overflow: hidden; } .shop{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav05.gif) no-repeat; text-indent: 100%; overflow: hidden; border:2px solid #E1E1E1; margin-top:-2px; } .shop:hover,.shop:active{ cursor:pointer; width: 173px; height: 32px; display: block; white-space: nowrap; background:url(img/gnav05_o.gif) no-repeat; text-indent: 100%; overflow: hidden; } /*ビルボード*/ #bill{ width:552px; height:230px; float:left; margin:13px 0 0 20px; } /*コンテンツ*/ #wrapper{ width:800px; height:auto; overflow:hidden; } /*新着情報*/ #content{ width:480px; height:auto; float:right; margin-right:15px; overflow:hidden; } #content h3{ margin-bottom:15px; background:url(img/bg02.gif); border-left:solid 4px #ff0000; padding:5px 0 5px 10px; margin-top:-10px; } .photo{ border:solid 2px #F7F5F6; width:158px; height:128px; margin-bottom:15px; } #content dl{ width:300px; float:right; } .japan{ color:#6A593B; font-weight:bold; background:url(img/ic03.gif) no-repeat right 2px; margin-bottom:3px; } .germany{ color:#6A593B; font-weight:bold; background:url(img/ic04.gif) no-repeat right 2px; margin-bottom:3px; } .product{ font-size:12px; border-bottom:#EBDACC solid 3px; padding-bottom:2px; margin-bottom:5px; } .info{ text-align:right; background:url(img/ic02.gif) no-repeat 320px 8px #F0F0F0; padding:3px 5px 3px 0; margin-bottom:80px; } /*更新情報*/ #news{ width:260px; height:auto; float:left; margin-left:20px; } #news h3{ background:url(img/bg02.gif) ; border-left:solid 4px #FF0000; padding:5px 0 5px 10px; margin:-10px 0 15px 0; } #news dt{ background:url(img/ic02.gif) no-repeat left 8px; padding-left:10px; margin-bottom:5px; } #news dd{ text-decoration:underline; border-bottom:2px solid #F7F5F6; padding:0 0 7px 10px; margin-bottom:10px; } /*フッター*/ footer{ width:806px; height:59px; } footer p{ background:url(img/bg03.gif) no-repeat; text-align:center; line-height:4.0; height:65px; } /*フッター上部メニュー*/ #footer_menu ul{ text-align:center; margin-bottom:10px; } #footer_menu li{ display:inline; letter-spacing:2px; } .site{ border-right:3px solid #DBE3E7; margin-right:10px; padding-right:10px; }
↓
