jQuery制作菜单

发布时间:2020-06-12 22:36:44 作者:wulei7528
来源:网络 阅读:439

    在网站的世界里,菜单是不可或缺的元素。菜单的作用主要是告诉用户网站的基本功能,引导用户完成一系列的功能操作。一个简洁明快的菜单,可以让用户很快接受并最终认可;相反,复杂无序的菜单只会让用户陷入迷茫,甚至因此被用户抛弃。

    做网页设计,包括菜单的设计,都会用到一些基本的网页制作工具。以菜单为例,本文以下面两种形式实现菜单:

    1.div + css + javascript

    2.div + css + jQuery

    这两种形式的主要区别是在实现菜单栏目点击响应时,分别采用了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="#">兴趣设置</a>
		</li>
	</ul>
</div>
</body>

   用javascript实现菜单点击的代码如下:

<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实现点击一级菜单时二级菜单的收缩

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

    以上两种手段比较,不难发现,相比javascript复杂的逻辑实现,使用jQuery实现菜单的点击更为简洁有效。

附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;
}


推荐阅读:
  1. jQuery 菜单切换
  2. jQuery怎么实习菜单功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript 菜单 jquery

上一篇:网络分析工具

下一篇:nagios 3.2安装详解(一)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》