KaoLog

ぽんこつwebデザイナーのスキルのメモ

JSを使ったアコーディオンメニューと、cssのみで実装したアコーディオンメニューの実装方法をまとめてみた

f:id:s2lybb:20170416133632j:plain

 

今回はアコーディオンメニューについてまとめます。

スマホサイトが増えてからよく見られる様になりましたアコーディオンメニューですが、実装は主にの2通りあります。

【1:cssのみでの実装】

  

【2:jsも使用した実装】

 

まずはコードを比べてみましょう。

See the Pen アコーディオンメニュー(JS使用) by Kaorin (@PANbooooo) on CodePen.

See the Pen AccordionMenu(CSSのみ) by Kaorin (@PANbooooo) on CodePen.

上がJSを利用したもので、下がcssを利用したものです。

各々の機能を知る為に、装飾をしているcssを消してみたいと思います。

See the Pen アコーディオンメニュー(JS使用)(装飾なし) by Kaorin (@PANbooooo) on CodePen.

See the Pen AccordionMenu(CSSのみ)(装飾なし) by Kaorin (@PANbooooo) on CodePen.

cssがグッと減り、見やすくなりました。

 

 

次にhtmlの構造を見てみましょう。

まずはJSを使用したアコーディオンメニューのhtmlです。

<ul class="menu">
<li>
<a >タイトル1</a>
<ul class="submenu">
<li>テキスト1</li>
<li>テキスト2</li>
</ul>
</li>
<li>
<a>タイトル2</a>
<ul class="submenu">
<li>テキスト3</li>
<li>テキスト4</li>
</ul>
 </li>
</ul>

 

次にcssのみを使用したアコーディオンメニューのhtmlです。

  <label for="list1">ボタン1</label>
<input type="checkbox" id="list1" class="check" />
<ul>
<li>リンク1</li>
<li>リンク2</li>
</ul>
<label for="list2">ボタン2</label>
<input type="checkbox" id="list2" class="check" />
<ul>
<li>リンク3</li>
<li>リンク4</li>
</ul>

画像左側がボタンのHTML構造、画像右側がボタンを押した時に出てくる中側のHTML構造となっています。

 

両方のhtml構造も、ボタンの中身の方(画像右側)は全く同じです。

ちなみにこのボタンの中身の方(画像右側)は、下記の様に書き換えることができます。

<ul>
<li>リンク1</li>
<li>リンク2</li>
</ul>

そして、この中身を出す為に押さなくてはいけないボタンの方をじっくり見ていきたいと思います。

 

JS使用のボタンのHTML構造はこんな感じです。

<ul>
<li><a>タイトル1</a></li>
<li><a>タイトル2</a></li>
</ul>

大きなulタグliタグのみで構成されてます。中身のulタグと区別をつけるためにも、各々のulタグにクラス名、またはid名が必要ですね。htmlとcssのみで見れば、こちらのほうが作りやすく感じるかもしれません。

 

次にcss使用のボタンのHTML構造はこんな感じです。

<label for="list1">ボタン1</label>
<input type="checkbox" id="list1" class="check" />

まずlabelタグですが、ここがミソです。

あまり見慣れないlabelタグだと思いますが、labelタグinputタグselectタグとセットで使われることが多いです。
使用方法はこんな感じです。

See the Pen labelタグを用いたinput by Kaorin (@PANbooooo) on CodePen.

 

labelタグを使用することで、labelタグ内にあるテキストをクリックすると、ラジオボタンやテキストボックス、チェックボックスが反応します。スマホサイトで入力欄を作る際には、おすすめのタグです。ただ、注意事項としましては、labelタグ内のfor名と、inputタグ内のid名は統一しなくてはならないということです。

 

 

次にcssの構造を見てみましょう。

まずはJSを使用したアコーディオンメニューのcssです。

 .submenu{
display: none;
}
.submenu{
display: none;
}

上記のcssの記入により、中身のulタグ内を通常時は非表示にしています。
JSのみのアコーディオンメニューのcssはこの一つで十分です。

 

次にcssのみを使用したアコーディオンメニューのcssです。

input[type="checkbox"].check{
display: none;
}
input[type="checkbox"].check + ul{
height: 0;
overflow: hidden;
}
input[type="checkbox"].check:checked + ul{
height:40px;
}

 

画像左側がボタンのcss構造、画像右側がボタンを押した時に出てくる中側のcss構造となっています。

こちらは少し複雑なので、ひとつひとつ整理していきましょう。

input[type="checkbox"].check{
display: none;
}

上記のcssにより、チェックボックスを非表示にしています。

input[type="checkbox"].check{
display: none;
}

上記のcssにより、アコーディオンメニューのulタグ内を非表示にしています。この部分が一番大切です。

input[type="checkbox"].check:checked + ul{height:40px;}

上記のcssにより、アコーディオンメニューのulタグ内の高さを設定しています。この高さを大きくすると、ボタンを押したときに出てくるアコーディングメニューの領域が大きくなります。

 

 

次にJSの構造を見てみましょう。

ここでは、JSを使ったチェックボックスのみの説明となります。

$(function(){
function accordion() {
$(this).toggleClass("active").next().slideToggle(300);
}
$("li a").click(accordion);
});
$(function(){ 
}

この記述で、処理を実行します。

$(document).ready(function(){});
jQuery(function(){}
jQuery(document).ready(function(){});

処理を実行する記述は、上記の3パターンに書き換えることができます。

$(this).toggleClass("active").next().slideToggle(300);

toggleClassによって、指定した箇所(今回は「this」が指定箇所に当たります。)activeというクラス名を、無ければ追加、あれば削除できます。

.slideToggleによって、指定した箇所(今回は「this」が指定箇所に当たります。)のスライドをアップしたり、ダウンすることができます。
続くカッコ内の数字は、スライドの速さを指定することができます。今回は「300」という指定のため、0.3秒かけてアニメーションが動くという実装になっています。ここは、リアルな数字を入れなくても、「fast」や「slow」等でも実装可能です。

$("li a").click(accordion);

指定した箇所(今回は「liの中のa」)をクリックすると、アコーディオンを実行できます。

 

 

今回はアコーディオンについて説明しました。装飾の部分をとってしまうと、とても簡単な実装であることが分かりました。
JSはOSやブラウザによってうまく反映されるものと反映されないものがあるため、アコーディオンメニューをサイト内で使いたい場合は、今回紹介した2つの方法をどちらも取り入れることをおすすめします。