jQuery小试之菜单栏
这次要写的是一对菜单栏：一横一纵，有淡入淡出的效果，同时随着鼠标点击指示图标修改。
前台界面：
HTML代码：
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li class="main">
<a href="#">文件</a>
<ul>
<li><a href="#">新建</a></li>
<li><a href="#">保存</a></li>
</ul>
</li>
<li class="main"><a href="#">编辑</a>
<ul>
<li><a href="#">复制</a></li>
<li><a href="#">查找</a></li>
</ul>
</li>
<li class="main"><a href="#">帮助</a>
<ul>
<li><a href="#">检查更新</a></li>
<li><a href="#">版本说明</a></li>
</ul>
</li>
</ul>
</div>
<p>分割线————————分割线</p>
<div>
<ul>
<li class="hmain">
<a href="#">文件</a>
<ul>
<li><a href="#">新建</a></li>
<li><a href="#">保存</a></li>
</ul>
</li>
<li class="hmain"><a href="#">编辑</a>
<ul>
<li><a href="#">复制</a></li>
<li><a href="#">查找</a></li>
</ul>
</li>
<li class="hmain"><a href="#">帮助</a>
<ul>
<li><a href="#">检查更新</a></li>
<li><a href="#">版本说明</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li class="main">
<a href="#">文件</a>
<ul>
<li><a href="#">新建</a></li>
<li><a href="#">保存</a></li>
</ul>
</li>
<li class="main"><a href="#">编辑</a>
<ul>
<li><a href="#">复制</a></li>
<li><a href="#">查找</a></li>
</ul>
</li>
<li class="main"><a href="#">帮助</a>
<ul>
<li><a href="#">检查更新</a></li>
<li><a href="#">版本说明</a></li>
</ul>
</li>
</ul>
</div>
<p>分割线————————分割线</p>
<div>
<ul>
<li class="hmain">
<a href="#">文件</a>
<ul>
<li><a href="#">新建</a></li>
<li><a href="#">保存</a></li>
</ul>
</li>
<li class="hmain"><a href="#">编辑</a>
<ul>
<li><a href="#">复制</a></li>
<li><a href="#">查找</a></li>
</ul>
</li>
<li class="hmain"><a href="#">帮助</a>
<ul>
<li><a href="#">检查更新</a></li>
<li><a href="#">版本说明</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html> CSS代码：[html] view plaincopyprint?ul
{
/*去掉左缩进*/
padding:0px;
margin:0px;
/*去掉圆点*/
list-style :none;
}
.main,.hmain
{
background-image:url("../images/title.gif");
background-repeat:repeat-x;
width:120px;
}
li
{
/*去掉圆点*/
list-style :none;
background-color :#eeeeee;
}
.main a,.hmain a
{
color:White;
background-image:url("../images/collapsed.gif");
background-repeat:no-repeat ;
/*调整三角位置*/
background-position :5px center;
/*取消下划线更改颜色*/
text-decoration:none;
padding-left:20px;
display :block;
/*为了兼容ie6*/
display:inline-block ;
}
.main li a,.hmain li a
{
color:black;
background-image:none;
}
.main ul,.hmain ul
{
/*隐藏子菜单*/
display:none;
}
.hmain
{
float:left;
}
ul
{
/*去掉左缩进*/
padding:0px;
margin:0px;
/*去掉圆点*/
list-style :none;
}
.main,.hmain
{
background-image:url("../images/title.gif");
background-repeat:repeat-x;
width:120px;
}
li
{
/*去掉圆点*/
list-style :none;
background-color :#eeeeee;
}
.main a,.hmain a
{
color:White;
background-image:url("../images/collapsed.gif");
background-repeat:no-repeat ;
/*调整三角位置*/
background-position :5px center;
/*取消下划线更改颜色*/
text-decoration:none;
padding-left:20px;
display :block;
/*为了兼容ie6*/
display:inline-block ;
}
.main li a,.hmain li a
{
color:black;
background-image:none;
}
.main ul,.hmain ul
{
/*隐藏子菜单*/
display:none;
}
.hmain
{
float:left;
} JavaScript代码：[javascript] view plaincopyprint?$(document).ready(function () {
$(".main > a").click(function () {
//找到对应子项
var ulNode = $(this).next("ul");
//多种隐藏方式，第一种通过css
/*if (ulNode.css("display") == "none") {
ulNode.css("display", "block");
}
else {
ulNode.css("display", "none");
}*/
//第二种方法 show() 和hide() //ulNode.show("slow");
//第三种方法 toggle() //ulNode.toggle("slow");
// 第四种方法 slidedown()和slideup() //ulNode.slideDown();
//第五种方法 slideToggle()
ulNode.slideToggle();
changeIcon($(this));
})
//可以这样达到出现小手的动作
// $(".hmain > a").hover(function () {
// //找到对应子项
// var ulNode = $(this).next("ul");
// ulNode.slideToggle();
// })
/*更简单的思路*/
$(".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')");
}
}
}
$(document).ready(function () {
$(".main > a").click(function () {
//找到对应子项
var ulNode = $(this).next("ul");
//多种隐藏方式，第一种通过css
/*if (ulNode.css("display") == "none") {
ulNode.css("display", "block");
}
else {
ulNode.css("display", "none");
}*/
//第二种方法 show() 和hide() //ulNode.show("slow");
//第三种方法 toggle() //ulNode.toggle("slow");
// 第四种方法 slidedown()和slideup() //ulNode.slideDown();
//第五种方法 slideToggle()
ulNode.slideToggle();
changeIcon($(this));
})
//可以这样达到出现小手的动作
// $(".hmain > a").hover(function () {
// //找到对应子项
// var ulNode = $(this).next("ul");
// ulNode.slideToggle();
// })
/*更简单的思路*/
$(".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')");
}
}
} 效果图：
jQuery更多效果函数还等待在以后更多的实践中运用，如果发现哪里有误或是可以优化，欢迎指教。
您还可以：亲自体验效果
作者：lidaasky
