どうも、シローです。
今回はメガナビゲーションの作り方についてまとめました。
メガナビゲーションとは
メガナビゲーションとはマウスでカーソルを合わせたときに、下にさらに要素が表示される、ちょっと凝ったナビゲーションのことです。
掲載する情報が多いサイトになると、情報にアクセスする導線設計が複雑になるのですが、
このようなときには、メガナビゲーションを使うと情報が綺麗に整理されることがあります。
実際に作ってみた
実際のコードはこちらです。
See the Pen
header-mega-navigation by shirosmith1793 (@phantom1793)
on CodePen.
解説
第一階層のリストのli要素(first-list-item)の下に第二階層のリスト(secondary-list)を入れていおり、
navのpositionをrelativeにして、secondary-listのpositionをabsoluteにしている点がポイントです。
また、今回はflexboxを使って、要素を中央にまとめています。