在jQuery中創建下滑子菜單的最有效方法

Question

我試圖製作一個子菜單，當鼠標懸停在某個元素上時，它可以從主菜單欄滑下。我目前做這個使用下面的代碼：

$(document).ready(function() { 
 
    $('.navlist li a').hover(function() { 
 
    if($(this).attr('data-param') == "parent") 
 
    { 
 
     $('#subnavbar-' + $(this).attr('data-slug')).slideDown(200); 
 
    } 
 
    }, function() { 
 
    if($(this).attr('data-param') == "parent") 
 
    { 
 
     var name = '#subnavbar-' + $(this).attr('data-slug'); 
 
     setTimeout(function() { 
 
     if(!$(name).is(':hover')) 
 
     { 
 
      $(name).slideUp(200); 
 
     } 
 
     }, 200); 
 
    } 
 
    }); 
 
});

a { 
 
    color: white; 
 
} 
 

 
.navbar { 
 
    background-color: green; 
 
    margin-bottom: 0; 
 
    height: 30px; 
 
} 
 

 
ul.navlist { 
 
    list-style: none; 
 
    text-indent: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
} 
 

 
ul.navlist li { 
 
    display: block; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.subnavbar { 
 
    background-color: blue; 
 
    margin-top: 0; 
 
    height: 20px; 
 
    display: none; 
 
} 
 

 
ul.subnavlist { 
 
    list-style: none; 
 
    text-indent: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
} 
 

 
ul.subnavlist li { 
 
    display: block; 
 
    width: 80px; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"> 
 
    <ul class="navlist"> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#" data-param="parent" data-slug="test">Hover Here</a></li> 
 
    <li><a href="#">Item 3</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="subnavbar" id="subnavbar-test"> 
 
    <ul class="subnavlist"> 
 
    <li><a href="#">Subitem 1</a></li> 
 
    <li><a href="#">Subitem 2</a></li> 
 
    <li><a href="#">Subitem 3</a></li> 
 
    </ul> 
 
</div>

你可以通過運行摘要中看到;它的工作原理，但有很多錯誤，我不知道什麼是最好的解決方法。首先，如果用戶在主菜單項上來回移動，我不希望事件被垃圾郵件，我可以使用setTimeout()和clearTimeout()來解決此問題，但如果可能，我想要一個更好的方法。其次，我不確定如何最好的讓subnavbar不收縮，如果用戶在它上面而不是父菜單項，我現在怎麼做，但如果用戶懸停，導航欄不收回。

Answer 1

高效的解決方案將只使用CSS。絕對不需要JQUERY！試試這個Fiddle。

HTML：

<nav> 
    <ul> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a> 
      <ul> 
       <li><a href="#">Sub Item 1</a></li> 
       <li><a href="#">Sub Item 2</a></li> 
       <li><a href="#">Sub Item 3</a> 
        <ul> 
         <li><a href="#">Sub Sub Item 1</a></li> 
         <li><a href="#">Sub Sub Item 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Item 3</a> 
      <ul> 
       <li><a href="#">Sub Item 1</a></li> 
       <li><a href="#">Sub Item 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

CSS代碼：

nav { 
    margin: 100px auto; 
    text-align: center; 
} 
nav ul ul { 
    display: none; 
} 
nav ul li:hover > ul { 
    display: block; 
} 
nav ul { 
    background: -moz-linear-gradient(center top , #efefef 0%, #bbbbbb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border-radius: 10px; 
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.15); 
    display: inline-table; 
    list-style: outside none none; 
    padding: 0 10px; 
    position: relative; 
} 
nav ul::after { 
    clear: both; 
    content: ""; 
    display: block; 
} 
nav ul li { 
    float: left; 
} 
nav ul li:hover { 
    background: -moz-linear-gradient(center top , #4f5964 0%, #5f6975 40%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
} 
nav ul li:hover a { 
    color: #fff; 
} 
nav ul li a { 
    color: #757575; 
    display: block; 
    padding: 15px 20px; 
    text-decoration: none; 
} 
nav ul ul { 
    background: none repeat scroll 0 0 #5f6975; 
    border-radius: 0; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
} 
nav ul ul li { 
    border-bottom: 1px solid #575f6a; 
    border-top: 1px solid #6b727c; 
    float: none; 
    position: relative; 
} 
nav ul ul li a { 
    color: #fff; 
    padding: 5px 10px; 
} 
nav ul ul li a:hover { 
    background: none repeat scroll 0 0 #4b545f; 
} 
nav ul ul ul { 
    left: 100%; 
    position: absolute; 
    top: 0; 
} 

Answer 2

，你告訴我更好的CSS，我做了一個快速fiddle你。

當然，你需要擦亮風格，但「工作」在那裏。

CSS只是：

.container { 
    height:30px; 
    background-color:green; 
    color:#fff; 
} 
.container > ul {position:relative;} 
.container > ul li { 
    display:inline-block; 
    margin-right:30px; 
} 
.container > ul >li > ul { 
    position:absolute; 
    left:0; 
    background-color:blue; 
    top:0px; 
    z-index:-1;  
} 
.container > ul > li:hover > ul { 
    top:30px; 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 

編輯：我改變的形式給出，並與makign高度的過渡我已經使用只是頂部的insteed。檢查出來

Answer 3

解決你的第一個問題我會推薦使用jQuery插件懸停意圖。就像名稱所暗示的那樣，這提供了一種簡單的方法來確定用戶是否打算將鼠標懸停在元素上，並避免通過多次在元素中快速懸停和移出元素來發送垃圾信息的可能性。

要解決第二個問題，如果可能的話，您可以在navbar和subnavbar兩邊添加一個包含元素，並在離開包含元素時使用它關閉subnavbar，如果subnavbar正好可見。

HTML：

<div id="containing_element"> 
    <div class="navbar"> 
     <ul class="navlist"> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#" id="hoverlink">Hover Here</a></li> 
     <li><a href="#">Item 3</a></li> 
     </ul> 
    </div> 
    <div class="subnavbar" id="subnavbar-test"> 
     <ul class="subnavlist"> 
     <li><a href="#">Subitem 1</a></li> 
     <li><a href="#">Subitem 2</a></li> 
     <li><a href="#">Subitem 3</a></li> 
     </ul> 
    </div> 
</div> 

的jQuery：

$(document).ready(function() { 
    function hoverEnter() { 
     $('#subnavbar-test').slideDown(200); 
    } 
    $('#hoverlink').hoverIntent(hoverEnter); 
    $('#containing_element').mouseleave(function() { 
     if($('#subnavbar-test').is(':visible')) { 
      $('#subnavbar-test').slideUp(200); 
     }    
    }); 
}); 

請記住，包括懸停意圖腳本也是如此。