jQueryでやる!ブログで使えそうな楽しいナビメニュー45

  • 2010/01/27
  • このエントリーをはてなブックマークに追加

スポンサーリンク

ナビゲーションメニュー
色々とjQueryのサンプルやプラグインが掲載されていて、眺めてるだけで楽しくなるエントリー。

ナビゲーションメニューで悩んだ時に使えそうです。
45 jQuery Navigation Plugins and Tutorials - Noupe

さて、いまや多くの人たちから支持を得ているjQueryで、もっと楽しいブログにしてみるのもいいかもしれない。
jQueryは何もWEBサイトだけのものではありません。条件さえクリアすればブログだって使えるのです。

あなたのブログがほんの少しのjQueryで生まれ変わるかもしれない。

わかる方はさくっと上のリンクを叩いて色々試して見てください。
jQueryってそもそも何、って言う人が居ましたら以下を。

IT/Web業界に強い転職サイトGreen

jQueryって、美味しいの?


結構美味しいです。
多くの方に支持されるにはやはりそれなりの理由があります。

超、簡単に説明すると
あなたが書いた僅かな命令で10くらいの仕事をしてくれるJavaScript
です。

さらに言うと、jQueryプラグインは、あなたが書いた僅かな命令をjQuery本体に働きかけ、さらに多くの命令を処理させます。

あなたの1の労力でjQueryは10の仕事をしてくれる凄いやつです。

うん。なんかそんなイメージです。(偏見)


jQueryをブログに導入するには


meta部分にでも以下のコードを入れるだけ。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

ちなみにこれだと1.3.2のバージョンを読み込みます。
この数字を1.3にすると1.3のなかで最新のものを読み込むようになります。

ちなみに以下のような方法でもOKだったり。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></script>

ミニもあります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

※注意:2010年1月現在jQueryは1.4があります。

これらはGoogleが提供しているサービスの1つです。
これによって誰でも手軽にjQueryを使えるようになったともいえます。

わざわざGoogleを経由するのは嫌だという人は以下の方法で。

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

このように直接ファイルを指定しよう。
その場合、自分でアップロードしたjQueryJavaScriptを読み込む為、そもそもJavaScriptのアップロードが許可されていないブログサービスではこの方法は使えません。

また、画像サーバーが大体違う場所にあるケースがおおいので、URLは絶対パス(http://~始まるURL)になるかと思います。

プラグインのご利用には、JavaScriptを直接読み込むこちらの方法が採用されますので、JavaScriptファイルが使えないブログ(アップロードできないブログ)では実現は難しいです。


プラグインの簡単な仕組み


jQueryは別にプラグインを導入しなくてもある程度の動作を簡単な命令で行う事が出来ます。

昔書いた以下の記事からでもわかりますが、プラグイン無しでもかなり色々できるのです。
Re:zapa氏 今更ですが、jQueryにはまりました

jQuery

図であらわしているjQueryJavaScriptが、上の章で紹介している「jQueryの読み込み」です。
プラグインを活用する場合は、上記のようにプラグインのJavaScriptの読み込みが必要になります。


ためしに1つダウンロードしてみよう


アイコンメニュー
まずはプラグインJavaScriptが必要ないものを試してみよう。

こちらでサンプルデモが確認できます。

ダウンロードは以下のエントリの最下部の方にあります。
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops

ダウンロード後、展開するとこんな感じ。
jQuery
jQuery-1.3.2.js がjQueryの本体ファイル。
これをindex.htmlは一番最初に読み込んでます。

jQuery

その後、CSSファイル側で飾りつけされたulとliが出てきます。
メニュー
この部分のID、Classはそのままで、コピー、ブログのメニュー部にペースト。
ただし、CSSのIDが既存のCSSと被ると偉い事になるので、被らないようにしよう。

CSSファイルを開けば、上で書かれているul liがどんなデザインなのかを確認できます。
CSS

HTML側の下のほうには以下のような記載があります。

$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});

この命令は殆ど触る必要はありません。
変更するとすれば、アイコンの画像の場所。

ダウンロードした状態ではアイコンがありませんので、用意する必要があります。
pngの背景が透明な横85px程のアイコンが必要になりますね。

ブログでこうした画像を利用する場合は、まず画像を一度ブログのサーバーにアップロードして、その画像の絶対パス(http://~始まるフルURL)を取得しましょう。

このフルURLを先ほどのCSSの画像を指定している部分に入れればOKです。

あと、とりあえずバックアップは忘れずに。

殆どの場合、上に書いたとおり
1)まずjQueryファイルを読み込む
2)必要であればプラグインJavaScriptを読み込む
3)ID,Classなどでメニューが作られている
4)最後にそのID、Classなどを記載したコードが記載されている
5)CSSファイルにはそれらID、Classに対するデザインが記載されている事が多い

こういう構成になってます。
ダウンロードしてまずはhtmlファイルを開いてみると、非常に簡単な構造になっているのが確認できると思います。

まだ試した事が無いという方はお試しアレ。



その他お勧めjQueryMenu


jQuerymenu
なかなかユニークな動きをします。
ダウンロード/チュートリアル サンプルデモ



拡大縮小menu
マウスポインタをあてるとあたった画像が拡大する。
ダウンロード/チュートリアル サンプルデモ



jQuery File Tree | A Beautiful Site
ファイルマネージャ
ブログでは、、まぁ使わないかもしれませんが、WEBサーバ借りてる人とかいたら簡単にファイルの公開が出来ちゃったりするツールですね。
ダウンロード/チュートリアル サンプルデモ



キュートなプルダウン
ちょっとばかりキュートなプルダウン式のジャンプメニュー。
ダウンロード/チュートリアル サンプルデモ



タブメニュータイプ
スタイリッシュなタブメニュータイプ。
サイドバーが大変な事になってるネタ帳みたいなブログに最適ですね!
ダウンロード/チュートリアル サンプルデモ


こういうのが大量に紹介されているエントリです。是非とも制作のお供に!
45 jQuery Navigation Plugins and Tutorials - Noupe


jQueryおまけ10個


正直ブログサボってたせいでだいぶなにかしら紹介しきれてない色々をついでにここに。

25 jQuery Plugins for Working with Forms – DesignM.ag
フォーム周りのjQueryまとめ。

Twitter風に残り文字数を表示してくれるテキストエリア実装jQueryプラグイン:phpspot開発日誌
かなり簡単に文字制限がかけれるようになりますね。

Google Map Apiを試してみた(ついでにjQueryのプラグイン化) | THE HAM MEDIA
ついでにjQueryプラグイン化しちゃったようで。

大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」:phpspot開発日誌
たしかこういうのインクリメント検索っていうんでしたっけ。

15 useful jQuery plugins and tutorials
サイト制作に役立ちそうな15のjQueryプラグイン&チュートリアル。

37 Fresh jQuery Image And Gallery Display Solutions | Graphic and Web Design Blog -Resources And Tutorials
37つものjQueryイメージギャラリー。そうとう渋いのからかっちょいいのまで。

これは使える!JavaScript&jQueryの便利なショートコード集 - IDEA*IDEA ~ 百式管理人のライフハックブログ
パート1とパート2があります。両方ともかなり参考になったので。

ASCII.jp:実務で使えるjQueryプラグイン3選|Web制作の現場で使えるjQuery UIデザイン入門
テーブルソートは確かに実務的ではありますよね。

コンテンツにエフェクトを掛けるjQueryプラグイン10個 - かちびと.net
ああ、これいいなぁ。忘れないうちに記事に残しときます。

25 Incredible jQuery Slider Tutorials and Plugins | WebDesignFan.com
これもお勧め。スライダー式の画像切り替え。demo辺りを探ってみるまでそのかっこよさはつたわらない。


以上です。

それでは、また。



スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

jQuery jQuery

そもそもjQueryって日本語的にどう発音するのが正しいんでしょうか?

2010/01/27 Wed 17:25| URL|

名前を名乗れない人 No title

ジェイ・クエリーじゃないの。
http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.2.6/chapter01/001/index.html

そもそもエントリの内容とタイトルはマッチして無いよね。

2010/01/27 Wed 17:38| URL|

- 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010/01/27 Wed 18:51| |

- 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010/02/09 Tue 19:15| |

WEBモンスター ブクマしますた(@@)

山田さんはじめまして。
WEBモンスターです。

冒頭のにょきとでるナビは使えそうですね。
僕は2カラムなのでこういったナビゲーションは必須です。


画像作ればオリジナルも行けますかね??
良い情報に感謝します!

2010/02/26 Fri 14:17| URL

FC2Ad

広告


ハリウッドエージェントジャパン IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 松尾茂起とランチ・ディナーをしてみませんか? | ウェブライダーの求人募集 レンタルサーバー「ヘテムル」 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html