实例:菜单效果
用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的$方法, 也可以传入过个选择器。