0

ドロップダウンメニューを作成しています。メイン画像には、ポップアップメニューを含むdivの表示を切り替えるロールオーバーとロールアウトイベントがあります。問題は、メイン画像をロールアウトすると、ポップアップメニューが消えることです（明らかに！）。モースが消えることなく、ポップアップメニュー上でモースを下に移動できるようにしたいと思います。また、画像にロールオーバー状態を持たせたい-ここに私のコードがあります：

<a class="mypage" href="mypage.html" id="mypageid" onmouseover="document.getElementById('menu-container').style.display = 'block';"  onmouseout="document.getElementById('menu-container').style.display = 'none';"></a>
<div id="menu-container">
    <ul>
        <li><a href="#"><img src="images/nav/button1.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button2.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button3.jpg" alt="" width="126px" height="21px"/></a></li>
    </ul></div>
4

3 に答える 3

1

この問題を解決するために使用される一般的なパターンは、タイマーでメニューを非表示にするのを遅らせることです。タイマーが起動する前にユーザーのマウスがトリガーまたはメニュー自体に再度入ると、タイマー（および非表示）がクリアされます。

var menuTimer = null;

$('.mypage, #menu-container').mouseenter(function(e) {
    $('#menu-container').show();
    clearTimeout(menuTimer);
});

$('.mypage, #menu-container').mouseleave(function(e) {
    menuTimer = setTimeout(function() {
        $('#menu-container').hide();
    }, 300);
});

例： http： //jsfiddle.net/xA6MH/

この概念は、バニラJSに簡単に適合させることができます。

于 2012-10-18T22:20:58.320 に答える
0

このページはあなたを助けるかもしれません。

http://cssmenumaker.com/css-drop-down-menu

彼らはメニューメーカーを持っています、あなたはCSSがどのように機能するかを見ることができます。

于 2012-10-18T22:21:54.980 に答える
0

この問題の決定的な解決策の1つであるAListApartのハイブリッドCSSドロップダウンを読むことを強くお勧めします。

于 2012-10-18T22:23:06.040 に答える