TECH
Vol.45
N.T.
すぐに使える！アコーディオンメニューの実装
はじめに
本TIPSではjQueryを使用しているため、jQuery公式サイトからソースをダウンロードするか、googleなどが配信しているCDNサービスHTMLに読み込んでください。
jQuery公式サイト
CDNサービス
シンプルな実装
シンプルなアコーディオンメニューを実装していきます。
アコーディオン1
アコーディオン2
アコーディオン3
html
<div class="a_container">
<div class="a_item">demo</div>
<div class="a_contents">
<p>アコーディオン1</p>
<p>アコーディオン2</p>
<p>アコーディオン3</p>
</div>
</div>
css
.a_container{
width:500px;
margin:50px auto;
}
.a_item{
background:#70f9a1;
color:#fff;
text-align:center;
padding:10px;
cursor:pointer;
}
.a_contents{
display:none;
padding:10px;
height:110px;
border:solid 1px #d6dddf;
}
.a_contents p{
margin:10px 0;
border-bottom:dashed 1px #d6dddf;
}
jQuery
ワンポイント
リッチな実装
シンプルなアコーディオンメニューを元に機能を増やし、リッチな実装にしていきます。
増やしていく機能を下記にまとめました。
- マウスオーバーしたとき、色を変化させる
- クリックしたとき、選択中のものに色をつける
- 一方が開いていて、開いていない方のアコーディオンをクリックしたとき、
開いているアコーディオンを閉じる - クリックし、選択したものの本文を遅れてフェードインさせる
- 右側の矢印に開閉が分かるようなアニメーションをつける
html
<div class="a_container">
<div class="a_item_r">demo</div>
<div class="a_contents_r">
<p>アコーディオン1</p>
<p>アコーディオン2</p>
<p>アコーディオン3</p>
</div>
<div class="a_item_r">demo</div>
<div class="a_contents_r">
<p>アコーディオン1</p>
<p>アコーディオン2</p>
<p>アコーディオン3</p>
</div>
</div>
css
jQuery
・マウスオーバーしたとき、色を変化させる
・クリックしたとき、選択中のものに色をつける
・一方が開いていて、開いていない方のアコーディオンをクリックしたとき、開いているアコーディオンを閉じる
・クリックし、選択したものの本文を遅れてフェードインさせる
・右側の矢印に開閉が分かるようなアニメーションをつける
ワンポイント
CSS3での実装
これまではHTML+CSS+jQueryで実装を行いました。実はCSSのみでの実装も可能なのです。
CSSのみで実装を行うためにはフォームの構成部品であるチェックボックスのON・OFFを利用します。
- アコーディオン1
- アコーディオン2
- アコーディオン3
html
<div class="a_container">
<label for="Panel1">demo<label>
<input type="checkbox" id="Panel1" class="open_close_c"/>
<ul>
<li>アコーディオン1<li>
<li>アコーディオン2<li>
<li>アコーディオン3<li>
<ul>
<div>
css
label {
display: block;
background-color: #70f9a1;
color: #fff; padding: 10px;
text-align:center;
}
label:hover{
background-color:#6aec99;
}
input[type="checkbox"].open_close_c{
display: none;
}
ul{
border:solid 1px #d6dddf;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
margin: 0;
padding: 0;
list-style: none;
}
li{
margin:10px 0;
color:#666666;
border-bottom:dashed 1px #d6dddf;
}
input[type="checkbox"].open_close_c + ul{
height: 0;
overflow: hidden;
}
input[type="checkbox"].open_close_c:checked + ul{
height: 110px;
padding:10px;
}
class名「.open_close_c」に「display:none;」を設定し、チェックボックス自体は非表示にします。「ul」に対してアニメーションが発生したときのスピードを、「transition」で設定します。
「ul」を非表示にする際には「display」での非表示をつかわず、hightをつかいます。
「transition」のアニメーションがdisplayに対して無効のため、アニメーションにできないからです。
設定は「height:0;」「overflow:hidden;」とします。
チェックボックスをチェックしたとき、「height:auto;」を設定することで、「hight」が0から110pxになる過程が、アニメーションするようになります。
非表示のチェックボックスをチェックするような動作をさせるために「lavel」を利用します。
「input type="checkbox"」に対して、idを設定しておきます。
「label」タグ内にforを設定します。「for」は「input type="checkbox"」で設定したid名と同様にしておきます。
この設定をすることにより、「label」をクリックとチェックボックスのON・OFFが連動するようになります。
これによって、
「input[type="checkbox"].open_close_c + ul」の場合（チェックされていない場合）と
「input[type="checkbox"].open_close_c:checked + ul」の場合（チェックした場合）で
CSSを分けて書くことができます。
ワンポイント
まとめ
いかがでしたでしょうか？
アコーディオンメニューは、「click」イベントを用いて対象に「class」を追加することで様々な実装をすることができます。しかし、jQueryはソースを上から読み込んでいくため、記述は正しくても順番が違うと実装できないことがあり苦労しました。またCSS3の登場でjQueryを使わなくても実装可能になりました。今後も新しい実装方法が出てくるかも知れません。Web業界の進歩はとても早いので遅れをとらぬよう、日々勉強していきます。
RECENT POSTS
Vol.203
What Is Design Management
Vol.202
Why Hiring No Longer Works— Redesigning Organizations and Decisions for an Uncertain Age
Vol.201
How to Choose a Branding Agency: 5 Criteria to Avoid Failure
Vol.200
Design Management: A Practical Guide for SMEs and Startups to Drive Real Results
Vol.199
How to Rebuild Brand Competitiveness: A Practical Guide to Brand Management for SMEs
Vol.198
From parent–child bonds to community: The future of education that nurtures diversity and designs relationships
