ブログ
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()をさせる、という必要があるわけですね。