新型ナビメニュー「ポップアウト」の実装チュートリアル&参考Webサイトまとめ

popoutnav-top

 

新しいデザイントレンド「ゴーストボタン」同様に、ナビゲーションメニューに面白いアニメーション効果、「ポップアウト」を加えたWebサイトを見かけるようになっています。

 

 

今回はそんな新型ナビメニュー「ポップアウト」の実装チュートリアルと、参考にしたいWebサイトデザインをまとめています。今後のデザイン制作、プロジェクトに活用してみてはいかがでしょう。

 

チュートリアルはどれもデモサイトが用意されており、サンプルファイルを無料ダウンロードすることができるので、実装もスムーズに行うことができます。

 

 

 

詳細は以下から。

 

 

 

「ポップアウト」ナビメニューって何?

 

これまでナビゲーションメニューは、Webサイトのトップ部分または、サイドバーに表示されているのが定番でした。しかしJavascriptやCSSアニメーションが人気となった今、デザイナーはこれまでとは異なるUIアプローチを使い、ユーザー・エクスペリエンスを向上しようとしています。

 

特にヘッダーに配置されたハンバーガー(英: Hamburger)型アイコンを使い、ユーザーがクリック、ホバーするまでリンクを非表示にするテクニックは、すこしずつ認知されるようにもなってきています。オフキャンバス(英: Off-Canvas)ナビメニューは、ポップアウトエフェクトの代表例となります。

 

 

 

実装チュートリアル&デモまとめ

 

今回は「ポップアウト」ナビメニューの中でも、アニメーションにこだわったチュートリアルをあつめています。手がけているプロジェクトに合ったメニューエフェクトを探してみてはいかがでしょう。

 

[note_box]新しいテクニックのため、アニメーションや3Dトランスフォーム(英: 3D Transform)、HTML5フォームエレメントに対応していないブラウザでは、うまく表示されない場合があります。[/note_box]

 

 

Fullscreen Overlay Effects

ディスプレイ画面全体に、ナビメニューがアニメーション付きで広がります。11種類のアニメーションが選択できる点もポイントです。

FullscreenOverlayStyles

[button_square color=”red” url=”http://tympanus.net/Development/FullscreenOverlayStyles/”] デモページ [/button_square]  [button_square color=”blue” url=”http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/”] ダウンロードページ [/button_square]

 

 

 

Full-Screen Pop-Out Navigation

上記チュートリアル同様、ディスプレイ画面全体に半透明レイヤーを重ねて、リンクをアニメーション付きで表示します。

full-screen-pop-out-nav-featured-new(5)

[button_square color=”red” url=”http://codyhouse.co/demo/full-screen-pop-out-navigation/index.html”] デモページ [/button_square]  [button_square color=”blue” url=”http://codyhouse.co/gem/full-screen-pop-out-navigation/”] ダウンロードページ [/button_square]

 

 

 

Fullscreen Form Interface

すこし用途は変わりますが、フルスクリーンで展開されるフォーム内容を、ポップアウトで確認することができるチュートリアル。

FullscreenForm

[button_square color=”red” url=”http://tympanus.net/Development/FullscreenForm/”] デモページ [/button_square]  [button_square color=”blue” url=”http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/”] ダウンロードページ [/button_square]

 

 

 

Transition for Off-Canvas Navigations

Off-Canvasナビメニューを実装するチュートリアルで、さまざまな展開アニメーションが公開されています。

sidebartransitions(2)

[button_square color=”red” url=”http://tympanus.net/Development/SidebarTransitions/”] デモページ [/button_square]  [button_square color=”blue” url=”http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/”] ダウンロードページ [/button_square]

 

 

 

Perspective Page View Navigation

Webページに重なって見えなかったナビメニューが、超立体的に表示されるダイナミックさが素敵なチュートリアル。

PerspectiveNavigation(2)

[button_square color=”red” url=”http://tympanus.net/Development/PerspectivePageViewNavigation/”] デモページ [/button_square]  [button_square color=”blue” url=”http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/”] ダウンロードページ [/button_square]

 

 

 

Google Nexus Website Menu

左端に配置されたアイコンをホバーすると、各種リンクがふわりとアニメーション付きで登場します。

GoogleNexusMenu

[button_square color=”red” url=”http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/”] デモページ [/button_square]  [button_square color=”blue” url=”http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/”] ダウンロードページ [/button_square]

 

 

 

Animated Border Menus

ディスプレイの四隅に配置されたアイコンをクリックすると、奥行き感を演出したアニメーションが実現できます。

AnimatedBorderMenus

[button_square color=”red” url=”http://tympanus.net/Tutorials/AnimatedBorderMenus/”] デモページ [/button_square]  [button_square color=”blue” url=”http://tympanus.net/codrops/2013/09/30/animated-border-menus/”] ダウンロードページ [/button_square]

 

 

 

Smart Fixed Navigation

コンテンツを読み進めスクロールすると出現する、通称「トップへ戻る」ボタンとして活用されているあのボタンリンクも、より機能的なテキストリンクで表示します。

smart-fixed-navigation-featured

[button_square color=”red” url=”http://codyhouse.co/demo/smart-fixed-navigation/index.html”] デモページ [/button_square]  [button_square color=”blue” url=”http://codyhouse.co/gem/smart-fixed-navigation/”] ダウンロードページ [/button_square]

 

 

 

参考にしたいWebサイトデザインまとめ

 

Hanno

メニューアイコンをクリックすると、上部から半透明レイヤーがカーテン状に表示されます。

1popoutnav

 

 

 

Muse:

ぼんやりと浮かびあがる効果は、エレガントな雰囲気を演出することもできます。

27popoutnav

 

 

 

Yoobic

ハンバーガー型ラインアイコンをクリックすると、滑らかにナビメニューが表示されます。

6popoutnav

 

 

 

Medlio

Webページに重なるように、ナビゲーションメニューがスムーズに出現。

4popoutnav

 

 

 

Lightfoot & Wolfville Vineyards

フルスクリーンイメージを採用したサイトでは、ダーク系デザインがスタイリッシュに魅せます。

28popoutnav

 

 

 

Emmy Twenty Shoes

メニューアイコンをクリックすると、表示されているページがすこしスライドする形で、リンクメニューが表示されます。

10popoutnav

 

 

 

Huge

回転扉のようにくるりと回りながら表示される、ユニークなナビゲーションメニュー。

11popoutnav

 

 

 

Keegan Burkett

ボタンを押すと反対サイドから出現するナビメニュー。コンテンツのすくないポートフォリオサイトにも向いています。

21popoutnav

 

 

 

VHX

背景にビデオ動画を利用しているときも、問題なく表示されています。

13popoutnav

 

 

 

H. Creative Group

右端にレイアウトされたナビメニューをクリックすると、画面中央スリット部分にあわせてレイヤーが重なります。

14popoutnav

 

 

 

Sporting Edge

ドロップダウン式メガメニューのような使い方をしています。

23popoutnav

 

 

 

Visage

ナビメニューをクリックすると、右側からするりとナビメニューが表示される仕組みとなっています。

2popoutnav

 

 

参照元リンク : 30 Web Design Featuring Pop out Navigation Menus – Line25