どうもおはようポテト(@ohayoupoteto22)です。
jsとか使わずにアコーディオンメニュー作りたい…
ということで今回は
「CSSのみでアコーディオンメニューを作りたい」
「アコーディオンメニューを作るのにjsを使ったら呪いが発動するんじゃ…」
という方に向けて「CSSだけでアコーディオンメニューを作る方法」をまとめました。
初学者の備忘録ゆえ至らない点もあると思いますが参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
完成イメージ
今回作るアコーディオンメニューはこんな感じ。クリックするとスライドして下の階層の子達が表示されます。
くるみ
ブログ主
手順
いたってシンプルかつ簡単です。ステップは3つ。
くるみ
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;
}
以上になります。
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝