JQuery实例—菜单效果

实例：菜单效果

用HTML中的标签做菜单，用CSS调整菜单样式，用JQuery给菜单添加一些行为。

1、初始页面

2、CSS代码

ul, li {
	/*清除ul和li上默认的小圆点*/
	list-style: none;
}
ul {
	/*清除子菜单的缩进值*/
	padding: 0;
	margin: 0;
}
.main, .hmain {
	background-image: url(../images/title.gif);
	background-repeat: repeat-x;
	width: 120px;
}
li {
	background-color: #EEEEEE;
}
a {
	/*取消所有的下划线*/
	text-decoration: none;
	padding-left: 20px;
	display: block;
	display: inline-block;
	width: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.main a, .hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	background-position: 3px center;
}
.main li a, .hmain li a {
	color: black;
	background-image: none;
}
.main ul, .hmain ul {
	display: none;
}
.hmain {
	float: left;
	margin-right: 1px;
}

JQuery代码：

$(document).ready(function(){
	//页面中的DOM已经装载完成时，执行的代码
	$(".main > a").click(function(){
		//找到主菜单项对应的子菜单项
		var ulNode = $(this).next("ul");
		/*
		if (ulNode.css("display") == "none") {
			ulNode.css("display","block");
		} else {
			ulNode.css("display","none");
		}
		*/
		//ulNode.show("slow");//normal fast
		//ulNode.hide();
		//ulNode.toggle();
		//
		//ulNode.slideDown("slow");
		//ulNode.slideUp;
		ulNode.slideToggle();
		changeIcon($(this));
	});
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});

/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('../images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('../images/collapsed.gif')");
		}
	}
}

3、运行页面

4、学习到的知识

1.页面中的菜单项可以通过嵌套的ul和li来表示

2.菜单最外层为ul，一层每个主菜单放在一个 li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单。

3.浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。

4.list-style属性值为none时，可以清除ul和li前面的小圆点

5.清除子菜单的缩进值，需要padding和 margin都为0，其中IE6和IE7只有margin也为 0的时候才可以清除缩进值

6.可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，知道填满整个区域

7.可以使用bakcground-repeat来控制背景图的重复填充方式。

8.如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的

9.text-decoration属性值为none时，可以取消文字上的下划线

10.background-position可以控制背景图的位置，属性值既可以用数值，也可以用center， left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向

11.background-image的值为none表示没有背景图

12.DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中， JQuery的动画会出现闪烁的糟糕效果。

13.float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动。

14.可以给多个选择器定义同样的样式，选择器之间用,分割。同样对于JQuery的$方法，也可以传入过个选择器。

JQuery实例—菜单效果

猜你喜欢