ul,li {
/*清除ul,li默认的小原点*/
list-style:none;
}
ul {
/*清除ul的缩近值,只对padding设置在IE6与IE7中并不好使还需要设置margin*/
padding:0;
margin: 0;
}
/*设置class需要加.*/
.main, .hmain {
/*添加背景图片,背景图片会覆盖li的背景色*/
background-image: url(../images/title.gif);
/*只在横向尽量重复*/
background-repeat: repeat-x;
width: 120px;
margin-top: 1px;
}
/*设置所有li的背景色*/
li {
background-color: #EEEEEE;
}
a {
/*取消链接的所有划线*/
text-decoration: none;
padding-left: 20px;
/*使链接充满整个区并显示小手样式,但在IE6中还是有问题需要再设置display: inline-block;*/
display: block;
/*display: inline-block;并不是符合CSS标准*/
display: inline-block;
/*各个链接之间拉开些距离*/
padding-top: 3px;
padding-bottom: 3px;
}
/*设置main下链接的字体为白色*/
.main a, .hmain a {
color: white;
background-image: url(../images/collapsed.gif);
background-repeat: no-repeat;
/*前景距X轴左边有3像素 居中*/
background-position: 3px center;
}
/*设置main li 下链接的字体为黑色*/
.main li a, .hmain li a {
color: black;
/*无背景图片*/
background-image: none;
}
/*隐藏子菜单*/
.main ul, .hmain ul {
display: none;
}
/*横向菜单*/
.hmain {
/*浮动布局使原本纵向排列变成横向排列*/
float: left;
margin-right: 1px;
}
$(document).ready(function(){ //页面中的DOM已经装载完成找到main下的子结点a,然后触发事件,但是不会触发子菜单 $('.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(500); 三种文字性参数的用法 时间由jquery内部自定义 ulNode.show('fast');// normal slow ulNode.hide(); toggle方法省去自己写if else这样繁琐的判断 是jquery为了配合show hide(); ulNode.toggle(); */ /* 方法三:具有卷帘效果 ulNode.slideDown();//也可以加参数slow normal fast ulNode.slideUp(); */ ulNode.slideToggle();//也可以加参数slow normal fast changeIcon($(this)); }); /*鼠标进入出现 但是有bug 一进入子菜单后立即被收起 $('.hmain > a').hover(function(){ $(this).next('ul').slideDown(); },function(){ $(this).next('ul').slideUp(); }); */ /*鼠标进入出现具有延时操作,鼠标进入主菜单进入子菜单再进入主菜单子菜单又出现 //鼠标进入主菜单 $('.hmain > a').hover(function(){ //将子菜单放下 $(this).next('ul').slideDown(); },function(){ var ulNode = $(this).next('ul'); //设置延时 var timeoutId = setTimeout(function(){ //将子菜单收起 ulNode.slideUp(); },300); //对于鼠标进入子菜单项的设置 ulNode.hover(function(){ //清除延时 子菜单不会立即被收起来 clearTimeout(timeoutId); },function(){ //如果鼠标从子菜单项离开的话将子菜单收起 $(this).slideUp(); }); }); */ /*鼠标进入出现具有延时操作,鼠标离开子菜单时 子菜单闪动出现*/ //鼠标进入主菜单 $('.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')"); } } }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- 如果删除doctype就会出现闪动效果,使整体效果变差,在IE里不会变成小手 --> <html> <head> <title>JQuery-菜单效果</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../css/menu.css" type="text/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>
注: 附件是全代码 效果看html文件夹中的html