JavaScriptでアコーディオンタイプのメニュー
アコーディオンスクリプト解説
「accordian.pack.js」というライブラリを利用したアコーディオンスクリプトです。こちらよりダウンロードし<head>部分に挿入してください。
⇒
accordian.pack.js
<script type="text/javascript" src="/js/accordian.pack.js"></script>
BODY部分解説
<body onload="new Accordian('basic-accordian',5,'header_highlight');"> <div id="basic-accordian" > <div id="test-header" class="accordion_headings header_highlight" >メニュー１</div> <div id="test-content"> <div class="accordion_child"> メニュー１の内容 </div> </div> <div id="test1-header" class="accordion_headings" >メニュー２</div> <div id="test1-content"> <div class="accordion_child"> メニュー２の内容 </div> </div> <div id="test2-header" class="accordion_headings" >メニュー３</div> <div id="test2-content"> <div class="accordion_child"> メニュー３の内容 </div> </div> </div> </body>
スタイルシート解説
* { margin:0; padding:0; list-style:none; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin:10px; } #basic-accordian{ border:5px solid #EEE; padding:5px; width:450px; } .accordion_headings{ padding:5px; background:#99CC00; color:#FFFFFF; border:1px solid #FFF; cursor:pointer; font-weight:bold; } .accordion_headings:hover{ background:#00CCFF; } .accordion_child{ padding:15px; background:#EEE; } .header_highlight{ background:#00CCFF; }