HTML/CSS フロントサイド

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

どうも、シローです。

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

メガナビゲーションとは

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

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

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

実際に作ってみた

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

 

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

  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-HTML/CSS, フロントサイド
-,

© 2021 Shiro's secret base