メガナビゲーションの作り方

どうも、シローです。

今回はメガナビゲーションの作り方についてまとめました。

メガナビゲーションとは

メガナビゲーションとはマウスでカーソルを合わせたときに、下にさらに要素が表示される、ちょっと凝ったナビゲーションのことです。

掲載する情報が多いサイトになると、情報にアクセスする導線設計が複雑になるのですが、

このようなときには、メガナビゲーションを使うと情報が綺麗に整理されることがあります。

実際に作ってみた

実際のコードはこちらです。

 

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を使って、要素を中央にまとめています。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です