[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ
Post on:2011年7月19日
sponsors
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。
※一部、jQueryを併用するものもあります。
The Apple.com navigation menu created using only CSS3
デモページ
CSS3だけで実装したApple.com風のナビゲーション。
CSS3 Dropdown Menu
デモページ
CSS3で実装するドロップダウン型のナビゲーション。
Sexy CSS3 menu
デモページ
縫い目風のかわいいデザインのナビゲーション。
[ad#ad-2]
Create Windows 7 start menu using CSS3 only
デモページ
CSS3だけで実装したWindows7のスタートメニュー。
Creating a pure CSS dropdown menu
デモページ
CSSだけで実装したリスト要素のドロップダウン。
Awesome Cufonized Fly-out Menu with jQuery and CSS3
デモページ
ダイナミックなアニメーションがたのしいナビゲーション（w/ jQuery）。
Slide Down Box Menu with jQuery and CSS3
デモページ
ボックスがアニメーションで次々に表示されるナビゲーション（w/ jQuery）。
Halftone Navigation Menu With jQuery & CSS3
デモページ
ハーフトーン（網点）のアニメーションが面白いナビゲーション（w/ jQuery）。
Making a CSS3 Animated Menu
デモページ
CSS3アニメーションを使ったナビゲーション。
CSS3 Minimalistic Navigation Menu
デモページ
アイコンからバーがアニメーションでスライドするナビゲーション。
Display social icons in a beautiful way using CSS3
デモページ
CSS3アニメーションでツールチップをふんわり表示。
Animated Nav
CSS3アニメーションでバーが延びるナビゲーション。
Flexible Nav
CSS3アニメーションで伸縮しアイコンを表示するナビゲーション。
Vertical Sliding Nav
垂直方向にパネルがスライドするナビゲーション。
Fading Button Background Images With CSS3 Transitions
デモページ
背景画像をフェードのアニメーションで変更するナビゲーション。
CSS3 dropdown menu
デモページ
IE6, 7も考慮した、CSS3で実装するドロップ。
Using CSS3 Transitions to create rich effects
デモページ
アニメーションで拡大・回転するナビゲーション。
Creating a Fancy menu using CSS3 and jQuery
デモページbr />
グラデーションも美しいLave Lamp風ナビゲーション（w/ jQuery）。
[ad#ad-2]
CSS only 'Click droplist menu'
クリックで開閉するメガドロップダウン。
CSS3 LightBox Menu
アニメーションで開閉するLightbox風のドロップダウン。
iPad - Slide / Hide Menu
アニメーションで順番にパネルが開閉するドロップダウン。
CSS3 - Playing Cards Menu
画像を使用しない、トランプを模したナビゲーション。
CSS3 animated dropdown menu#28
アニメーションとグラデーションが美しいドロップダウン。
Sweet tabbed navigation using CSS3
デモページ
CSS3のさまざまなプロパティを使ったタブナビゲーション。
Flared Borders with CSS
デモページ
すその広がりもCSSで作成したタブナビゲーション。
Styling Full Width Tabs with CSS3
デモページ
フルワイドのスタイリッシュなタブナビゲーション。
Breadcrumb Navigation with CSS Triangles
デモページ
三角もCSSで作ったパンくず。
CSS3 droplist menu with delay
アイコンがアニメーションでスライドするナビゲーション。
sponsors
