Jquery + Css 实现横纵菜单上拉效果
Jquery + Css 实现横纵菜单下拉效果ul,li {/*清除ul,li默认的小原点*/list-style:none}ul {/*清除ul的缩
Jquery + 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;}?
?
$(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 slowulNode.hide();toggle方法省去自己写if else这样繁琐的判断 是jquery为了配合show hide(); ulNode.toggle();*//*方法三：具有卷帘效果ulNode.slideDown();//也可以加参数slow normal fastulNode.slideUp();*/ulNode.slideToggle();//也可以加参数slow normal fastchangeIcon($(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
?
来自：http://waynett.iteye.com/blog/815262
