menu.css页面如下 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; } menu.js $(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')"); } } } menu.html <!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" mce_href="css/menu.css" type="text/css"> <mce:script type="text/javascript" src="../js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script type="text/javascript" src="../js/menu.js" mce_src="js/menu.js"></mce:script> </head> <body> <ul> <li class="main"> <a href="#" mce_href="#">菜单项1</a> <ul> <li><a href="#" mce_href="#">子菜单项11</a></li> <li><a href="#" mce_href="#">子菜单项12</a></li> </ul> </li> <li class="main"> <a href="#" mce_href="#">菜单项2</a> <ul> <li><a href="#" mce_href="#">子菜单项21</a></li> <li><a href="#" mce_href="#">子菜单项22</a></li> </ul> </li> <li class="main"> <a href="#" mce_href="#">菜单项3</a> <ul> <li><a href="#" mce_href="#">子菜单项31</a></li> <li><a href="#" mce_href="#">子菜单项32</a></li> </ul> </li> </ul> <br/> <br/> <br/> <br/> <ul> <li class="hmain"> <a href="#" mce_href="#">菜单项1</a> <ul> <li><a href="#" mce_href="#">子菜单项11</a></li> <li><a href="#" mce_href="#">子菜单项12</a></li> </ul> </li> <li class="hmain"> <a href="#" mce_href="#">菜单项2</a> <ul> <li><a href="#" mce_href="#">子菜单项21</a></li> <li><a href="#" mce_href="#">子菜单项22</a></li> </ul> </li> <li class="hmain"> <a href="#" mce_href="#">菜单项3</a> <ul> <li><a href="#" mce_href="#">子菜单项31</a></li> <li><a href="#" mce_href="#">子菜单项32</a></li> </ul> </li> </ul> </body> </html>