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