もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第4回 ドロップダウンメニューの実装

この記事を読むのに必要な時間:およそ 5 分

jQueryを利用してナビゲーションを実装する

第3回・4回はナビゲーションの実装について説明しています。前回はアコーディオンパネルの実装を行いましたので,今回はドロップダウンメニューを実装してみましょう。まずは完成したドロップダウンメニューを見てください。

ドロップダウンメニュー

ドロップダウンメニュー

今回の記事で使うメソッドの紹介と簡単な説明

前回同様本題に入る前に,まずはドロップダウンメニューを実装するにあたって必要になるメソッドなどを紹介をしていきます。前回説明した通り,メソッドとは任意のjQueryオブジェクトに対して実行する命令文です。

jQueryオブジェクト

第1回,2回でセレクタについて説明しましたが,セレクタで取得できる要素はひとつではありません。例えば$('div')のようにすると,HTML上の全てのDIV要素をjQueryオブジェクトとして取得します。要素は配列としてHTML出現順に保存されていきます。Firebugのconsoleを使って確認してみましょう。gihyo.jpのトップページで実行してみます。gihyoのサイトではjQueryを使用していませんが,以下の手順に従ってFireQuery付属のjQuerifyを使えば,jQueryを使っていないサイトでもjQueryをロードさせることができます。

  1. jQuerifyをクリックしてjQueryをロードする(jQueryを使っていないページの場合)⁠

    jQuerifyをクリックしてjQueryをロードする

  2. jQuerifyが有効になったことを確認 $jq()で使えるようになる

    jQuerifyが有効になったことを確認 $jq()で使えるようになる

  3. consoleに実行したい命令を入力する

    consoleに実行したい命令を入力する

  4. 結果の出力

    結果の出力

出力されたデータの通り,jQueryオブジェクトには複数のDIV要素が内包されています。例えばDIV要素の数を知りたいときは$('div').lengthで調べることができます。⁠FireQueryでは$jq('div'))

DIV要素の数を調べる

DIV要素の数を調べる

each()

eachメソッドは対象の複数のjQueryオブジェクトに対してそれぞれ関数を実行するメソッドです。関数の引数にiを持たせることで,現在のループ回数を得ることができます。前述の$('div')に対してeachメソッドを実行してみましょう。

eachメソッドの実行

eachメソッドの実行

eachメソッド実行結果

eachメソッド実行結果

上記のサンプルでは,DIV要素の数分,iを実行しています。

hover()

hoverメソッドは対象のjQueryオブジェクトのmouseover,mouseoutイベントに任意の関数をbindするメソッドです。hoverメソッドの第1引数にmouseover,第2引数にmouseoutにそれぞれ割り当てる関数を持たせます。hoverメソッドの簡単なサンプルを用意しましたので確認してみてください。

hover()-HTML

<ahref="#">ここにマウスカーソルをのせたり外したりしてください</a>

hover()-JS

jQuery(function($){
  $('a').hover(function(){
    console.log('mouseover');
  },function(){
    console.log('mouseout');
  });
});
parent()

parentメソッドは対象のjQueryオブジェクトの親要素を取得して返すメソッドです。

parent()-HTML

<p><ahref="#"id="child">consoleにA要素の親要素を表示します</a></p>

parent()-JS

jQuery(function($){
  console.log($('#child').parent());
});

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入