/最終更新日:2019/06/30TechniqueCSS今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。細かく分けて解説入れながらやっていきますので、「うんちくなんいかいらない!」という方は、最後までジャンプしてください。最後に全てのコードを記載します。まとめ親階層まずは親階層です。href="">Menu5</a></li></ul>全体をラップする「ul」にクラス名「gnav」を付けておきます。「gnav」に高さを設定しています。高さの指定は必要なさそうですが、こちらを指定していないと、下層の「li」にマウスオーバーした際に、意図しないところでマウスオーバーが外れますので指定しておきましょう。親階層の「li」のみ幅25%にするため子セレクタ「>」で指定します。11行目〜11行目以降は全ての「li」・「a」の共通スタイルになります。ここまでのサンプルがこちらです。サンプル1子階層では続いて、子階層です。href="">Menu5</a></li></ul>子階層のリストを追加しています。追加する位置に注意しましょう。「li」の中で、「a」の直後に追加していきます。visible;}CSSは親階層のコードの続きから記載します。冒頭わかりやすく、と書きましたが、ここが若干ややこしいのは否めないので頑張りましょう。ぶっちゃけコピペで動くので理解は後から(しなくても)でもOKです。li」とすることで、子階層以降全ての「li」が対象になります。0;」とすることで、子階層以降全ての「li」が「自分からはみ出した部分は表示しない」かつ「高さは0」なので、全て非表示になります。.5s;」を指定し、0.5秒でアニメーションさせるようにします。「li:hover」でマウスオーバーした際のスタイルを指定していますが、ポイントはセレクタです。li:hover」の部分ですが「.gnav」と「li」の間には子セレクタ「>」を入れません。これで「.gnav」内の全ての「li」にマウスオーバーした場合が対象範囲になります。li」として、子セレクタ「>」を間に入れているのが今回のコードの最大のポイントです。することで「li」にマウスオーバーした直下の「li」のみが対象範囲になります。子階層以降の「li」をマウスオーバーで順番に開いていくことができます。言ってもまだHTMLは子階層までしか追加していないので、更に追加して見ていきましょう。ここまでのサンプルがこちらです。孫・ひ孫階層はやること一緒なので、HTMLを一気に追加します。href="">Menu5</a></li></ul>階層が深くなってややこしくなってきましたが、やっていることは子階層と同じで「li」の中の「a」の直後に追加していきます。100%;}新たな追加はこれだけです。こちらも「li」や「ul」が並んでややこしいですが、子セレクタ「>」をつけていないので、孫階層以降全ての「ul」が対象範囲です。子階層に「li」は親階層の「li」の下に追加すればOKでしたが、孫階層の「li」以降は下ではなく横に追加します。0;」に位置を指定します。これで子階層の「li」の真横に並びます。100%;」も忘れずに!ここまでのサンプルがこちらです。サンプル3これで子→孫→ひ孫と順番に開きました!一番右のドロップダウンメニューは逆方向へ折り返すまだ問題があります。これまで一番左のメニューにドロップダウンメニューを追加してきましたが、一番右のメニューにドロップダウンメニューを追加したらどうなるでしょうか?サンプル4狭い画面で見ているとブラウザからはみ出していきますね。右のドロップダウンメニューは逆方向へ折り返すようにします。HTMLHTMLは変化なしです。-100%;}これだけです。li:nth-child(5)」のドロップダウンメニューは右に折り返します。ここまでのサンプルがこちらです。サンプル5ドロップダウンメニューを装飾さてもう少しです。これでひ孫階層までは順番にアニメーションで動くようにできました。ぶっちゃけ使いづらいドロップダウンメニューです。言うと、どこにマウスオーバーすれば下層のメニューが開くかわからないからですね。最後にユーザービリティを考慮して、下層のドロップダウンメニューがあるところには▶︎をつけて、更にマウスオーバーした際の背景色の変化も階層ごとに分けてつけていきたいと思います。HTMLHTMLは変化なしです。CSSまずは「a」の背景色から。#1e7dd4;}背景色は1つ上の階層の「a」にマウスオーバーした際の色に合わせて、階層が深くなるごとに少しずつ彩度を上げています。ここまでのサンプルがこちらです。サンプル6これだけでもかなりわかりやすくなってきましたね。▶︎については「ul」の擬似要素でつけます。子階層は▶︎の向きが下向きになるので、子セレクタ「>」で指定しています。右の「li」は▶︎の向きを左向きにします。WordPressで制作する際は、子階層を持っているメニューには「.has-children」みたいなクラスを自動でつけてくれるので、そのクラスの擬似要素でやってました。今回ドロップダウンメニューの記事を書くので、ググりまくって先人の皆様のお知恵を拝見したところ「なるほどね!」となる新たな発見がありました。子階層を持っているメニューに直接▶︎をつけるのではなく、子階層のメニューの側から1つ上の階層のメニューのところへ▶︎を配置するという方法です。確かにこれなら子階層を持っているメニューに、特にクラスをつける必要もなく、▶︎をつけることができます。ここまでのサンプルがこちらです。サンプル7できましたね。長い内容にお付き合いいただきありがとうございました。あとはおまけ的な内容だけです。おまけ!高さじゃなくて透明度をアニメーションさせるドロップダウンメニューせっかくなので、フワっとフェードインするタイプのドロップダウンメニューもやってみました。CSSCSSの変更箇所です。.5s;」でアニメーションは透明度のみに指定します。透明度をアニメーションさせるサンプルがこちらです。サンプル8今回のすべてのコード解説では省いていたドロップダウンメニュー以外の部分も載せます。class="read">「transition」でアニメーションさせつつ、第4階層(ひ孫階層)まで対応したコードになります。右の「Menu5」は逆方向に折り返すようにしています。href="">Child5</a></li></ul></li></ul></div></body>CSS(高さのアニメーション)「height」をアニメーションさせる方です。-20px;}CSS(透明度のアニメーション)「opacity」をアニメーションさせる方です。先ほど解説した通り、数行しか変更してないですが、こちらも全部載せます。-20px;}まとめこのブログをやっていなかったら、まず「CSSだけで作るドロップダウンメニュー」なんて改めて振り返ることはなかったと思いますが、「楽勝でしょ!」と思ってやってみると意外と詰まったり、いろいろ調べるうちに新たな発見がありました。子階層を持っている場合のアイコンの付け方は先人の皆様の知恵に感謝です。「ul」、「li」が多階層でいくつも連なるので、「このセレクタでの影響範囲はここまでだな」という感じで、CSSのセレクタを徹底的に意識して指定していかないと思わぬ挙動になります。これはかなり脳の筋トレになりました。ここまで深い階層のドロップダウンメニューは正直あまりないかもしれませんが、孫階層までは十分実用性があります。最後のコードをコピペすれば動きますので、この記事を参考に、いろいろやってみてくださいね。Day.GALLERYINSPIRATIONCONTACTTGIC。