横纵向的菜单效果，点击纵向菜单显示其子菜单。鼠标指向横菜单的时候，显示其子菜单，鼠标离开，子菜单隐藏。
HTML代码：
<span style="font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横纵向的菜单</title>
<link href="css/menu.css" rel="stylesheet" />
<script src="js/JQuery.js"></script>
<script 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 />
<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>
</span>
CSS代码：
<span style="font-size:18px;">body {
}
ul,li{
/*清除菜单前面的点和圈*/
list-style:none;
}
ul {
padding:0;
margin:0;
}
.main ,.hmain {
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:100px;
}
li{
background-color:#999;
}
a{
/*取消所有的下划线*/
text-decoration:none;
padding-left:15px;
display:block ; /*让a标签充满这个区域*/
/*针对IE6*/
display:inline-block;
width:85px;
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-left:1px;
}</span>
JQuery代码：
<span style="font-size:18px;">$(function () {
$(".main > a , .hmain > a").click(function () {
//找到主菜单对应的子菜单
var ulNode = $(this).next("ul");
//if (ulNode.css("display") == "none") {
// ulNode.css("display", "block");
//} else {
// ulNode.css("display", "none");
//}
//ulNode.show("normal");//slow, fast, 500
//ulNode.hide();
//ulNode.toggle();//显示和隐藏，自动判断
//ulNode.slideDown("slow");//显示
//ulNode.slideUp();//隐藏
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function () {
$(this).children("ul").show("fast");
changeIcon($(this).children("a"));
}, function () {
$(this).children("ul").hide("fast");
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)");
}
}
}</span>
1.HTML总结：
1.页面中的菜单项可以通过嵌套ul和li来表示
2.CSS总结：
1.list-style属性为none时可以清除ul和li前面的小圆点2.可以使用background-repeat来控制背景图的重复填充方式
3. text-decoration属性值为none时，可以取消文字上的下划线
4,.display的值为none可以用于隐藏元素
3.JQuery总结：
1. .main a 和 .main >a不同之处是，前者选择使用了.main的这个class的元素内部的所有的a节点，后者只选择了.main的子节点中的a节点2. show，hide方法可以用于显示或隐藏元素，，没有参数时的效果和修改CSS的display属性效果一样。参数可以是单位为毫秒的数字，或者是‘slow’，‘normal’，‘fast’这三个文字都可以来控制完成显示或隐藏需要的时间。
3.toggle方法更为强大，可以省去判断元素是显示还是隐藏的状态，可以让显示的元素隐藏起来，可以让隐藏的元素显示出来，参数使用方法和show，hide相同。
时间： 2024-10-10 00:24:27