CSSで多階層のドロップダウンメニューを表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで多階層のドロップダウンメニューを表示する方法について解説しています。最初に基本のドロップダウンメニューの作成方法を説明します。次にjQueryなどを使わずにCSSのみで階層化を行う場合の書き方について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

CSSで多階層のドロップダウンメニューを表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

多階層のドロップダウンメニューを表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

目次

 

ドロップダウンメニューとは

ページの上部に表示されていて、クリックすると詳細内容が表示できるメニューのことです。

コーディング例はこのようになります。

See the Pen
Dropdown fin
by TAKAYOSHI (@lspuwbkv)
on CodePen.

単一のドロップダウンメニューを実装する

単一のドロップダウンメニューを実装していきましょう。

基本的な形式は以下になります。

See the Pen
Dropdown single
by TAKAYOSHI (@lspuwbkv)
on CodePen.

混乱を避けるため、できるだけシンプルなスタイルで作りました。

また、わかりやすくするためにチェックボックスを表示しているものの、最終的には非表示にします。

 

このチェックボックスがポイントです。

                <!--ドロップダウン状態を判断するチェックボックス(非表示)-->
                <input type="checkbox" id="menu--toggle1" class="menu--toggle">
             
                <!--ドロップダウン状態を切り替えるラベル checkboxのIDを指定-->
                <label for="menu--toggle1" class="menu--label">
                    :省略
                </label>

input type=checkbox と label に対して、IDを使って紐づけます。

また、下記コードでは、タイトル部分をクリックすると、チェックボックスのチェック状態をON/OFFで切り替えることが可能です。

        > .menu--toggle:not(:checked){
            ~ .menu--dropdownarea{
                padding:0;
                *{
                    display: none;
                }
            }
        }

        > .menu--toggle:checked{
            ~ .menu--dropdownarea{
                    /*なにもしない*/
            }
        }

 

チェックボックスのチェック状態に応じて、ドロップダウン項目のスタイルを変更できます。

チェックされていない場合は非表示、チェックされている場合は表示の状態です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

多階層のドロップダウンメニューを実装するコード

ここでは、階層を作り、ドロップダウンメニューを実装していきましょう。

子要素をクリックすると、さらに項目が出てくるプログラムコードは下記のように記述します。

See the Pen
Dropdown child
by TAKAYOSHI (@lspuwbkv)
on CodePen.

さきほどのHTML構成を二重にする形です。

        <div class="menu bigmenu">
                <!--ドロップダウン状態を判断するチェックボックス(非表示)-->
                <input type="checkbox" id="menu--toggle1" class="menu--toggle">
               
                <!--ドロップダウン状態を切り替えるラベル checkboxのIDを指定-->
                <label for="menu--toggle1" class="menu--label">
                    <!--メニューのタイトル-->
                    <h2 class="menu--label--title">商品情報</h2>
                    <!--アイコン ドロップダウン状態に応じて変化-->
                    <span class="menu--label--icon"></span>
                </label>
                
                <!--ドロップダウン項目-->
                <div class="menu--dropdownarea">
                    <div class="menu smallmenu">
                        <!--ドロップダウン状態を判断するチェックボックス(非表示)-->
                        <input type="checkbox" id="menu--toggle1-1" class="menu--toggle">
                        
                        <!--ドロップダウン状態を切り替えるラベル checkboxのIDを指定-->
                        <label for="menu--toggle1-1" class="menu--label">
                            <!--メニューのタイトル-->
                            <h3 class="menu--label--title">セール商品</h3>
                            <!--アイコン ドロップダウン状態に応じて変化-->
                            <span class="menu--label--icon"></span>
                        </label>
                        
                        <!--ドロップダウン項目-->
                        <div class="menu--dropdownarea">
                            <p>生活家電</p>
                            <p>情報家電</p>
                            <p>美容家電</p>
                        </div>
                      
                    </div>
                </div>
            </div>

CSSは、子階層のメニューの表示位置を右側に調整します。

    .smallmenu{
        width: 100%;
        position: relative;
        > .menu--dropdownarea{
            position: absolute;
            top:0;
            width: 100%;
            left:100%;
        }
    }

さらに、子メニューを複数配置していきましょう。

See the Pen
Dropdown childlen
by TAKAYOSHI (@lspuwbkv)
on CodePen.

複数配置する場合は、下記のコードでチェックボックスではなく、ラジオボタンにしましょう。

                    <!--ドロップダウン状態を非選択にするラジオボタン(非表示)-->
                    <input type="radio" name="smallmenu1" id="menu--toggle1-no" class="menu--toggle">

メニューに何も表示していない状態を指すラジオボタンを作り、表示中のメニュータイトルをクリックし、非表示状態になるようにラベルをかぶせることが可能です。

わかりやすくするために、赤で色をつけているものの、最終的には非表示にします。

 

そして、親メニューも複数にしていきましょう。

See the Pen
Dropdown parents
by TAKAYOSHI (@lspuwbkv)
on CodePen.

コンボボックスを使って複数項目を切り替える手法を親メニューにも適用しました。

 

最後に、ボタンとラベルを非表示にすれば、多階層のドロップダウンメニューが完成です。

See the Pen
Dropdown fin
by TAKAYOSHI (@lspuwbkv)
on CodePen.

メニューに自分のニーズに合わせたスタイルで、カスタマイズしていくことが可能です。

 

メガドロップダウンメニューを実装する方法

上記の方法を応用し、メガドロップダウンメニューも作ることもできます。

See the Pen
Dropdown mega
by TAKAYOSHI (@lspuwbkv)
on CodePen.

 表示するメニューエリアを絶対位置にして、画面横幅いっぱいのスタイルを設定しましょう。
            ~ .menu--dropdownarea{
                position: absolute;
                width: 100%;
                left: 0;
                height: 33.3333%;
            }

この設定であれば、jQueryを使わなくても動きのあるメニューが作れます。

 

執筆してくれたメンター

田屋 貴祥

最新テクノロジーを広めるという情熱を持ちクラウドベンダーでセールスエンジニアに従事。

その後、フリーランスWeb制作をしながら、海外で人生の楽しみ方を学ぶ。

海外のWeb制作Tipsを翻訳し実践するTechブログ制作中。

https://webcreate.bokutachino.world/

最近のマイトレンドはCSS3で脱JavaScript。

 

大石ゆかり

CSSで多階層のドロップダウンメニューを表示する方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。