CSS3使用 かっこいいナビゲーションメニュー100事例と作り方。

先日、当サイトのグローバルナビデザインを少し変えてみました。そこでグローバルナビゲーションメニュー関連の情報です。

グローバルナビデザインの記事へ

グローバルナビを作る方法は主に、1.画像をCSSで切り替える。2.jQueryを使う。3.CSS3を使用する。の3つがあります。

今日は上記3つのうち、
主にCSS3で制作された(一部jQueryを併用)グローバルナビゲーション100事例と、その作り方が説明されている
海外サイトを紹介しましょう。

100個のグレートなCSSメニュー事例とチュートリアル

海外サイト「noupe」では、「100 Great CSS Menu Tutorials」という記事で、優れたナビゲーションメニューの100事例およびその作成、カスタマイズ方法を紹介。

実際のサイトは下記のURLからご覧下さい。
http://www.noupe.com/css/100-great-css-menu-tutorials.html

このサイトでは、主に以下のようなナビゲーションデモと、作り方を紹介しています。

※BM_Shotsというプラグインで、デモサイトのキャプチャーを表示しています。
なおリンク先のサイトの状況によっては、うまく表示されないことがあります。

CSS3で滑らかなメニューを作成する。

Create a Slick Menu using CSS3
http://insicdesigns.com/demo/css3/exp2/index.html

jQueryを使ってスムーズなアニメーションメニューを作成する方法。

How to Make a Smooth Animated Menu with jQuery
demoへ

CSSのみで楽しいアニメーションのナビゲーションメニューを作成。

Create a Fun Animated Navigation Menu With Pure CSS
demoへ

CSS3でメガドロップダウンのメニューを構築する方法。

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
demoへ

jQueryとCSS3で作る、グランジ風ランダム回転メニュー。

Grungy Random Rotation Menu with jQuery and CSS3
http://www.tympanus.net/Tutorials/GrungyRandomSlideOut

上記のようなナビゲーション100事例。作り方(ソース)も紹介されていますので、興味のある方は のぞいてみては如何でしょうか?

「100 Great CSS Menu Tutorials」
http://www.noupe.com/css/100-great-css-menu-tutorials.html

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply