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

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

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

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

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

[javascript]
$(function(){
$(‘#menu-nav li’).hover(function(){
$(this).find(‘ul’).not(":animated").slideDown(200);
}, function(){
$(this).find(‘ul’).slideUp(400);
});
});
[/javascript]

 

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

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

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