【爆速】CSSだけでアコーディオンメニューを作る方法

くるみ

jsとか使わずにアコーディオンメニュー作りたい…

ということで今回は

CSSのみでアコーディオンメニューを作りたい
jsはできるだけ使いたくないんだよな…

という方に向けて「CSSだけでアコーディオンメニューを作る方法」をまとめました。

初学者の備忘録ゆえ至らない点もあると思いますが参考になれば幸いです⸝⸝- ̫ -⸝⸝

お品書き

アコーディオンメニューの完成イメージ
作成手順
- コードだけ知りたい場合はこちら
CSSだけでアコーディオンメニューを作る方法
まとめ

アコーディオンメニューの完成イメージ

今回作るアコーディオンメニューはこんな感じ。クリックするとスライドして下の階層の子達が表示されます。

やっぱ鶏肉料理は正義

くるみ

ブログ主

ラーメン一択でしょ

作成手順

いたってシンプルかつ簡単です。ステップは3つ。

手順

step1

入れ子のリストを作る

step2

子要素を非表示に&ラジオボタンを画面外に配置する

step3

選択したらスライドさせる

レッツゴー!

くるみ

コードだけ知りたい場合はこちら

「とりあえずコードが知りたいんじゃぁ」という方向けに結論から。

HTML

コードはこちら

<ul class="accordion">
  <li>
    <label for="meat1">鶏肉</label>
    <input type="radio" name="accordion" id="meat1" />
    <ul class="menu">
      <li><a href="#">唐揚げ</a></li>
      <li><a href="#">竜田揚げ</a></li>
      <li><a href="#">フライドチキン</a></li>
    </ul>
  </li>
  <li>
    <label for="meat2">牛肉</label>
    <input type="radio" name="accordion" id="meat2" />
    <ul class="menu">
      <li><a href="#">牛タン</a></li>
      <li><a href="#">カルビステーキ</a></li>
      <li><a href="#">サイコロステーキ</a></li>
    </ul>
  </li>
  <li>
    <label for="meat3">豚肉</label>
    <input type="radio" name="accordion" id="meat3" />
    <ul class="menu">
      <li><a href="#">生姜焼き</a></li>
      <li><a href="#">酢豚</a></li>
      <li><a href="#">豚トロ</a></li>
    </ul>
  </li>
  <li>
    <label for="meat4">鮫</label>
    <input type="radio" name="accordion" id="meat4" />
    <ul class="menu">
      <li><a href="#">フカヒレスープ</a></li>
    </ul>
  </li>
</ul>

CSS

コードはこちら

.accordion{
  width:200px;
  padding:0;
  color:#fff;
  background-color:#FF8C65;
  margin:0 auto;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  border-radius:5px;
  z-index:1;
}
.accordion label{
  display:block;
  margin:0;
  line-height: 50px;
  font-size:1.1em;
  font-weight:900;
}
.accordion label:before{
  font-family: "Font Awesome 5 Free";
  content: "f105";
  color: #fff;
  font-weight: 900;
  padding-right:7px;
  padding-left:10px;
  text-shadow: initial;
}
.accordion input{
  position:absolute;
  left:-9999em;/*画面外へ*/
}
.accordion .menu{
  display:none;/*非表示に*/
}
.accordion input:checked ~ .menu{
  display:block;
  animation:slide 0.5s ease-in-out 0s;
}
.menu{
  padding:0;
  background-color:#fbfbfb;
  text-align:center;
}
.menu a{
  display:block;
  text-decoration: none;
  line-height: 40px;
  color:#FF8C65;
  width:100%;
}
.accordion label:hover{
  opacity:.7;
}
.menu a:hover{
  background-color:#fcd69e;
}
@keyframes slide{
  0%{
    max-height:0;
  }
  100%{
    max-height:20vh;
  }
}

ブログ主

以下では順を追って解説していくよ

CSSだけでアコーディオンメニューを作る方法

入れ子のリストを作る

<ul class="accordion">
  <li>
    <label for="meat1">鶏肉</label>
    <input type="radio" name="accordion" id="meat1" />
    <ul class="menu">
      <li><a href="#">唐揚げ</a></li>
      <li><a href="#">竜田揚げ</a></li>
      <li><a href="#">フライドチキン</a></li>
    </ul>
  </li>
  <li>
    <label for="meat2">牛肉</label>
    <input type="radio" name="accordion" id="meat2" />
    <ul class="menu">
      <li><a href="#">牛タン</a></li>
      <li><a href="#">カルビステーキ</a></li>
      <li><a href="#">サイコロステーキ</a></li>
    </ul>
  </li>
  <li>
    <label for="meat3">豚肉</label>
    <input type="radio" name="accordion" id="meat3" />
    <ul class="menu">
      <li><a href="#">生姜焼き</a></li>
      <li><a href="#">酢豚</a></li>
      <li><a href="#">豚トロ</a></li>
    </ul>
  </li>
  <li>
    <label for="meat4">鮫</label>
    <input type="radio" name="accordion" id="meat4" />
    <ul class="menu">
      <li><a href="#">フカヒレスープ</a></li>
    </ul>
  </li>
</ul>

まず入れ子のリストを作っちゃいます。
今回はその項目のラジオボタンが選択されてたらその下の階層を表示するので、labelタグのfor属性にそのラジオボタンのIDを指定します。

更に、ラジオボタンのグループ化のためにname属性を「accordion」に。

子要素を非表示に&ラジオボタンを画面外に配置する

.accordion{
  width:200px;
  padding:0;
  color:#fff;
  background-color:#FF8C65;
  margin:0 auto;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  border-radius:5px;
}
.accordion label{
  display:block;
  margin:0;
  line-height: 50px;
  font-size:1.1em;
  font-weight:900;
}
.accordion input{
  position:absolute;
  right:114514em; /*画面外へ*/
}
.accordion .menu{
  display:none; /*非表示に*/
}

まず「menu」というクラスの子要素達を非表示に。

そしてラジオボタンは別に見えなくていいものなので、「position:absolute」絶対配置にして「right」で無限の彼方へ吹っ飛ばしてあげます。

選択したらスライドさせる

.accordion input:checked + .menu{
  display:block;
  animation:slide 0.5s ease-in-out 0s;
}
@keyframes slide{
  0%{
    max-height:0;
  }
  100%{
    max-height:20vh;
  }
}

そしてラジオボタンが選択された際に、その隣接要素である子リスト達を「display:block」としてあげて表示してあげます。

最後に「max-height」を調節することにより、上からスライドしてくるように見えるアニメーションを付けてあげれば完成です。

お疲れ様!

くるみ

おまけのCSS

おまけとして上で挙げた完成イメージのアコーディオンメニューの細かい調整のためのCSSを。

.accordion label:before{
  font-family: "Font Awesome 5 Free"; /*Font Awesomeを読み込む必要あり*/
  content: "f105";
  color: #fff;
  font-weight: 900;
  padding-right:7px;
  padding-left:10px;
  text-shadow: initial;
}
.menu{
  padding:0;
  background-color:#fbfbfb;
  text-align:center;
}
.menu a{
  display:block;
  text-decoration: none;
  line-height: 40px;
  color:#FF8C65;
  width:100%;
}
.accordion label:hover{
  opacity:.7;
}
.menu a:hover{
  background-color:#fcd69e;
}