jQuery制作菜单

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

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

1.div + css + javascript

2.div + css + jQuery

这两种形式的主要区别是在实现菜单栏目点击响应时,分别采用了javascript和jQuery。

为突出重点,这里只列举核心代码。首先是菜单的html代码,如下:

<body >
<!--菜单-->
<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:菜单点击效果图:

附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;
}
时间: 2024-10-24 12:29:17

jQuery制作菜单的相关文章

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

jquery树形菜单

转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

如何使用jQuery 制作全屏幕背景的嵌入视频

实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&

jquery制作滑动面板

[web开发]☆★之jquery制作滑动面板 项目开发中,我们有时候需要点击某个按钮出现一个面板,在面板上有我们需要的一些操作,或者是图片.ok!如下简单制作滑动面板效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

css+jQuery制作的文字循环滚动代码

css+jQuery制作的文字循环滚动代码,尺寸只需要在css中调整即可,另外别忘记在function里面修改相关参数 百度网盘下载

CSS3结合jQuery制作的冒泡工具图片提示效果

一款基于CSS3技术的冒泡提示效果,为了演示效果,生成了许多冒泡的提示,实际使用中,可能不需要这么多,结合jQuery和jquery UI共同实现的网页提示特效,挺不错.因CSS不支持IE8及以下低版本,所以请使用IE9.chrome或火狐测试. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

Jquery 右键菜单(ContextMenu)插件使用记录

目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单使之根据触发页面元素有不同的行为.支持多个个触发页面元素复用同一个菜单时,分开禁用或恢复禁用菜单或某些菜单项目. 一些说明: 1.菜单的样式由css文件contextMenu.css决定,可以根据需要自行修改,请根据实际情况设定z-index的值,保证菜单在最高的一层 2.请将菜单直接放于body下

jquery制作弹出层带遮罩效果,点击阴影部分层消失

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 1 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> 2 <div id="myModal" class="reveal-modal&quo