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

どうもおはようポテト(@ohayoupoteto22)です。

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

ということで今回は

「CSSのみでアコーディオンメニューを作りたい」

「アコーディオンメニューを作るのにjsを使ったら呪いが発動するんじゃ…」

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

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

ブログ主

早速いってみよう！

お品書き

完成イメージ
手順
CSSだけで作るアコーディオンメニュー
- HTML
- CSS
CSSだけでアコーディオンメニューを作る方法

完成イメージ

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

やっぱ鶏肉料理は正義

ソロモン

ブログ主

ラーメン一択でしょ

手順

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

手順

step1

入れ子のリストを作る

step2

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

step3

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

レッツゴー!

ソロモン

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

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

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;
}

以上になります。

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝