[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ

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

top of page

©2018 coliss