jQuery制作菜單-創(chuàng)新互聯(lián)

在網(wǎng)站的世界里，菜單是不可或缺的元素。菜單的作用主要是告訴用戶網(wǎng)站的基本功能，引導(dǎo)用戶完成一系列的功能操作。一個簡潔明快的菜單，可以讓用戶很快接受并最終認(rèn)可；相反，復(fù)雜無序的菜單只會讓用戶陷入迷茫，甚至因此被用戶拋棄。

目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、陸河網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

做網(wǎng)頁設(shè)計，包括菜單的設(shè)計，都會用到一些基本的網(wǎng)頁制作工具。以菜單為例，本文以下面兩種形式實現(xiàn)菜單：

1.div + css + javascript

2.div + css + jQuery

這兩種形式的主要區(qū)別是在實現(xiàn)菜單欄目點擊響應(yīng)時，分別采用了javascript和jQuery。

為突出重點，這里只列舉核心代碼。首先是菜單的html代碼，如下：

<body onload="init()">
<!--菜單-->
<div class="menu" id="menu">
	<ul>
		<li class="level1">
			<a href="#">賬戶管理</a>
			<ul>
				<li><a href="#">密碼修改</a></li>
				<li><a href="#">信息修改</a></li>
			</ul>
		</li>
		<li class="level1">
			<a href="#">文章管理</a>
			<ul>
				<li><a href="#">博文管理</a></li>
				<li><a href="#">隨筆管理</a></li>
			</ul>
		</li>
		<li class="level1"><a href="#">興趣設(shè)置</a>
		</li>
	</ul>
</div>
</body>

用javascript實現(xiàn)菜單點擊的代碼如下：

<script language="javascript">
function init()
{
	var obj = document.getElementById("menu");
	var nodes = obj.children[0].children;
	for(var i = 0; i < nodes.length; ++i){
		var node = nodes[i].children[0];
		if(node.tagName === "A"){
			if(nodes[i].children.length > 1){
				var tag = nodes[i].children[1];
				node.onclick = function(tag)
				{
					return function(){
						if(tag.style.display === "block")
							refresh();
						else {
							refresh();
							tag.style.display = "block";
						}
					}
				}(tag);
			}
		}
	}
}

function refresh()
{
	var obj = document.getElementById("menu");
	var nodes = obj.children[0].children;
	
	var i;
	for(i = 0; i < nodes.length; ++i) {
		var temp =  nodes[i].children[1];
		if(temp && temp.tagName === "UL")
			temp.style.display = "none";
		}
}
</script>

用jQuery實現(xiàn)點擊一級菜單時二級菜單的收縮

<script language="javascript">
function init()
{
	$(".level1 > a").click(function(){
		$(this).next().show().parent().siblings().children("a").next().hide();
	});
}
</script>

以上兩種手段比較，不難發(fā)現(xiàn)，相比javascript復(fù)雜的邏輯實現(xiàn)，使用jQuery實現(xiàn)菜單的點擊更為簡潔有效。

附1：菜單點擊效果圖：

jQuery制作菜單

附2：菜單css樣式代碼：

{
	text-decoration:none;
}

ul, li
{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

.menu
{
	width:150px;
}

.menu ul
{
	border-width:0px 1px 1px;
	border-style:solid;
	border-color:#C4D5DF;
}

.menu ul li a
{
	display:block;
	height:28px;
	line-height:28px;
	background:#EBF3F8;
	font-size:12px;
	color:#5893B7;
	text-indent:14px;
	border-top:1px solid #C4D5DF;
}

.menu ul li a:hover
{
	color:#bd0a01;
	text-decoration:underline;
}

.menu ul li ul
{
	display:none;
	border:0px solid;
}

.menu ul li ul li a
{
	background:#FFFFFF;	
	text-indent:28px;
}

.menu ul li ul li a:hover
{
	color:green;
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文標(biāo)題：jQuery制作菜單-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://jinyejixie.com/article42/csdshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計公司、App開發(fā)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營銷、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jQuery制作菜單-創(chuàng)新互聯(lián)