UIデザインの参考にしたい!ナビメニュー用HTML/CSSスニペット40個まとめ

ultimate-nav-top (1)

ウェブサイトやブログにおいて、ユーザーがもっとも操作するインターフェースのひとつは、ナビゲーションメニューです。きちんと設置することで、サイトを構成する各コンテンツへとユーザーを移動でき、目次のような役割として活用できます。

 

 

今回は操作性にこだわった、最新のナビメニュー用HTML/CSSスニペットをまとめてご紹介します。これらのコードを利用して、よりユーザーの注目を集める、独自のナビゲーションを実装してみましょう。

 

 

 

詳細は以下から。

 

 

 

未来のナビメニューはこれだ!参考にしたいHTML/CSSスニペットまとめ

 

Spinny Header Menu

各種コンテンツをクリックすると、ヘッダー部分のロゴが回転します。

See the Pen Spinny Header Menu by Josh Nichols (@MrBlank) on CodePen.

 

 

 

Fly Out Navigation

左サイドに固定されたナビメニューは、カーソルを合わせることで文字テキストを表示します。

See the Pen Fly-Out Nav by Tiffany Rayside (@tmrDevelops) on CodePen.

 

 

 

Hover to Reveal Effect

黄色セクションにマウスカーソルを合わせることで、奥行き感たっぷりな3Dエフェクトに仕上げます。

See the Pen xwrMMX by Bennett Feely (@bennettfeely) on CodePen.

 

 

 

Square Menu Animation

マウスホバーで四角形のアイコン付きナビメニューを表示することで、ユーザビリティの改善にもつながります。

See the Pen Square menu animation by Sam Renault (@SperWalas) on CodePen.

 

 

 

Bubble Menu

半透明のカラーサークルをナビメニューに使用した、デザイン性の高い作品。

See the Pen Bubble Menu by Jan Drewniak (@j4n) on CodePen.

 

 

 

Pull Menu – Interactive Menu Concept

下方向に引っ張ることで、各コンテンツを移動させるユニークな仕掛け。

See the Pen Pull Menu – Menu Interaction Concept by Fabrizio Bianchi (@fbrz) on CodePen.

 

 

 

Elastic SVG Sidebar Material Design

こちらは左方向から引っ張ることで、コンテンツを表示できる仕組みです。

See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.

 

 

 

CSS Overlay Navigation Animation

マウスクリックすることで、マテリアルデザインの原則に沿った、フルスクリーンで展開するアニメーションエフェクト。

See the Pen CSS Overlay Navigation Animation by Ryan Mulligan (@hexagoncircle) on CodePen.

 

 

 

Material Design Navigation

アイコンメニューをクリックすることで、レイヤーを重ねるように立体的にコンテンツが出現します。

See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.

 

 

 

Menu Animated Dropdown and Icon

ハンバーガーアイコンをクリックすると、フルスクリーンを覆うようにナビメニューが表示されます。

See the Pen Menu Animated Dropdown and Icon by Ariana Lynn (@arianalynn) on CodePen.

 

 

 

The Fold

モバイル端末を想定したナビメニューは、クリックすることで折りたたむようなエフェクトが素敵。

See the Pen The Fold by Tiffany Rayside (@tmrDevelops) on CodePen.

 

 

 

Megamenu.js

レスポンシブデザインに対応した、メガメニュー・ナビゲーションメニューを実装できるJSプラグイン。

See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek (@riogrande) on CodePen.

 

 

 

Navigation Animated Animation

See the Pen Animated navigation “button” by Robin Bertilsson (@RobinBertilsson) on CodePen.

 

 

 

Menu Concept

アイコンをクリックすることで、水平方向にナビメニューが伸縮アニメーションで展開されます。モバイル端末にも対応しています。

See the Pen Menu concept by Rune Sejer Hoffmann (@RSH87) on CodePen.

 

 

 

Header Search

検索ボタンをクリックすることで、ナビメニューを隠すようなかたちで、3種類のアニメーションが展開されます。

See the Pen Header Search by Maurice Conchis (@mauriceconchis) on CodePen.

 

 

 

Awesome Bootstrap Sidebar Navigation

人気フレームワーク Bootstrap に対応する、左サイドバー型ナビメニューを実現できます。

See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.

 

 

 

Flexbox Off-Canvas Menu

カスタマイズ性の高いdisplay: flex;を利用した、Off-Canvas ナビメニュー。

See the Pen Flexbox Off Canvas Menu by Oliver Knoblich (@oknoblich) on CodePen.

 

 

 

Multi-device Scrolling Menu

スクリーンサイズや表示端末の違いに関係なく、水平方向にスワイプできるナビメニュー。

See the Pen Multi-device scrolling menu by Alberto (@ac_coding) on CodePen.

 

 

 

Smart Fixed Navigation

左下にナビメニューを固定することで、いつでもコンテンツを移動することができ、より使いやすい配置を提案するナビメニュー。

See the Pen Smart Fixed Navigation by CodyHouse (@codyhouse) on CodePen.

 

 

 

Mobile Navigation Animation

画面が対角線状に真っ二つになり、ふわりと各種コンテンツが浮かびあがる、ユニークなアニメーションを採用しています。

See the Pen Mobile navigation animation by Karlo Videk (@karlovidek) on CodePen.

 

 

 

Circle Menu

アイコンをクリックすると、円形サークル状に各種メニューアイコンをポップアップ表示する、モバイル端末への実装も。

See the Pen Circle Menu by Willmer Barahona (@wbarahona) on CodePen.

 

 

 

Material Design Pie Menu

クリックすることで、パイチャート状に2段階で展開するナビメニュー。

See the Pen material design pie menu by Willmer Barahona (@wbarahona) on CodePen.

 

 

 

CSS Gooney Menu

ボタンをクリックすることで、スライム状の滑らかなCSSアニメーションが特長。

See the Pen CSS Gooey Menu (Version 4) by Lucas Bebber (@lbebber) on CodePen.

 

 

 

Rollover States

ナビメニューにカーソルを合わせたときのロールオーバー・エフェクトを、魅力的なアニメーションで仕上げます。

See the Pen Rollover States by Khurram Siddiqi (@ksiddiqi) on CodePen.

 

 

 

A Hover Effect

ハンバーガーメニューをつかって、CSSのみでユニークなアニメーションを表現しています。

See the Pen A HOVER EFFECT by JUNGLE (@junglelin) on CodePen.

 

 

 

Vertical Color-Adapting CSS Menu

クリックで縦方向に展開するナビメニューは、コンテンツの背景色に応じて、色が自動的に適用されます。

See the Pen Vertical color-adapting CSS menu by Ines Montani (@inesmontani) on CodePen.

 

 

 

Blurry Menu

各ナビメニューにマウスホバーを合わせることで、他の文字テキストをぼかして表示します。

See the Pen Blurry Menu by Joe Hana (@JoeHana) on CodePen.

 

 

 

SVG UI Navigation Concept

右側にある矢印をクリックすると、アイコンがぬるりと滑らかなアニメーションで表示されます。

See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.

 

 

 

Interface Animation – Music Player

左上のアイコンをクリックすることで、音楽プレイヤーの見せ方を切り替えることができます。

See the Pen Interface Animation – Music Player by Nerios Lamaj (@nerios) on CodePen.

 

 

 

Simple Animated Navigation

ナビメニューにマウスホバーするだけで、ドロップダウン形式で展開します。

See the Pen Simple animated navigation by Mikhaël Rindone (@mikhael-rindone) on CodePen.

 

 

 

Landing Page

マウスカーソルをメニューを合わせることで、下線ラインが付いてくるというナビゲーションメニュー。

See the Pen Landing page by Jack Salfia (@JackSalfia) on CodePen.

 

 

 

Strikethrough Hover

各メニューにマウスホバーすることで、文字テキストの真ん中をラインで分割するアニメーション。

See the Pen Strikethrough hover by tsimenis (@tsimenis) on CodePen.

 

 

 

okayNav Demo

表示しているスクリーンサイズに応じて、表示するナビメニュー用コンテンツ数を調整することができます。別ウィンドウで確認することで、より分かりやすく動きを確認することができます。

See the Pen okayNav Demo by Vergil Penkov (@VPenkov) on CodePen.

 

 

 

Lock / Unlock Navigation

Unlock ボタンをクリックすることで、非表示となっていたコンテンツをクリックできるようにします。

See the Pen Lock/Unlock Navigation by Andrew Canham (@candroo) on CodePen.

 

 

 

Easy Ionic Side Menu Transitions

用意されたエフェクトボタンをクリックすることで、左固定ナビメニューにアニメーションを加え、各コンテンツを表示することができます。

See the Pen Easy Ionic Side Menu Transitions by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

Aquatilis Scroll Nav

コンテンツの読み進め具合をプログレスバーで表現し、タブをクリックすることで各コンテンツに移動することもできます。

See the Pen Aquatilis Scroll Nav by Tim Holman (@tholman) on CodePen.

 

 

 

Pure CSS Header Menu

CSSのみでスタイリングされた、ボヨンとしたふしぎな動きをCSSアニメーションで再現しています。

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.

 

 

 

Context Menu

カンバス上で右クリックすることで、各種メニューを表示することができる、実用性の高いメニューエフェクト。

See the Pen Context Menu by Ryan Morr (@ryanmorr) on CodePen.

 

 

 

Tools & Toys Navigation

モバイルとデスクトップ、そしてタブレット端末ごとにそれぞれスタイリングされた、ラインが特長的なナビメニュー。

See the Pen ‘Tools & Toys’ navigation by Derek Palladino (@derekjp) on CodePen.

 

 

 

Navigation Animation

効果的に視線を集めることができる、シンプルなホバーリンク・エフェクトを15種類揃えています。

See the Pen Navigation Animation by EvyatarDa (@EvyatarDa) on CodePen.

 

 

 

コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット40個まとめ

こちらのエントリーでは、一緒に利用したいウェブ用コンポーネント素材を多数揃えています。

latestsnippet2016april-top