新感覚な円形ナビゲーションメニュー「Circular Navigation」

「Circular Navigation」は円形のナビゲーションメニューです。表示、非表示が可能で、切り替えのアニメーションがとてもかっこいいです。

Circular Navigation

CircularNavigation

Codropsで新感覚なナビゲーションメニューが紹介されていました。円形のメニューで表示、非表示が可能です。

まずはこの状態。ページ下部の+ボタンをクリックします。

CircularNavigation-demo-1

 

するとこの通り、メニューが表示されました。モーダル的に画面背景が暗くなります。

CircularNavigation-demo-2

 

別のナビゲーションメニューも紹介されています。こちらも素敵。MENUボタンをクリックします。

CircularNavigation-demo-3

すると角張ったタイルで円形となっているメニューが表示されました。うーんこちらもかっこいい。

CircularNavigation-demo-4

 

実装方法はリンク先に記載されています。CSSのtransformを駆使して実現してるようです。英語ではありますが、詳しい解説つきで勉強になります。参考にどうぞ。

 

Home > JavaScript > 新感覚な円形ナビゲーションメニュー「Circular Navigation」

Return to page top