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

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

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

リスト要素で実装されたメニュー

CodePenChallenge: Menus


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

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

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

See the Pen Menu by CodePen (@codepen) on CodePen.

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

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

See the Pen CodePen Challenge: Menu by Adam Kuhn (@cobra_winfrey) on CodePen.

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

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

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

See the Pen CSS Grid Menu Panels by Ryan Mulligan (@hexagoncircle) on CodePen.

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

See the Pen The Menu by ycw (@ycw) on CodePen.

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

See the Pen isometric menu by Clément (@ClementRoche) on CodePen.

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

See the Pen Code <menu/&rt; by Ariana Lynn (@arianalynn) on CodePen.

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

See the Pen 14 | Menu #CodepenChallenge by Yiting Liu (@yitliu) on CodePen.

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

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

See the Pen CodePen Challenge: Menu by Nvagelis (@Nvagelis) on CodePen.

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

See the Pen MainMenu #CodePenChallenge by Mohamed Ayman (@Mohamed-Ayman) on CodePen.

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

See the Pen Menu cpc-menus #CodePenChallenge by Vincent Durand (@onediv) on CodePen.

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

See the Pen Menu #codepenchallenge by Jenning (@jenning) on CodePen.

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

See the Pen #CodePenChallenge - Menu by Tobias Glaus (@tobiasglaus) on CodePen.

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

See the Pen Menu #CodepenChallenge by Kasper De Bruyne (@kdbkapsere) on CodePen.

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

See the Pen Playful Hover Menu | #CodePenChallenge by Isman Fromes (@ismanfromes) on CodePen.

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

See the Pen RPG Maker Menu #CodePenChallenge by Eric Gruby (@ericgruby) on CodePen.

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

See the Pen Menu - #CodePenChallenge by Dejan Babić (@microfront) on CodePen.

sponsors

top of page

©2018 coliss