グローバルナビゲーションをhoverして、ドロップダウンリストが出る構造を解説します。

今回解説したいこと

グローバルナビゲーションをhoverして現れる、ドロップダウンリスト（下図）が、どういう仕組みなのか？を解説。

解説する意図

私は普段、a-blog cms というCMSを使っています。
標準の機能で、ドロップダウンリストが装備されているので、今回は実装していません。
しかし、構造が分からないと、cssで思い通りの装飾ができませんでした。
構造を理解しない体当たり的なcssの装飾も、その場しのぎにはなりますが、後々手直ししたり、やっかいになることもあるので、「仕組みを理解して、cssを実装する」のは大事だと実感。
そのため、自分が苦労した構造を解説しようかなと思いました。

▼参考になりそうな記事

今回、実装はしませんでしたが、実装する場合、参考にできそうでした。

苦戦したこと

ドロップダウンリストのHTMLの構造の理解に苦戦しました。

これってどういう構造・・・？

という壁にぶつかったんですね。
私は生粋の文系なので、構造（コードに限らず、あらゆる世の事象とか、万物。）を多少ファンタジック（？）に考えてしまう傾向があります。

これはあくまでもの例えですが、分かりやすく例えるなら、

・家のAlexaはもしかして自律的に動いているんじゃないか？ と感じる。
　（実際は、Alexaが音声認識してテキストデータをインターネットを通じて解析する・・・みたいなことが裏側で起こっているのかな？）

・無人島に何か持っていくなら、スマホと答える
　（ネットのインフラが整わないと無意味ですよね）

みたいな感じ（なんか上手い例えが出ないけどニュアンスは伝わるかな）。

そんな感じなため、最初は、ドロップダウンリストの入れ子の構造をパッと見で理解することができず、構造の理解にまず苦戦しました。

「え？ウソでしょ、そこから・・・？ドロップダウンリストは、ulとliの入れ子に決まってるじゃん」

と、思う方もいるでしょう。

そういった、「パッと見で、構造分かる（予想できる）人」は、対極の存在として、本当に尊敬します・・・！
私はちょっと難しい見た目のやつは、構造が大体分かりませんが、そんな人もいると思う！
（今時代はダイバーシティですから、こういう人もいるんだと権利を主張しておきます）

では、実際のコードを見てみる

私がよく利用している、a-blog cmsのテーマである、
「UTSUWA」のデモサイトを見てみます。

グローバルナビゲーションを検証

どうやって出現するのか？

▼「企業情報」をhoverしたら、子カテゴリーが出てきます。しかし、この子カテゴリーはどういう仕組みなのでしょうか？

▼検証ツールで見てみましょう！
グローバルナビゲーションの、global-nav-listがulになっていて、その中に各liが収容されていることが分かりますね。

▼「企業情報」のliをhoverしたら、子カテゴリーが出現します。
<li class="global-nav-item is-expand js-link_match_location">の部分をhoverしてみます。

▼liをhoverしてみた図

どうやって隠れているのか？

▼何もしない状態だと・・・<ul class="global-nav-list">　は、display:none;の状態です。

▼display:none;を外してみると、出現しますね。

と、いうことは？？

<li class="global-nav-item is-expand js-link_match_location">の部分をhoverしたとき、入れ子になっている<ul class="global-nav-list">（普段はdisplay:none;で隠れている）が出現します。

cssは下記のようになります。

.global-nav-item:hover > .global-nav-list{
    display: flex;
}

「 > 」、は、子セレクタという意味だそうです。
親のliをhover（.global-nav-item:hover）した後に出てくる、liを指定します。
このcss指定は難しいですね

親のliをhoverした後の、liがdisplay: flex;になることで、隠れていたliが見えるようになります。

▼ちなみに、図式化したらこんな感じです

まとめ

体当たり的なコーディングは限界があるので、きちんと構造を理解して実装することに越したことはないと思いました。
パッと見で構造を予測できる能力が欲しいです！
地道にこうやって解釈したりして理解していくしかないのかな〜。
何か良い方法知っている方は教えてください