jQuery ドロップダウンメニュー マウスアウトから消えるまでにディレイが欲しい

TIPS 0 Takuya Kobayashi

ドロップダウンメニューでマウスが外れてからメニューが消えるまでの間にディレイが欲しいという場合、superfish.jsを使用すると簡単に実装できます。ドロップダウンメニューのディレイはなかなかかゆい所だったので助かります。

デフォルトのcssを読み込んでいますが、お好みに応じて自由にスタイルを変更可能です。superfishのダウンロード、詳細のオプションなどはこちら

ソース

<script src="superfish.js"></script>
<script>
$(document).ready(function() {
$('#superfish').superfish({
hoverClass: '.sf-menu', // ターゲットのclass
pathClass: 'overideThisToUse',
pathLevels: 1,
delay: 800, // マウスが外れてからメニューが消えるまでのディレイ(ミリ秒)
animation: {opacity:'show'},
speed: 'normal',
autoArrows: true,
dropShadows: true,
disableHI: false,
onInit: function(){},
onBeforeShow: function(){},
onShow: function(){},
onHide: function(){}
});
});
</script>
<link rel="stylesheet" href="superfish.css">
<nav>
<ul id="superfish" class="sf-menu">
<li><a href="">ホーム</a></li>
<li><a href="">グループ1</a>
<ul>
<li><a href="">下層ページA</a></li>
<li><a href="">下層ページB</a></li>
<li><a href="">下層ページC</a></li>
</ul>
</li>
<li><a href="">グループ2</a>
<ul>
<li><a href="">下層ページD</a></li>
<li><a href="">下層ページE</a></li>
<li><a href="">下層ページF</a></li>
</ul>
</li>
<li><a href="">グループ3</a>
<ul>
<li><a href="">下層ページG</a></li>
<li><a href="">下層ページH</a></li>
<li><a href="">下層ページI</a></li>
</ul>
</li>
</ul>
</nav>

--
以上