導航和選單的教程一

不淨之心發表於2013-04-10
jQuery製作多級導航選單([color=red][b]說的很詳細[/b][/color])　[url]http://www.w3cplus.com/jquery/how-to-build-and-enhance-more-level-navigation-menu[/url]

[color=red][b]先了解css選擇器[/b][/color]：[url]http://www.ruanyifeng.com/blog/2009/03/css_selectors.html[/url]
注意：[b]多元素的組合選擇器[/b]
[color=red][b]E,F[/b][/color] 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔
[color=red][b]E F[/b][/color] 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔
[color=red][b]E > F[/b][/color] 子元素選擇器，匹配所有E元素的子元素F
[color=red][b]E + F[/b][/color] 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F
[color=red][b]E:hover[/b][/color] 匹配滑鼠懸停其上的E元素

[color=darkblue][b]目標[/b][/color]
[img]http://www.w3cplus.com/sites/default/files/level-fourth-demo.png[/img]
這個導航有一個最大的特點：[color=red][b]在現代瀏覽器中無需任何指令碼也支援下拉選單的功能。[/b][/color]

[color=darkblue][b]第一步：HTML Markup[/b][/color]
首先我們需要一個正常而又清晰的導航選單結構，一般我們都是這樣寫的：
<body>
	<ul id="nav">
		<li><a href="">Home</a></li>
		<li><a href="">About</a>
			<ul>
				<li><a href="">About Us</a></li>
				<li><a href="">About Team</a></li>
				<li><a href="">About You</a>
					<ul>
						<li><a href="">More About Us</a></li>
						<li><a href="">More About Team</a></li>
						<li><a href="">More About You</a>
							<ul>
								<li><a href="">level4</a></li>
								<li><a href="">level4</a></li>
								<li><a href="">level4</a></li>
							</ul></li>
					</ul></li>
			</ul></li>
		<li><a href="">Portfolio</a></li>
		<li><a href="">Contact</a></li>
		<li><a href="">Blog</a></li>
	</ul>
</body>


[color=darkblue][b]第二步：CSS Code[/b][/color]
上面我們完成了基本結構，接下來我們要使用樣式來美化他，不過這裡和平時美化稍有不同，因為還需要考慮到使用樣式控制下拉選單的顯示與隱藏功能。別的不說，我們直接上程式碼才一關鍵：
[b]1、頂級導航樣式[/b]
/*Menu*/
#nav {
	background: #e5e5e5;
	float: left;
	margin: 0; padding: 0;
	border: 1px solid white;
	border-bottom: none;
}
#nav li a, 
#nav li {
	float: left;
}
#nav li {
	list-style: none;
	position: relative;
}
#nav li a {
	padding: 1em 2em;
	text-decoration: none;
	color: white;
	background: #292929;
	background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
	background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
	border-right: 1px solid #3c3c3c;
	border-left: 1px solid #292929;
	border-bottom: 1px solid #232323;
	border-top: 1px solid #545454;
}
#nav li a:hover {
	background: #2a0d65;
	background: -moz-linear-gradient(top, #11032e, #2a0d65);
	background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

上面主要修飾的是頂級導航的樣式，接下來看第二步。

[b]2、二級選單樣式[/b]
/* Submenu */
.hasChildren {
	position: absolute;
	width: 0px; height: 0px;
	border: 5px solid #000;
	border-color: #fff #000 #000;
	background: black;
	right : 0;
	bottom: 18px;
}

#nav li ul .hasChildren {
	border-color: #000 #000 #000 #fff;
	bottom: 20px;
	right: 5px;
}
#nav li ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	padding: 0; margin: 0;
}
#nav li:hover > ul {
	display: block;
}
#nav li ul li,
#nav li ul li a {
	float: none;
}
* html #nav li ul li {
	display: inline; /* for IE6 */
}
#nav li ul li a {
	width: 150px;
	display: block;
}

這裡有一個關鍵地方：[color=red][b]選單載入進頁面時，所有子級選單項都是被隱藏,[/b][/color]
#nav li ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	padding: 0; margin: 0;
}

然後我們利用的是CSS的":hover"來實現，當滑鼠次級導航的父元素上時，他才被顯示，當滑鼠離開時又被隱藏：
#nav li:hover > ul {
	display: block;
}



只是在IE6的瀏覽器中並不支援“li:hover”功能（具體解決辦法可以參考《瀏覽器相容之旅的第四站:IE常見Bug——part2》）[url]http://www.w3cplus.com/ten-most-common-ie-bugs-and-how-to-fix-them-part-2[/url]，以致於我們使用純CSS製作下拉導航存在一個隱患，但對於棄用了IE6的朋友，那是沒有問題的。

另外我們這裡使用的三角標誌也是純CSS的製作，如上圖所示，具體實現方法：[color=red][b]我們採用元素的0寬度和高度，並使用元素的border屬性來製作[/b][/color]，請看三角實現的程式碼：
/*向下的三角形*/
.hasChildren {
	position: absolute;
	width: 0px; height: 0px;
	border: 5px solid #000;
	border-color: #fff #000 #000;
	background: black;
	right : 0;
	bottom: 18px;
}
/*向右的三角形*/
#nav li ul .hasChildren {
	border-color: #000 #000 #000 #fff;
	bottom: 20px;
	right: 5px;
}

如果對這種製作方法感興趣的，可以點選Matt寫的《How to Create DIV Shapes Like Triangles and Circles》[url]http://blog.mattforhire.ca/2011/08/10/how-to-create-div-shapes-like-triangles-and-circles/[/url]。
3、三級（或更深層級）樣式
前面兩步都是一級二級選單樣式，其實三級選單或者說四級選單，他們的基本樣式都和前面的一樣，只不過是一個位置的不同而以[color=red][b]二級選單通常都是在一級導航的下面，而三級選單通常是在二級的右邊，四級就是三級的右邊，依些類推放置[/b][/color]。下面我們來看其程式碼：
/* SUBSUB Menu */
#nav li ul li ul {
	display: none;
}
#nav li ul li:hover ul {
	left: 100%;
	top: 0;
}

[color=red][b]這裡的left和top很特別，使得left之上級的後面，並與最後一個li的top同樣水平[/b][/color]．[i][color=blue][b]為什麼使用li:hover？[/b][/color][/i][color=red][b]E:hover[/b][/color] 匹配滑鼠懸停其上的E元素．
此處也是利用“li:hover”來控制下拉選單的顯示和隱藏功能。

其實到此為此，我們這個多級選單導航功能在現代瀏覽器中就可以正常執行了，但由於在"IE6"下不支援“li:hover”致使無法正常執行，而IE6相對來說還是蠻多人在使用，那麼為了讓其達到一樣的效果，我們就接著使用jQuery，讓這個多級導航選單在各瀏覽器中都能執行。

[color=darkblue][b]第三步：jQuery Code[/b][/color]
前面也說了，達到前面DEMO展示的效果，在現代瀏覽器中到上面一步就算功德圓滿了，可是還有一個IE6，我們只好使用JQuery方法來輔助完成，首先在第一步將jQuery版本庫導進來：

<script type="text/javascript" src="../js/jquery.min.js"></script>

下面接著看實現功能的jQuery程式碼

[b]1、jQuery實現的方法一：[/b]
			$(document).ready(function(){
				//遍歷#nav中的所有li
				$('#nav').find('li').each(function(){
					//如果li中含有ul
					if($(this).find('ul').length > 0) {
						//插入span.hasChildren，（三角標誌）
						$('<span class="hasChildren" />').appendTo($(this).children(":first"));
						//給li繫結一個hover事件
						$(this).hover(function(){
							//:hover狀態，顯示子選單
							$(this).find('>ul').stop(true,true).slideDown();
						},function(){
							//mouseout狀態隱藏子選單
							$(this).find('>ul').stop(true,true).hide();
						});
					}
				});
			});


[b]2、jQuery實現的方法二：[/b]
			$(document).ready(function(){
				var site = function(){
						this.navLi = $('#nav li').children('ul').hide().end();
						this.init();
					}

					site.prototype = {
						init : function(){
							this.setMenu();
						},
						//Enables the slideDown menu, and adds suppert for IE6
						setMenu: function(){
							$.each(this.navLi,function(){
								if($(this).children('ul')[0]) {
									$(this).append('<span class="hasChildren" />');
								}
							});

							this.navLi.hover(function(){
								$(this).find('>ul').stop(true,true).slideDown();
							},function(){
								$(this).find('>ul').stop(true,true).hide();
							});
						}
					}

					new site();
			});


這裡我們主要使用了jQuery中的.hover()方法來控制子選單的顯示與否，當然我們帶可以使用.mouseover()和.mouseout()方法來代替.hover()方法；而且這裡還使用了.slideDown()方法，讓動更顯示更生動，當然大家還可以配合jquery.effects.core.js使用。具體效果，大家可以點選Demo，此例中和Demo稍有不同，感興趣的可以檢視程式碼，或直接將本例程式碼Copy到你本地，就能正常執行。

到此，一個生動而輕便的多級導航就完成了。在這個例項中，我們一起見證了兩點：其一，在現代瀏覽器中使用純CSS也一樣能製作出靚麗好看的多級導航；其二，不使用任何jQuery外掛，也能製作相容性強，外觀好看的多級導航選單。如果你不在需要相容IE6,你完全可以使用純CSS來製作多級選單。不知道你有沒有心動，有心動就動手吧，自力更生，才能豐衣足食。

[b]2011-09-29更新[/b]
<script type="text/javascript">
   $(document).ready(function(){
	$('#nav ul').css({"display":"none"});//Opera Fix
	  $('#nav li').each(function(){
		if($(this).find('ul').length>0) {
			$('<span class="hasChildren" />').appendTo($(this).children(":first"));
				$(this).hover(function(){
					$(this).find('ul:first').css({"visibility":"visible","display":"none"}).show();				
				},function(){
					$(this).find('ul:first').css({"visibility":"hidden"});
				});
			}
		});			
	});
</script>

如需轉載煩請註明出處：W3CPLUS[url]http://www.w3cplus.com/[/url]

相關文章