jQueryでドロップダウンリストを自作する

tmb_jquery02 dropdown

jQueryでドロップダウンリストを作成する方法です。プラグインも豊富にありますが、いつものごとく勉強を兼ねて自作です。

スポンサーリンク

ドロップダウンリストの作り方

マウスオーバーでドロップダウンが出現し、マウスアウトでドロップダウンが引っ込む仕組みのものを作ります。

仕組みを簡単に説明すると、HTMLでリストを作成し、CSSでデザインを整え、jQueryのslideDown、slideUpメソッドで表示を切り替えます。slideDown、slideUpメソッドは要素をブラインドのように上下するアニメーションを実行するものです。

ソースコード

jQuery

//ドロップダウンメニュー
//.navBarクラスのli要素にマウスカーソルが乗ったときに実行する
$(".navBar li").hover(function(){
  $("ul:not(:animated)",this).slideDown()
},function(){
    $("ul.submenu",this).slideUp();
})

HTML

<ul class="navBar">
  <li><a href="/blog">Blog</a>
    <ul class="submenu" style="display: none;">
      <li></li>
    </ul>
  </li>
  <li><a href="#">Trial</a></li>
</ul>

ポイント

マウスオーバーの検知にhoverを使用することがポイントです。 hover(“マウスが乗った時に実行する関数”, “マウスが離れた時に実行する関数”)

マウスカーソルが要素の上に乗った時に、第一引数に渡した関数を実行します。マウスが要素から外れた時には第二引数が実行されます。要素内にある他の要素上にマウスカーソルが入った場合にも、マウスは”out”にならず、”over”のままです。例えばAというdiv内にBというimgがある場合、B上にカーソルが入ってもAのoutは発生しません。

引用元:jQuery日本語リファレンス

各行を解説します。

$(“ul:not(:animated)”,this).slideDown()
選択した要素を.slideDown()します。表示処理ですね。

$(“ul:not(:animated)”,this)は$(“hovarした要素の子要素”,hovarした要素)という意味です。 ul:not(:animated)はアニメーションしていないul要素という意味です。これを指定しないとマウスを当てるたびにバタバタアニメーションしてしまいます。

以上でございます。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev WordPressの新着記事をJSON形式で取得し外部サイトで表示する方法 next あなたの技術力は自己採点で何点ですか。

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です