jqueryを使わないcssだけで実装するアコーディオンメニュー

2015年12月16日
とっつぁん とっつぁん
css WEBデザイン
この記事は 15 分くらいで読めると思います
jqueryを使わないcssだけで実装するアコーディオンメニュー
jqueryを使わないcssだけで実装するアコーディオンメニュー

アコーディオンメニュー

jqueryを使わないcssだけで実装するアコーディオンメニュー

jqueryを使わないcssだけで実装するアコーディオンメニュー

 

※高さを内容に合わせたいと言うコメント頂いた為、ちょっぴり編集しました。

 

アコーディオンメニューとは、クリック(タップ)すると隠れていたメニューが出てくるヤーツです。
スマフォ用のナビゲーションとかにも使われていたりしますね。

あーたむ

あーたむ説明がへたくそすぎて分かんない…

とっつぁん

とっつぁんはいはい、そうでしょうとも。

とりあえずデモを用意したので見てみてください。

DEMO

あーたむ

あーたむなるほど、うにょーん!ってなるやつね


今まではこういうメニューはjqueryを使うのがわりと一般的でした。

が、htmlとcssだけでも実装できるのよ、という時代になって来たのでご紹介。

ちなみにクソブラウザ(ワタクシのスマフォ標準ブラウザ)でも動きます。

ひとまずコピペでオッケーです。

チェックボックスを使用したアコーディオンメニュー

html

css

  • チェックボックスを用意し、チェックが入っているときはメニューが開き、チェックが入っていない時はメニューを閉じる
  • チェックボックスはdisplay:none;で非表示にする
  • 非表示のチェックボックスにチェックを入れる為に、labelタグのforにチェックボックスのidを指定する
  • 隣接セレクタ(+)を使って「チェックが入っている+ul」のheight指定でメニューの開閉を操作
  • 開閉時はtransitionでアニメーションさせる

ざっくり説明するとこういう感じです。

1か所が開いているときは他のメニューは閉じたい

1か所開いたらもう1か所は閉じる、ってな動きも定番ですよね。

そういうのはラジオボタンを使うと出来ます。ほら、ラジオボタンって1か所しか選択できないじゃないですか。

html(type属性がradioに、name属性にラジオボタン共通の指定を。)

css

cssはcheckboxの時とほぼ変わってません、checkboxがradioに変わってるだけです。

htmlのinput要素のtypeがラジオボタンになっている事と、ラジオボタンには共通のname属性を付けているくらいなものです。

はじめから開いているアコーディオンにするには?

チェックボックスやラジオボタンにチェックが入っているとメニューが開きます。

つまりデフォルトでチェックが入っている状態にすれば初めから開いたメニューになります。

って事でinput要素部分にcheckedを入れればオッケーです。