アコーディオンメニューの作り方を覚えたくなったので勉強してみました。
labelのボタンでinputのチェックボックスと連動したり、checkedでアコーディオンメニューをクリックしたときの開閉動作の作り方を勉強しただけではなく、CSSでアコーディオンメニューのデザインもして完成させてみました。
アコーディオンメニューの作り方を1から覚えたい人にも参考になればと思います。
CSSとHTMLでアコーディオンメニューの作り方
HTMLでアコーディオンメニューの要素を作り、CSSでデザインして完成させた以下の仕上がりイメージ画像を目標にアコーディオンメニューの作り方を説明します。
閉じてるとき
開いたとき
先にアコーディオンメニューを作るときに組み立てた全てのHTMLとCSSも載せておきます。
<div class="menu-wrap">
<label for="acd-menu">button</label>
<input type="checkbox" id="acd-menu">
<ul class="acd-list">
<li><a href="#">menu-one</a></li>
<li><a href="#">menu-two</a></li>
<li><a href="#">menu-three</a></li>
</ul>
<label for="acd-menu2">button</label>
<input type="checkbox" id="acd-menu2">
<ul class="acd-list2">
<li><a href="#">menu-one</a></li>
<li><a href="#">menu-two</a></li>
<li><a href="#">menu-three</a></li>
</ul>
</div>
.menu-wrap{
width: 300px;
margin: 0 auto;
}
.menu-wrap label{
background-color: #333;
color: #fff;
display: block;
padding: 15px;
cursor: pointer;
text-align: center;
border-top: 3px solid #2ac5b3;
border-bottom: 3px solid #2ac5b3;
}
.menu-wrap input{
display: none;
}
.menu-wrap ul{
background-color: #4E4D48;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.menu-wrap li{
height: 0;
overflow: hidden;
line-height: 3;
transition: all 0.5s;
}
#acd-menu:checked ~ .acd-list li{
height: 50px;
}
.menu-wrap label::before{
display: inline-block;
content: '>>';
color: red;
padding-right: 10px;
}
.menu-wrap label::after{
display: inline-block;
content: '<<';
color: red;
padding-left: 10px;
}
.menu-wrap a{
color: #fff;
text-decoration:none;
}
.menu-wrap a:hover{
color: red;
}何も参考にすることなく自力でアコーディオンメニューを作ってみたのですが、まだ復習が必要なので、アコーディオンメニューの作り方に必要な順序でアウトプットしながら作り方の説明もします。
ではアコーディオンメニューの作り方スタートです。
アコーディオンメニューをdivで囲む
<div class="menu-wrap">
</div>
アコーディオンメニューを囲むボックスをdivタグで作成しておきます。HTMLでは、このdiv要素がアコーディオンメニューを作るときの親要素になります。
.menu-wrap{
width: 300px;
margin: 0 auto;
}
そしてマークアップしたdivの親要素のクラス名をCSSのクラスセレクタにしてwidthで幅を指定しておきます。
margin: 0 autoのCSS記述は、アコーディオンメニューを中央に配置するために記述したかっただけなので不要な場合は、それぞれの余白の取り方としてmarginを使うことができます。
アコーディオンメニューを囲む親要素作りは、作り方を勉強してみて地味に重要だと思えました。
menu-wrap a{}
menu-wrap ul{}
menu-wrap li{}
menu-wrap label::before{}
menu-wrap label::afteer{}
上のCSSセレクタのように親要素のdivで指定するクラス名、上のdivならclass=”menu-wrap”を使ってアコーディオンメニューの作り方で必要になるスタイルの適用に使うことが多かったからです。
重要ではあるけど、HTMLのdivタグにclass属性をつけるだけで即完成というあっけなさ。
アコーディオンメニューを包括する親要素のdivには、このあと徐々にアコーディオンメニューの中で使うボタンやチェックボックス、そしてメニューリストをHTMLとCSSで組み立てて行くことになります。
ラベルをCSSでボタンにする
アコーディオンメニューの作り方では、アコーディオンの蛇腹が伸び縮みする動きのように、開閉するメニューのスイッチの役割にするボタンが必要です。
ちなみにアコーディオンの蛇腹の部分を「ベローズ」というようです。
HTMLのlabelタグを記述して表示させたラベルを、CSSでアコーディオンメニューのボタンにデザインし使用します。
<div class="menu-wrap">
<label for="acd-menu">button</label>
</div>
作り方ですが、labelタグを記述するときにfor属性を記述して、for属性の属性値を指定します。そしてラベルで表示するテキストを入れておきます。
- for属性の値がチェックボックスとラベルを連動させるための部分
- ラベルを表示するテキストが、labelをCSSでボタンにデザインして表示する文字の部分です。
検証ツールでソース確認して、記述したHTMLと同じ表示になれば成功しています。
labelタグでマークアップした要素でラベル表示できたら、このlabel要素をCSSでアコーディオンメニューのボタンにデザインします。
.menu-wrap label{
display: block;
background-color: #333;
color: #fff;
padding: 15px;
text-align: center;
cursor: pointer;
border-top: 3px solid #2ac5b3;
border-bottom: 3px solid #2ac5b3;
}
アコーディオンメニューのために作成した親要素divのクラス名とlabelでセレクタにします。
セレクタの中のプロパティはbackground-colorでラベルの背景色とcolorで文字色を決めて、paddingやtext-alignを使い余白や位置の調整をしながらボタンをデザインします。
また、ラベルはCSSでdisplay:blockを指定しておきます。これはlabel要素がインラインなので、display:blockでブロック要素に変更して幅の調整ができるようにするためです。
チェックボックスを作成しCSSで非表示にする
アコーディオンメニューのメニューリストを開閉するために作成したボタンは、ここまでの作り方ではCSSでデザインしただけの「機能しないボタン」です。
「機能するボタン」にするための作り方は、マークアップしたlabel要素の下にinput要素が必要です。
<div class="menu">
<label for="acd-menu">button</label>
<input type="checkbox" id="acd-menu">
<div>
label要素の下にinputタグをマークアップして、labelのfor属性の値とinputのidを同じ値にして紐付けをします。
紐付けできたら、プレビューしてlabelとinputの表示を確認します。
表示確認のとき、CSSでデザインしたボタンをクリックしてチェックボックスにチェックがはいれば紐付け成功です。
ここまでの時点のアコーディオンメニューの表示にはボタンとinput要素のチェックボックスが表示されています。
.menu-wrap input{
display: none;
}
表示してるチェックボックスはCSSでアコーディオンメニューの親要素のクラス名とinputをセレクタにして、display:none;で非表示にしておきます。
非表示にする理由は、CSSでlabelをデザインしてボタンにしているため、アコーディオンメニューをクリックして表示と非表示の切り替えをする役目はボタンがしてくれるからです。
クリックで開閉するメニューリストをCSSでデザイン
アコーディオンメニューのボタンをクリックして開閉する部分(メニューリスト)のHTML要素を作成して、CSSでデザインしていきます。
<div class="menu">
<label for="acd-menu">button</label>
<input type="checkbox" id="acd-menu">
<ul class="acd-list">
<li><a href="#">menu-one</a></li>
<li><a href="#">menu-two</a></li>
<li><a href="#">menu-three</a></li>
</ul>
<div>
HTMLでlabelとinputをマークアップした下にリストタグとaタグを使用してメニューリストを作ります。
このときul開始タグにはclass属性でクラス名をつけておき、CSSでメニューリストのデザインをできるようにしておきます。
表示を確認してみるとCSSでデザインしたアコーディオンメニューのボタンの下にメニューリストが表示できていれば成功です。
メニューのリストをデザイン
メニューリストをCSSでデザインします。アコーディオンメニューの親要素のクラス名とメニューリストのulでセレクタにします。
.menu-wrap ul{
background-color: #4E4D48;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
アコーディオンメニューのリストの背景色を指定して適用させます。
適用した背景色はアコーディオンメニューを包括する親要素で指定したwidth:300px;の幅でボタンの幅を同じにして合わせることができていると思います。
そしてulの余白ができてしまうのでmarginとpaddingを0にすると、ボタンの下にメニューリストがぴったりくっついてくれます。
またメニューリストの余白を無くしたことでリスト左の黒ポチが背景色からはみ出して表示します。これはCSSのlist-style: none;で消しておきます。
こんな感じでアコーディオンメニューが表示できていれば、ここまでの作り方が成功できています。
メニューリストを閉じた状態にする
アコーディオンメニューのメニューリストが作り終わったら、開いたままのメニューになっているので、ボタンでメニューリストを開くまではCSSで閉じた状態、つまり非表示にします。
.menu-wrap li{
height: 0;
overflow: hidden;
line-height: 3;
transition: all 0.5s;
}
親要素のクラス名とliでCSSのセレクタにします。そしてheight:0;の指定でli要素の高さを無くして非表示にします。
overflow: hidden;も指定します。これはメニューリストをボタンで閉じたときに表示されてしまう部分を表示しないようにできます。
先述したul要素のデザインでlist-style: none;を指定してリストの黒ポチを消しましたが、overflow: hidden;だけでも消えたので、もしかするとlist-style: none;の記述はいらないかもしれませんが念のため記述しておきます。
ここまでアコーディオンメニューの作り方を進めてきましたが、表示やデザインの確認をブラウザでしてみると、ただアコーディオンメニューのボタンが表示してるだけになります。
これで成功できています。
CSSでアコーディオンメニューが開閉する動作作成
CSSでアコーディオンメニューが開閉する動作の作り方です。
ラベルで作ったボタンをクリックしたら、CSSで非表示にしているメニューリストの要素を、さらにCSSで表示して開けるようにします。
#acd-menu:checked ~ .acd-list li{
height: 50px;
}
まずはアコーディオンメニューのinputのid名と:checkedの組み合わせにしてから、間接セレクタのチルダ(~)でulのクラス名にliを組み合わせたセレクタを作ります。
そしてプロパティはheightを記述して値で高さを指定します。
- acd-menu:checked ボタンをクリックしてinputのチェックボックスにチェックが入ったとき
- .acd-list li 非表示で閉じてるメニューリストのli要素が
- height: 50px; 指定する高さで開きます。
こうしたCSSの使い方をしてアコーディオンメニューの開閉する仕組みが全て作り終ります。
プレビューして表示確認するとデザインしたボタンだけが表示する状態になっていますが、ボタンをクリックすると、メニューリストの開閉が可能なアコーディオンメニューに仕上がっています。
アコーディオンメニューを2つ繋げて複数にする
さて、ここまで「ボタン」「チェックボックス」「メニューリスト」をCSSとHTMLで組み立てたり、デザインしながらアコーディオンメニューの作り方を進めてきましたが作成したのは1セットですね。
せめて2つのボタンと2つのメニューリストが欲しいと思うので、アコーディオンメニューを2つ繋げて複数にする作り方も勉強がてら説明します。
<div class="menu-wrap">
<label for="acd-menu">button</label>
<input type="checkbox" id="acd-menu">
<ul class="acd-list">
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
</ul>
<!--ここから2個目スタート-->
<label for="acd-menu2">button</label>
<input type="checkbox" id="acd-menu2">
<ul class="acd-list2">
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
</ul>
<!--ここで2個目ゴール-->
</div>
と言っても一つ目の作り方さえ覚えてしまえば簡単です。先に作成してある親要素のdiv開始タグと終了タグだけを残し、一つ目のアコーディオンメニュー構造をコピペします。
ただしコピペして貼り付けた2つめのアコーディオンメニュー構造を少し変更します。
- labelのfor属性の値
- inputのidの値
- ulのクラス名
この3つを変更します。
例えば、分かりやすく変更しますが、変更する3つの値の最後に「2」を追加してHTML側は終わりです。
#acd-menu:checked ~ .acd-list li,
#acd-menu2:checked ~ .acd-list2 li{
height: 50px;
}
CSS側では、アコーディオンメニューが開閉する動作作成で記述した間接セレクタをいじります。
一つ目の間接セレクタの記述の後に「,」を記述した下にでも、一つ目の間接セレクタをコピペして貼り付けます。
コピペで貼り付けた2個目の:checkedとli以外のセレクタに「2」を追加します。
これで1個目のアコーディオンメニューと2個目のアコーディオンメニューは、それぞぞれのボタンをクリックすることで別々にメニューリストが開閉できるような作り方ができます。
この仕組みは、単純にアコーディオンメニューのlabelとforで関連するセットの値を1個目と2個目で別々にして、ボタンをクリックしたときの動作を分けられるようにしています。
おまけ：アコーディオンメニューに矢印とホバー
アコーディオンメニューはシンプルに使いたいと思っているのですが、少し工夫をしたいと思った場合には矢印をデザインとして加えてあげてもいいと思います。
.menu-wrap label::before{
display: inline-block;
content: '>>';
color: red;
padding-right: 10px;
}
.menu-wrap label::after{
display: inline-block;
content: '<<';
color: red;
padding-left: 10px;
}
アコーディオンメニューの表示と非表示で切り替えをするボタンに矢印をCSSの::beforeと::afterでデザインしました。
.menu-wrap a{
color: #fff;
text-decoration:none;
}
.menu-wrap a:hover{
color: red;
}
おまけ的にもう一つ。
アコーディオンメニューのメニューリストに使うリンクのaタグをホバーさせて、マウスが乗ったときに文字色が変わるようにして、ボタンの矢印と同調するようなデザインしました。
