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

jQueryって、美味しいの？

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

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

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

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

うん。なんかそんなイメージです。（偏見）

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にはまりました



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

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

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

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

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

ダウンロード後、展開するとこんな感じ。

jQuery-1.3.2.js　がjQueryの本体ファイル。
これをindex.htmlは一番最初に読み込んでます。



その後、CSSファイル側で飾りつけされたulとliが出てきます。

この部分のID、Classはそのままで、コピー、ブログのメニュー部にペースト。
ただし、CSSのIDが既存のCSSと被ると偉い事になるので、被らないようにしよう。

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


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です。

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

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

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

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

その他お勧めjQueryMenu

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




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



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辺りを探ってみるまでそのかっこよさはつたわらない。


以上です。

それでは、また。