javascript - jQuery を使用しない遅延ドロップダウン メニュー

Question

プレーンな JavaScript で書かれているが、jQuery に依存していないドロップダウン メニュー スクリプトを知っていますか?

CSSでこれを実現する方法は知っていますが、素敵なフェード効果を追加して、マウスがメニューの外に出てから1秒待ってから、マウスがメニュー領域内に戻らない場合は閉じたいと思います.

CSS の「transition」プロパティを使用してフェード効果を実装できると思いますが、mouseOut に遅延を追加する方法がわかりません

Answer 1

I like this one, it's only 1.2 KB, the code is simple to modify:

http://www.scriptiny.com/2008/11/drop-down-menu/

You can change the time by modifying the "t" variable.

Answer 2

-property を使用transition-delayして、次のことを行うことができます。

• ユーザーがメニューに入ったときに「遅延クラス」を削除します
• ユーザーがメニューを離れたときに「遅延クラス」を追加します

参照: https://developer.mozilla.org/en/CSS/transition-delay

または、次のようにすることもできます (注: 疑似コードのみ):

var timer       = null;

function onenter() {
    showSubMenu();
    clearTimeout(timer);
    timer = null;
}

function onleave() {
    overMenu = false;
    timer    = setTimeout( function () { hideSubMenu(); } , 1000 );
}