Stu Nicholls | CSSplay | A circular menu with circular sub menus

CSSでゲームのような円形メニューを作るサンプル。
次のような、可愛い円形メニューが作れます。



アイコンにカーソルを合わせると、「HOME」といったメニュー内容が表示されるため、迷うことなく使えそう。

鉛筆にカーソルを合わせると、追加で２つのアイコンが表示され、次のアクションにいけます。



人型のアイコンにカーソルを合わせると、４つのアイコンが表示。



メールアイコンにあわせると次のアクションとなる４アイコンが表示。



という感じで、なかなかユニークなナビゲーションで、触っているだけでもなんとなく楽しい感じがします。
実装すると、それだけでアイデアの利いたサイトだなぁと思われそう。

こうした枠の幅を最小限にしてすべての項目を見せつつスマートに配置できるという点でＵＩとして優れていますね。

関連エントリ

• ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
• 高級感のあるナビゲーションバー作成Photoshopチュートリアル
• jQueryをナイスにナビゲーションに活用したサイト集
• デザインの参考になるユニークなナビゲーション集