明日から使える！ユーザビリティに優れたリッチなグローバルメニューの作り方

ヘッダー固定のグローバルメニューを作る機会がありました。

グローバルメニューに大きめのアイコンを付けるようなデザインで高さを大きくしすぎてしまうと、ノートパソコン等の縦幅が小さい画面で見た時、表示できるコンテンツの量が狭くなってしまう問題があります。

そこで、この問題を解消するため、スクロールするとグローバルメニューが縮む仕掛けを実装してみました。

そうすることでファーストビューはデザイン性のあるリッチなグローバルメニューを演出しつつ、スクロールするとコンテンツを邪魔しないシンプルなグローバルメニューに変わります。
スマートフォンは解像度がPCに比べ小さいので、スマホサイトでも活躍しそうです。

それでは、実装の仕方を順を追って説明していきます。

スクロールすると高さが縮み、追従するグローバルメニューの実装方法

STEP.1　まずは、グローバルメニューをコーディング

PSDなどでデザインしたメニューをコーディングしていきます。
※縮んだ時との差がわかりやすいように縦幅を大きめにデザインしています。

See the Pen ヘッダーメニュー（通常） by kosuke (@uno) on CodePen.

CSS

.h_logo img {
	width:66%;
	transition: 0.2s;}
.fixed .h_logo img {
	width:40%;
	transition: 0.2s;
	padding-top: 13px;}

最後に

いかがでしたでしたか？
ロゴを大きく目立たせたい、メニューにアイコンをつけて賑やかに見せたいというときもストレスを感じさせない、動きのあるおしゃれなナビゲーションが作れますね。
ぜひ試してみてください。