jQuery+CSSで実装するナビゲーションメニュー総集編

スポンサーリンク

jQueryを使用したcssナビゲーション
メニューのまとめです。フェードや
スライド、滑らかにドロップダウンする、
などなど色々なメニューをまとめました。
それほど多用はしませんが、必要な
時に探すのが面倒なので備忘録的に。

という訳で、個人的なjQuery+cssメニューの総集編です。

全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・

Large Drop Down Menu

css-jquery-menu01

スライド&ドロップダウンメニュー

Search Box with Filter and Large Drop Down Menu

Fly-out Menu with jQuery and CSS3

css-jquery-menu02

カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。

Fly-out Menu with jQuery and CSS3

Rocking and Rolling Rounded Menu

css-jquery-menu04

面白いですね。マウスオーバーで回転しながらメニューが表示されます。

Rocking and Rolling Rounded Menu

Bubble Navigation with jQuery

css-jquery-menu05

これ凄いですね。まるでFlashです。どこかで使いたい。

Bubble Navigation with jQuery

jQuery Sliding Menu Plugin

css-jquery-menu08

シンプルでいいですね。ぬるっと降りてきます。

jQuery Sliding Menu Plugin

Color Fading Menu with jQuery

css-jquery-menu09

フェードエフェクト付きのシンプルなメニュー。

Color Fading Menu with jQuery

Garage Door Style Menu

css-jquery-menu10

その名のごとく、ガレージのシャッターのような動きをします。

Garage Door Style Menu

Simple jQuery Dropdowns

css-jquery-menu11

アニメーションも無い、シンプルなドロップダウンメニュー。自分でカスタマイズしたい方に向いてそうです。

Simple jQuery Dropdowns

Halftone Navigation Menu With jQuery & CSS3

css-jquery-menu13

なかなか面白いです。メニューにマウスオーバーすると、右側にドット柄のアイコンが浮かび上がる仕組み。

Halftone Navigation Menu With jQuery & CSS3

A Stylish Navigation Menu With jQuery

css-jquery-menu14

縦にスライドして切り替わります。シンプルでいいですね。

A Stylish Navigation Menu With jQuery

Animated Menus Using jQuery

css-jquery-menu15

フェードで切り替わるクールなメニュー。黒が似合いますね。

Animated Menus Using jQuery

Sliding Jquery Menu

css-jquery-menu16
下にゆっくりスライドする縦メニュー

Sliding Jquery Menu

LavaLamp

css-jquery-menu17

よく見かけるメニュー。マウスにあわせて半透明部分がアニメーションします。

LavaLamp

USING JQUERY FOR BACKGROUND IMAGE ANIMATIONS

css-jquery-menu18

よく紹介されていますね。マウスオーバー時のアニメーションが可愛いです。

USING JQUERY FOR BACKGROUND IMAGE ANIMATIONS

Outside the Box

css-jquery-menu19

アイコンがアニメーションで拡大していくメニューです。かわいい。

Outside the Box

Sexy Drop Down Menu w/ jQuery & CSS

css-jquery-menu20

セクシーにドロップダウンするクリック式のメニューです。

Sexy Drop Down Menu w/ jQuery & CSS

A Different Top Navigation

css-jquery-menu21

余白スペースに表示させる、という発想が素敵ですね。

A Different Top Navigation

Animated Drop Down Menu with jQuery

css-jquery-menu22

クリックでドロップダウン、マウスオーバーでアニメーションするメニュー。

Animated Drop Down Menu with jQuery

Smooth Navigational Menu (v1.4)

css-jquery-menu23

スムーズにドロップダウンする汎用的なメニュー。

Smooth Navigational Menu (v1.4)

jQuery iPod-style Drilldown Menu

css-jquery-menu24

iPod風のメニュー。Box内のみでスライド等します。

jQuery iPod-style Drilldown Menu

jQuery Drop Line Tabs

css-jquery-menu25

ラインごとスムーズに降りてくるメニューです。

jQuery Drop Line Tabs

Cut & Paste jQuery Mega Menu

css-jquery-menu26

なかなか素敵。小さいバーにマウスオーバーすると沢山のメニューがふわっと出現します。

Cut & Paste jQuery Mega Menu

droppy

css-jquery-menu27

ふわっと降りてくるマルチレベルのドロップダウンメニュー。

droppy

mb.menu.demo

css-jquery-menu28

様々な表現が可能なメニューです。必見。

mb.menu.demo

BubbleUp jQuery Plugin to Spice Up Your Menu

css-jquery-menu29

デモではソーシャルメディアアイコンに使っていますが、普通にアイコンメニューとして使えそうです。マウスオーバーでスムーズに拡大。

BubbleUp jQuery Plugin to Spice Up Your Menu

AutoSprites

css-jquery-menu30

cssスプライトとjQueryを組み合わせたフェードアニメーションメニュー。

AutoSprites

Grid Accordion with jQuery

css-jquery-menu31

クリックでスムーズに広がるメがタイプのメニュー。

Grid Accordion with jQuery

Creating a jQuery Dashboard

css-jquery-menu32

上部に隠すタイプのアイコンメニューです。マウスオーバーで右側にキャプションも出ます。

Creating a jQuery Dashboard

jStackmenu

css-jquery-menu33

ちょっと変わったアイコンメニューです。斜めにふわっと。

jStackmenu

How to Make a Smooth Animated Menu with jQuery

css-jquery-menu34

チュートリアル記事だけどこのまま使えそうです。ストンと下に落ちるメニュー。

How to Make a Smooth Animated Menu with jQuery

iconDock

css-jquery-menu35

こちらもアイコンが拡大するメニューです。

iconDock

jQuery Horizontal Tooltips Menu Tutorials

css-jquery-menu36

これ使ってみたい。ツールチップがアニメーションで付いてきます。

jQuery Horizontal Tooltips Menu Tutorials

Mega Drop Down Menus w/ CSS & jQuery

css-jquery-menu37

メガメニュータイプです。マウスオーバーでフェードインアウトする。

Mega Drop Down Menus w/ CSS & jQuery

Scroll Menu with jQuery Tutorial

css-jquery-menu38

マウスのみでスクロールする縦のメニューです。見ると分かると思いますが、このままだと使用できないので何かのヒントになれば。

Scroll Menu with jQuery Tutorial

Create a Cool Animated Navigation with CSS and jQuery

css-jquery-menu39

とても素敵な動きのするメニューなんですが、僕の脳では使いどころが思い浮かびませんでした・・

Create a Cool Animated Navigation with CSS and jQuery

Kwicks for jQuery and an awesome horizontal animated menu

css-jquery-menu40

一見普通のメニューですが、マウスオーバーで横にスライド、アイコンと説明が表示されます。

Kwicks for jQuery and an awesome horizontal animated menu

Sproing! – Make An Elastic Thumbnail Menu

css-jquery-menu41

サムネイルをメニューにしてしまおう、という発想。マウスオーバーで拡大します。

Sproing! – Make An Elastic Thumbnail Menu

Making A Slick Content Slider

css-jquery-menu42

スライダー形式のメニュー。フリックするイメージでスライドできます。

Making A Slick Content Slider

Solution For Very Long Dropdown Menus

css-jquery-menu12

なかなか素敵なアイデアかも。ドロップダウンする部分はマウスでスクロールダウンします。長いメニューでもすっきり収められますね。

Solution For Very Long Dropdown Menus

A Fresh Bottom Slide Out Menu with jQuery

css-jquery43

すっと上に飛び出すボタンメニュー。

A Fresh Bottom Slide Out Menu with jQuery

Slide Down Box Menu with jQuery and CSS3

css-jquery-menu44

かなりかっこいいです。css3なので使いどころは限られますが。。マウスオーバーで上下に画像とメニュー名で分かれます。

Slide Down Box Menu with jQuery and CSS3

Fluid Navigation

css-jquery-menu45

スムーズにキャプションが降りてくるシンプルなメニュー。

Fluid Navigation

Flickr horizontal menu

css-jquery-menu46

Flickrライクなメニューバー。フェードが丁度いい感じです。

Flickr horizontal menu

Sliding login panel with jQuery

css-jquery-menu47

デモはログインフォームですが、メニューにも使えそうなのでメモ。上からスライドするパネル。

Sliding login panel with jQuery

Create an apple style menu and improve it via jQuery

css-jquery-menu48

アップルライクなメニュー。マウスオーバーでスライド、アイコンが表示されます。

Create an apple style menu and improve it via jQuery

How to Build a Lava-Lamp Style Navigation Menu

css-jquery-menu49

ダイナミックにエレメントが移動してくるメニュー。

How to Build a Lava-Lamp Style Navigation Menu

Animated Navigation Menu with CSS3

css-jquery-menu50

シンプルにテキストがアニメーションします。

Animated Navigation Menu with CSS3

megamenu

css-jquery-menu51

フェードインするメガメニューです。国産。

megamenu

Horizontal Slide Out Menu

css-jquery-menu03

横に飛び出るメニューです。IEはcssでfloat指定すれば実装出来ます。

Horizontal Slide Out Menu

jDiv

css-jquery-menu52

Div要素をドロップダウンさせるメガメニュー。

jDiv

Nice Menu

css-jquery-menu53

マウスオーバーで横に広がるアニメーションエフェクト付きメニュー。cssのみのはcss3です、jQueryで同じ動きを可能にしています。

Nice Menu

jQuery MagicLine Navigation

css-jquery-menu54

アンダーラインがアニメーションで付いてきます。

jQuery MagicLine Navigation

animateToSelector

css-jquery-menu55

マウスオーバーでテキストとアイコンがアニメーション。

animateToSelector

Fancy Sliding Tab Menu V2

css-jquery-menu56

上ににゅっと飛び出すファニーなメニューです。かわいい。

Fancy Sliding Tab Menu V2

jQuery MegaMenu 2

css-jquery-menu57

メガメニューの進化Ver.ドロップダウンでフォームやリスト、テーブルまで実装。

jQuery MegaMenu 2

menumatic

css-jquery-menu58

心地よいスピードでドロップダウン、2段目は横にスライドするシンプルなエフェクトのメニュー。

menumatic

‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

css-jquery-menu59

‘Mootools Homepage’をインスパイアしたそうです。出現時のアニメーションが素敵。

‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Beautiful Background Image Navigation with jQuery

css-jquery-menu60

メニューが飛び出すと同時に背景もスライドで変更するダイナミックなUIのメニュー。

Beautiful Background Image Navigation with jQuery

Designing the Digg Header

css-jquery-menu61

Diggライクなクリック式のドロップダウンメニューです。

Designing the Digg Header

Super slick jQuery menu with CSS3

css-jquery-menu62

なかなか面白いです。回転させた写真にマウスオーバーするとツールチップが出ます。

Super slick jQuery menu with CSS3

jQuery Ribbon

css-jquery-menu63

リッチなリボンメニューを実装できます。

jQuery Ribbon

Fancy Apple-Style Icon Slide Out Navigation

css-jquery-menu06

アップル風のメニューの背後からかわいいアイコンが飛び出します。

Fancy Apple-Style Icon Slide Out Navigation

Little Boxes Menu with jQuery

css-jquery-menu64

ボックス内でメニューとコンテンツを実装。小さいボックスが崩れる感じが素敵です。

Little Boxes Menu with jQuery

Blend: jQuery

css-jquery-menu65

色をうまく使った、フェードするメニュー。

Blend: jQuery

CSS Dock Menu

css-jquery-menu66

アイコンを使ったドック風メニュー。リフレクションがかっこいいです。

CSS Dock Menu

jQuery Treeview Plugin

css-jquery-menu67

ツリータイプの縦メニュー。

jQuery Treeview Plugin

Side Column with Tooltip

css-jquery-menu68

なかなか素敵。縦のメニューでマウスオーバー時にツールチップがスライドします。

Side Column with Tooltip

Simple JQuery Accordion menu

css-jquery-menu70

アコーディオンタイプのメニュー。

Simple JQuery Accordion menu

Beautiful Slide Out Navigation

css-jquery-menu07

左にアイコンが隠れたメニュー。位置固定されていますので下にスクロールしてもメニューを表示できます。

Beautiful Slide Out Navigation

a Mega Menu

css-jquery-menu69

アイコンがドロップダウンするメガメニュー。下方部にあります。

a Mega Menu

Use Sprites to Create an Awesomeness-Filled Navigation Menu

css-jquery-menu71

cssスプライトを使ったフェードするメニュー。

Use Sprites to Create an Awesomeness-Filled Navigation Menu

jqDock v1.4

css-jquery-menu72

これもドックタイプのアイコンメニュー。Macのインターフェースは人気ですね。

jqDock v1.4

jQuery Radmenu Plugin

css-jquery-menu73

サークルタイプのメニュー。

jQuery Radmenu Plugin

以上、jqueryを使ったcssナビゲーション73個でした。尚、確認はChromeでしています。あまりにも似たような動きのものは多少割愛しています。

URL :
TRB :

Comments & Trackbacks (4)

Ads

Posts

Contact

Services