つい最近、WEBを勉強し始めた息子の友達に「アコーディオンメニューってどうやって作るんですか？」と聞かれた時に、「ググれば出てくるよ」とヘタレな答えをしてしまった事を反省して、アコーディオンメニューの作り方について書こうと思います。
jQueryを使う方法がメジャーだと思いますが、息子の友達でも理解できるように、今回はシンプルにCSSだけでアコーディオンメニューを作る方法を紹介します。
とりあえず、作りたいのはこんな感じのアコーディオンメニューです。
See the Pen XxKeYg by Beginners-High (@dragonpa) on CodePen.
CSSだけでアコーディオンメニューを作る
息子の友達はまだjQueryを使った事が無く、CSSは学校で教えてもらっているという事だったので、次会った時に「おじさんに任せなさい！」と言ってあげれるように、CSSだけでアコーディオンメニューを作ってみます。
まずはHTMLを記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="accordion"> <div id="one" class="section"> <h4 class="a-menu"> <a href="#one">アコーディオンメニュー 1</a> </h4> <div> <p>jQueryを使わなくても、CSSだけでアコーディオンメニューが作れます。</p> </div> </div> <div id="two" class="section"> <h4 class="a-menu"> <a href="#two">アコーディオンメニュー 2</a> </h4> <div> <p>jQueryを使わなくても、CSSだけでアコーディオンメニューが作れます。</p> </div> </div> <div id="three" class="section"> <h4 class="a-menu"> <a href="#three">アコーディオンメニュー 3</a> </h4> <div> <p>でもこれ、閉じるのはどうすればいいんでしょうね...</p> </div> </div> </div> |
HTML自体はシンプルで、各メニュー名とアコーディオンで表示させたいコンテンツを div要素で囲ってid属性とclass属性を指定しています。
メニュー名からid属性へのリンクを作ることで、隠しておいた内容がアコーディオンで表示されるという動きをCSSでスタイリングします。
CSSでスタイリングする
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .accordion{ padding: 10px 20px; border: solid 1px #aaa; } .accordion h4 + div { height: 0; overflow: hidden; -webkit-transition: height 0.3s ease-in; -moz-transition: height 0.3s ease-in; -o-transition: height 0.3s ease-in; -ms-transition: height 0.3s ease-in; transition: height 0.3s ease-in; } .accordion :target h4 + div { height: 80px; } .accordion .section.large:target h4 + div { overflow: auto; } .a-menu a{ background-color: #ddd; padding: 14px; display: block; } .a-menu a{ color: #333; text-decoration: none; } .section p{ margin-left: 15px; } |
アコーディオンメニューを表示させるスピードは、以下のコードの transition: height 0.3s ease-in; の部分で変更が可能です。transition: 0.3sの数値を上げれば、アコーディオンの動きがゆっくりになり、下げれば早くなります。
1 2 3 4 5 6 7 8 9 | .accordion h4 + div { height: 0; overflow: hidden; -webkit-transition: height 0.3s ease-in; -moz-transition: height 0.3s ease-in; -o-transition: height 0.3s ease-in; -ms-transition: height 0.3s ease-in; transition: height 0.3s ease-in; } |
heightの値を変更すれば開いたメニューの高さを設定できます。内包するコンテンツの量にあわせて調整してください。
1 2 3 | .accordion :target h4 + div { height: 80px; } |
完成したアコーディオンメニュー
HTMLとCSSだけで作ったアコーディオンメニューが完成しました。
jQueryを使う方法よりも早く簡単なので初心者でも手軽に作れますよ！
See the Pen XxKeYg by Beginners-High (@dragonpa) on CodePen.
でもやっぱりjQueryを使った方法が使いやすい
今回紹介した方法は、初心者でも簡単に作れるぐらい手軽な方法だと思いますが、他のメニューをクリックする以外にメニューを閉じる方法がなかったり、開いたメニューをheightの値で指定しなければいけないといった若干使いづらい部分もあります。
アコーディオンメニューを作る場合は、やっぱりjQueryを使った方法が使いやすい気はします。
まとめ
今更感がある記事の内容でしたが、よくよく考えてみると「HTMLとCSSだけで作ればサイトスピードにも若干影響あるんじゃないか？」とか思ったりして、コレはコレで役に立つ機会があるかもしれないし、とりあえずは「ググれば出てくるよ」とヘタレな答え方をする必要もなくなるわけですよ（笑）
次に息子の友達に会って「いい方法あるだわ！」と教えた時に「jQueryを使った方が良くないですか？」と言われない事を祈るばかりです…
「CSSだけでシンプルなアコーディオンメニューを作る方法【CSS初心者向】」でした！
