横向菜单与纵向菜单实例:
menu.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>
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
<br /><br /><br /><br />
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
</body>
</html>
menu.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; /*ie6的显示好看一些*/
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;
}
menu.js:
$(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");
}
*/
/*方法2:
ulNode.show("slow"); //normal,fast
ulNode.hide();
*/
//方法3:
//ulNode.toggle();
//方法4:
//ulNode.slideDown("normal"); //fast,slow
ulNode.slideUp("slow");
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)");
}
}
}
images文件夹中两张图片:collapsed.gif 和 expanded.gif (分别是向右和向下的箭头图标)
效果如下:
感谢您的阅读~