<html> <head> <title>JQuery纵横向菜单效果</title> <script type="text/javascript" src="jquery-1.7.1.js"></script> <style type="text/css"> UL,LI{ list-style:none; //去掉小圆点 } UL{ padding:0; margin:0; //清除子菜单缩进,但IE浏览器不能缩进 } .mainMenu,.crossMenu{ /**主菜单样式*/ width:70px; font-size:12px; //主菜单宽度//字体大小12px background-image:url(../../resources/images/title.gif); background-repeat:repeat-x; //添加背景图片//背景图横向重复 } LI{ background-color:#EEEEEE; //子菜单样式：背景色 } A{ text-decoration:none; //取消链接的下划线 padding-left:15px; //子菜单缩进 /** * 让连接充满区域,及菜单边缘也可以点击 * 问题：若值为block,则IE会出现问题,不能填充,且子菜单会变样 * 问题：因此我们用inline解决,但是不能解决填充,因此加上宽度(70 - 15) */ display:block; display:inline; width:70px; padding-top:3px; padding-bottom:3px; //给所有的链接加3个像素的上边距和下边距 } .mainMenu A,.crossMenu A{ color:blue; background-position:2px center; //主菜单链接为蓝色//背景箭头的位置 background-image:url(../../resources/images/collapsed.gif); background-repeat:no-repeat; //链接背景图片//背景图不重复 } .mainMenu LI A,.crossMenu LI A{ color:green; background-image:none; //子菜单链接文字为绿色//去掉子菜单背景箭头 } .mainMenu UL,.crossMenu UL{ display:none; //主菜单下的UL全部隐藏 } .crossMenu{ font-size:12px; float:left; //字体大小12px//横向排列 } </style> <script type="text/javascript"> $(function(){ $('.mainMenu > a').click( function(){ //这样取到的就是：<a href="#">机构管理</a>。而非：<a href="#">添加机构</a> var childMenu = $(this).next('ul'); //找到主菜单项的子菜单项 childMenu.slideToggle(); //改方法可以省去判断元素是否显示的过程，直接令隐藏的元素显示，令显示的元素隐藏 changeIcon($(this)); } ); $('.crossMenu').hover( function(){ $(this).children('ul').slideToggle(); changeIcon($(this).children('a')); } ); }); function changeIcon(mainNode){ //修改主菜单的指示图标 if(mainNode){ if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0){ mainNode.css('background-image', 'url(resources/images/expanded.gif)'); }else{ mainNode.css('background-image', 'url(resources/images/collapsed.gif)'); } } } </script> </head> <body> <ul> <li class="mainMenu"> <a href="#">机构管理</a> <ul> <li><a href="#">添加机构</a></li> <li><a href="#">修改机构</a></li> <li><a href="#">查询机构</a></li> </ul> </li> <li class="mainMenu"> <a href="#">部门管理</a> <ul> <li><a href="#">添加部门</a></li> <li><a href="#">修改部门</a></li> <li><a href="#">查询部门</a></li> </ul> </li> <li class="mainMenu"> <a href="#">员工管理</a> <ul> <li><a href="#">添加员工</a></li> <li><a href="#">修改员工</a></li> <li><a href="#">查询员工</a></li> </ul> </li> </ul> <br/> <hr/> <br/> <ul> <li class="crossMenu"> <a href="#">机构管理</a> <ul> <li><a href="#">添加机构</a></li> <li><a href="#">修改机构</a></li> <li><a href="#">查询机构</a></li> </ul> </li> <li class="crossMenu"> <a href="#">部门管理</a> <ul> <li><a href="#">添加部门</a></li> <li><a href="#">修改部门</a></li> <li><a href="#">查询部门</a></li> </ul> </li> <li class="crossMenu"> <a href="#">员工管理</a> <ul> <li><a href="#">添加员工</a></li> <li><a href="#">修改员工</a></li> <li><a href="#">查询员工</a></li> </ul> </li> </ul> </body> </html>
jQuery纵横向菜单和浮层效果
内容版权声明：除非注明，否则皆为本站原创文章。