WordPressの簡単なグローバルメニューの実装

Pocket

小ネタになりますがWordPressの「外観 > メニュー」を使った場合のグローバルナビゲーションで、下層メニューをスライドダウンで表示したい場合のJavaScriptです

まずはグローバルナビゲーションの設置ですが、header.php などの任意の場所に以下を実装します。

 wp_nav_menu(array(‘theme_location’ => ”, ‘container’ => false, ‘menu_class’ => ‘任意のクラス名’));

オプションはおなじみのWordPres Codexをご参照ください。 そしてJavaScriptです。

<br />
$(function(){<br />
  $(&#8216;#menu-nav li&#8217;).hover(function(){<br />
    $(this).find(&#8216;ul&#8217;).not(&quot;:animated&quot;).slideDown(200);<br />
  }, function(){<br />
    $(this).find(&#8216;ul&#8217;).slideUp(400);<br />
  });<br />
});<br />

 

あとはCSSでお好きなようにというところですが、ポイントはnot(":animated") ですね。

slideDown() と slideUp() は animate() のラッパメソッドになるので、:animated でアニメーションが実行されているかどうか状態が取得できます。
これを指定しないと、例えばグローバルメニューの上でマウスを素早く動かすと
前のアニメーションが終了しないうちに次のアニメーションが実行されて、何度もカクカクとメニューが表示されてしまいます。

それを制御するためにアニメーション実行中の場合だけにslideDown()をさせる、という必要があるわけですね。