這裏的是我的目標爲example:創建一個簡單的子菜單下拉使用jQuery
我不喜歡我有裝飾用類li
元素,以便正確地火事件。如果我有多個嵌套類別下拉菜單會發生什麼?事情變得凌亂快!
我也似乎無法選擇一個選項,只要我離開事件捕獲區域就關閉它。
關於如何構建精心製作的下拉導航菜單的任何建議?
這裏的是我的目標爲example:創建一個簡單的子菜單下拉使用jQuery
我不喜歡我有裝飾用類li
元素,以便正確地火事件。如果我有多個嵌套類別下拉菜單會發生什麼?事情變得凌亂快!
我也似乎無法選擇一個選項,只要我離開事件捕獲區域就關閉它。
關於如何構建精心製作的下拉導航菜單的任何建議?
你並不真的需要與選擇的一些巧妙的用法任何類: P
我設置了一個例子的fiddle,下面的代碼:
HTML:
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li>
<a href="#">OFFERS</a>
<ul>
<li>
<a href="#">NEW</a>
<ul>
<li>YAY!</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">SETTINGS</a></li>
<li><a href="#">TV's</a></li>
<li><a href="#">COMPUTERS</a></li>
<li><a href="#">RICE</a></li>
</ul>
</nav>
如您所見,不需要單個class/id:P元素「OFFERS」是唯一具有下拉菜單的元素,並且在該菜單中,元素「NEW」具有另一個元素。
CSS:
li > ul { display: none; }
li li { margin-left: 10px; }
第一個樣式是最重要的一個。起初,我們希望我們的子菜單被隱藏。其他風格只是爲了清晰起見。
的jQuery:
$("nav ul li").hover(function(){
if ($("> ul", this).length > 0) {
$("> ul", this).show();
}
}, function(){
if ($("> ul", this).length > 0) {
$("> ul", this).hide();
}
});
是啊,作爲:)當我們hover
菜單元素,我們檢查,如果有任何ul
直接孩子一樣簡單,如果這樣做,我們告訴他們。當我們離開菜單元素時,我們會再次檢查它是否有任何直接子女,如果有,我們將它們隱藏起來。
當然,您需要設置它的樣式,並確保您清除任何li
內的任何浮點。
您需要使用類來正確控制流。特別是在你的外部容器上。
例如在我的菜單中,我有一個ul
包含所有菜單,每個菜單項是li
。 li
是第一級標題,另外還有一個ul
包含子菜單。
<ul class="menu">
<li>
Item 1
<ul><!--Further items--></ul>
</li>
<li>
Item 2
<ul><!--Further items--></ul>
</li>
</ul>
然後,您可以使用子選擇器來控制此選項。儘管簡單地使用一個類有時更容易。
$(".menu > li") //First level items
$(".menu > li > ul") //Submenus
說你想使菜單向下滑動,當你點擊的第一級項目之一:
$(".menu > li").click(function() {
$this = $(this); //Caching. Not really needed for this example. But anyway :)
$this.children("ul").slideToggle("fast");
});
$(document).ready(function(){
$("ul.MenuNavi li").mouseover(function(){
$(this).children('ul').slideDown('3000');
});
$("ul.MenuNavi li").mouseleave(function(){
$(this).children('ul').stop(true).slideUp('3000');
});
});
*編輯 - 添加標籤 – Undefined 2012-07-26 13:28:54