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を入れればオッケーです。

jqueryを使わないcssだけで実装するアコーディオンメニュー” に対して 4 件のコメントがあります

  1. atsushi より:

    とっつぁんさんへ
    はじめまして、cssでつくるアコーディオンメニューを調べていてこの記事にたどり着きました。
    初心者で困っておりましたが、内容がとてもわかりやすかったおかげで無事に動作できました。
    ありがとうございます!

    そして…恐れ入りますがひとつお尋ねがあります。
    私が参考にさせていただいたのは上記の「チェックボックス」の方です。チェック時に「height: 170px」が表示される、というあり方になっていますが、これを不規則な高さに対応させることはできませんでしょうか?
    というのが、当方のメニューはごとにの個数が変わってしまうのです…

    考えられる範囲で試してみましたがどうにもうまくいかず…お知恵をお借りできればと思いコメントしました。
    ご都合の良い時にアドバイスをいただけたら幸いです。

    1. とっつぁん より:

      確かに今時は中のコンテンツに合わせたいですよねw
      チェックがある時の高さをautoに設定すれば一応動作するけれど
      それだとアニメーションが無効になってしまいます。

      そこで以下のようにCSSを変更すれば解決するのではないかと思います。

      input[type=”checkbox”].bellows + ul {
      max-height: 0; /* 高さではなく最大を0に */
      overflow: hidden;
      }
      input[type=”checkbox”].bellows:checked + ul {
      max-height: 50em;/* 数値は適当に… */
      }

      お役にたてれば幸いです。

      1. atsushi より:

        とっつぁんさん

        アドバイスいただきありがとうございます!
        max-heightだったんですね、無事解決しました!
        おかげさまで期待通りの結果が得られました。ありがとうございます!!
        コメント欄からですみませんが、お礼申し上げます!!

        追伸/私の質問を見返すと…誤植がありますね、大変失礼いたしました。。。
        「当方のメニューは項目ごとに…」というつもりでしたが、意味が伝わっていてよかったです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です