0

次のナビゲーションを作成しました (ソースは、ターゲットと問題の説明の下にあります)。

目標

最終的な結果として私が望むのは: ナビゲーション ポイントにカーソルを合わせるとすぐにサブナビゲーションが表示されます。ナビゲーション ポイントを変更すると、他のすべてのメイン ナビゲーション (サブナビゲーションを含む) ポイントは直接非表示になりますが、完全なナビゲーションを終了すると、すべてが非表示になるまでに数秒の遅延が必要です。

問題

最初のポイント「ホーム」をナビゲートすると、サブナビゲーションポイント「ニュース」が表示されます。「ホーム」を離れるとすぐに、「ニュース」が消えるまで 250 ミリ秒の遅延がありますが、これまでのところ問題ありません。

ここで、マウスをサブナビゲーション ポイント「ニュース」に移動しようとすると、最初のナビゲーション ポイント「ホーム」を離れると、マウスが 2 番目のナビゲーション ポイントに隠れてしまいます。

HTML

<div id="menu">
      <ul id="dropdown">
            <li>
                  <a href="#">Home</a>
                  <ul>
                        <li><a href="#">News</a></li>
                  </ul>
            </li>
            <li>
                  <a href="#">Navlevel 1</a>
                  <ul>
                        <li><a href="#">Navlevel 2</a></li>
                        <li>
                              <a href="#">Navlevel 2</a>
                              <ul>
                                    <li><a href="#">Navlevel 3</a></li>
                                    <li><a href="#">Navlevel 3</a></li>
                                    <li><a href="#">Navlevel 3</a></li>
                              </ul>
                        </li>
                  </ul>
            </li>
      </ul>
</div>

CSS

/* NAVIGATION ELEMENTS */
ul#dropdown
{
    margin: 0;
    list-style: none;
    color: #FFFFFF;
}

ul#dropdown ul
{ 
    margin: 0;
    list-style: none;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #000000;
}

ul#dropdown ul ul,ul#dropdown ul ul ul
{
    top: -1px;
    left: 100%;
    border: 1px solid #000000;
}

ul#dropdown li
{
    float: left;
    display: inline;
    position: relative;
    width: 165px;
    border-right: 1px solid #ffffff;
    line-height: 50px;
}

ul#dropdown ul li
{
    width: 100%;
    display: block;
    background-color: #e1e6e8;
    border: 0;
    height: 30px;
    line-height: 30px;
}

/* Root Menu */
ul#dropdown a
{
    float: left;
    display: block;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    text-align: center;
}

ul#dropdown li:hover a:hover
{
    font-weight: bold;
}


/* 2nd Menu */
ul#dropdown li:hover li a
{
    float: none;
    color: #ffffff;
    text-align: left;
    width: 153px;
    padding-left: 10px;
    color: #000000;
}

/* 2nd Menu Hover Persistence */
ul#dropdown li:hover li a:hover
{
    background-color: #aab6bb;
}
/* END NAVIGATION ELEMENTS */

Jクエリ

$('#dropdown li').mouseenter(function() {
      $('#dropdown li').not(this).children('ul').hide(); // Hide other child lists
      $(this).children('ul').show(); // Show this one
});
$('#dropdown').mouseleave(function() {
      var lists = $('li ul', this);
      setTimeout(function() {
            lists.hide(); // Hide all lists
      }, 250); // After 1/4 second
});

その問題で私を助けてくれる人がいることを願っています。追加情報が必要な場合はお知らせください。

どうもありがとう、ロルフ

4

1 に答える 1

0

更新 (コードと jsfiddle URL): ここでは、目的の結果を含む jsfiddle を実行します http://jsfiddle.net/7PFDv/

私があなたの CSS に追加した唯一のものは、暗い背景 (ナビゲーションが見えるようにするため) と次のことでした。

ul#dropdown ul
{
    display: none;
}

そして、あなたのjqueryを次のように編集しました

$('#dropdown li').mouseenter(function() {

      $(this).children('ul').show(); // Show this one
});

$('#dropdown>li').mouseleave(function() {

      //$(this).children('ul').hide(); // Show this one
    var lists = $(this).find('ul');
      setTimeout(function() {
            lists.hide(); // Hide all lists
      }, 250); // After 1/4 second

});

$('#dropdown>li li').mouseleave(function() {

      $(this).children('ul').hide(); // hide this one

});
于 2012-04-23T16:20:30.140 に答える