よく使うリスト要素のメニュー・ナビゲーションをデザインするスタイルシートのアイデア・実装方法のまとめ

リスト要素を使ったシンプルなHTMLで実装されたメニューやナビゲーションをどのようにデザイン、スタイルするかのコンテストがCodePenで開かれているので紹介します。

次のプロジェクトで使用できそうなアイデアから、こんなの初めて見る！ ここから更に広げていけそう！ といった面白いアイデアまで、さまざまなメニューの実装が楽しめます。

CodePenChallenge: Menus

CodePenChallengeの今回のお題は、メニューです。
実装のポイントになるのは、

• ネストされたアイテムを常に表示させておくのか、サブメニューとしてインタラクションを使用するか。
• スマホのような小型スクリーンとワイドスクリーンにどのように対応させるか。

リスト要素で実装されたメニューにさまざまなデザイン、アニメーションやインタラクションを与えます。ベースになるHTMLは、下記のようになります。

まずは、アニメーションが楽しいドロップダウンのメニュー。
下記のデモ表示で見ると、幅が狭いので、普通のハンバーガーメニューになっていますが、広いスクリーンで表示すると今まで見たことがない楽しいドロップダウンのメニューを楽しめます。
派手な動きに目を奪われがちですが、細かいところのアニメーションがすごいです。

デモを別ウインドウで開く時は、右上「Edit on Codepen」を右クリックしてください。

そのハンバーガーメニューがメインのデモです。
ハンバーガーメニューがアニメーションで拡大・縮小します。

ハンバーガーメニューの実装は多くの場合、JavaScriptを使用します。このデモはピュアCSSで気持ちいいアニメーションとインタラクションが実装されています。

ハンバーガーメニューの進化系でしょうか。よく見るとアイコンのデザインが通常のハンバーガーではないことに注目です。CSS Gridを使用したダイナミックなメニューが表示されます。

初めて見る斜めにレイアウトされたメニューです。斜めの状態でも数字は回転させ、正位置で表示され、ホバーすると、各アイテムに寄り添います。

同じ斜めのメニューですが、こちらはアイソメトリックになっているメニューです。トリガーがふわふわしているの、いいですね。

Tommorow Nightのカラースキムでデザインされたメニュー。クリックするとメニューが表示されるのですが、ホバー時のアニメーションにも注目です。

ホバーすると、ズームとプッシュのアニメーションが同じタイミングで完成するのが気持ちいいですね。落書き風のデザインも楽しいです。

3Dにフリップするアニメーションが気持ちいいメニューです。デスクトップ時でもスマホ時でも同様のアニメーションが楽しめます。

フルスクリーン型メニューも最近増えてきました。さらに分割レイアウトが使用されており、メニューだけでなく、いろいろなコンテンツにも利用できると思います。

上2つ「Home」「About」にアニメーションはなく、3つ目「Widget」と4つ目「KaBoBs」にアニメーションが仕込まれています。パラパラ、パタパタする動きは面白いですが、充分なスペースが必要ですね。

はじけるようなアニメーションが楽しいメニューです。デモは下記のサイズでは楽しめないので、別ウインドウで開いてみてください。

スマホでもデスクトップでも、同じようにアニメーションが楽しめます。CSSのみで実装されており、リスト要素に「display: flex;」を適用して、レスポンシブ対応のレイアウトとアンカーエリアの確保がされています。

ミニマルにデザインされたメニューで、アニメーションも楽しいですが、ページ内の現在位置を表示するという機能性も備えています。

アイコンが全体とサブメニューで統一されているので、分かりやすいメニューです。

パズル型？のメニューです。MENUを順番にホバーすると、メニューが表示されます。

RPG Maker 2003にインスパイアされたデザインがかわいいメニュー。

モーフィングのアニメーションが楽しいですね。デスクトップでもスマホでも楽しめます。