前言
上一篇博客更新了在页面中可以像Excel表格一样输入的表格，这篇博客介绍一下我们经常可以在各大网站看到的菜单栏显示效果的程序。
内容
显示效果：
照例，先上代码，
HTML代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实践3-菜单效果</title> <script src="script/jquery-1.8.2.js"></script> <script src="script/menu.js"></script> <link href="CSS/menu.css" rel="stylesheet" /> </head> <body> <ul> <li class="main"> <a href="#" >菜单项1 </a> <ul> <li><a href="#" >子菜单项1.1</a></li> <li><a href="#" >子菜单项1.2</a></li> <li><a href="#" >子菜单项1.3</a></li> </ul> </li> <li class="main"> <a href="#" >菜单项2 </a> <ul> <li><a href="#" >子菜单项2.1</a></li> <li><a href="#" >子菜单项2.2</a></li> <li><a href="#" >子菜单项2.3</a></li> </ul> </li> <li class="main"> <a href="#" >菜单项3 </a> <ul> <li><a href="#" >子菜单项3.1</a></li> <li><a href="#" >子菜单项3.2</a></li> <li><a href="#" >子菜单项3.3</a></li> </ul> </li> </ul> <br /> <br /> <br /> <br /> <ul> <li class="hmain"> <a href="#" >菜单项1 </a> <ul> <li><a href="#" >子菜单项1.1</a></li> <li><a href="#" >子菜单项1.2</a></li> <li><a href="#" >子菜单项1.3</a></li> </ul> </li> <li class="hmain"> <a href="#" >菜单项2 </a> <ul> <li><a href="#" >子菜单项2.1</a></li> <li><a href="#" >子菜单项2.2</a></li> <li><a href="#" >子菜单项2.3</a></li> </ul> </li> <li class="hmain"> <a href="#" >菜单项3 </a> <ul> <li><a href="#" >子菜单项3.1</a></li> <li><a href="#" >子菜单项3.2</a></li> <li><a href="#" >子菜单项3.3</a></li> </ul> </li> </ul> </body> </html>
CSS代码：
ul, li {
/*清除ul和li前面的原点*/
list-style: none;
}
ul {
/*清除子菜单的缩进值*/
padding: 0;
margin: 0;
}
.main, .hmain {
/*给出菜单栏背景图片*/
background-image: url(../img/菜单效果/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(../img/菜单效果/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-left:1px;
}
JavaScript代码：
$(document).ready(function () {
//页面中的DOM已经装载完成时，执行的代码
$(".main > a").click(function () {
////找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
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('img/菜单效果/expanded.gif')");
} else {
mainNode.css("background-image", "url('img/菜单效果/collapsed.gif')");
};
};
};
这次代码稍微有点长，但是对于一目十行的大神们来说这都不算啥！
总结
HTML知识点：
CSS知识点：
JavaScript知识点：
end
谢谢您的阅读！
