js实现二级菜单渐隐显示

时间：2021-05-26

先给大家看一看最终的效果图：

下面就是js实现二级菜单渐隐显示的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>导航菜单二级菜单滑动渐隐显示</title> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } a, a:visited { color: #5e5e5e; text-decoration: none; } a:hover { color: #333; text-decoration: underline; } body { font: 12px/180% Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif; color: #333; background: #fff; } .navbox, .nav li, .nav li.current a, .nav li.selected a span, .nav li a.selected, .nav li a.selected span { background: url(images/headerbg.png) no-repeat; } .navbox { height:39px; background-position:0 -138px; background-repeat:repeat-x; position: relative; z-index:9; } .nav { width: 960px; margin: 0 auto; } .nav li { float: left; height: 39px; background-position: 100% -99px; padding: 0 3px 0 2px; position: relative; } .nav li.last { background: none; } .nav li a { float: left; display: block; padding: 0 0 0 4px; height: 39px; overflow: hidden; } .nav li a span { float: left; display: block; padding: 0 4px 0 0; line-height: 39px; font-size: 14px; color: #fff; font-weight: 800; cursor: pointer; width: 142px; text-align: center; } .nav li.selected a, .nav li a.selected { background-position: 0 -60px; text-decoration: none; } .nav li.selected a span, .nav li a.selected span { background-position: 100% -60px; color: #ff7e00; } .nav li.selected .submenu { display: block; } .nav li .submenu { display: none; position: absolute; top: 39px; left: 6px; } .nav li .submenu { border-style: solid; border-width: 0px 1px 1px 1px; border-color: #ddd; padding: 0 5px 5px 5px; width: 132px; background: #fff; } .nav li .submenu { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -moz-box-shadow: 0 5px 5px #D3D3D3; -webkit-box-shadow: 0 5px 5px #D3D3D3; box-shadow: 0 5px 5px #D3D3D3; } .nav li .submenu li { float: none; padding: 0; background: none; height:auto; border-bottom:dotted 1px #BEBEBE; } .nav li .submenu li.last { border: none; } .nav li .submenu li a { float:none; padding:0; text-align:center; height:28px; line-height:28px; background:none; } .nav li .submenu li a:hover { background:#ddd; font-weight:800; } </style></head><body> <script type="text/javascript"> function dropMenu(obj) { $(obj).each(function () { var theSpan = $(this); var theMenu = theSpan.find(".submenu"); var tarHeight = theMenu.height(); theMenu.css({ height: 0, opacity: 0 }); theSpan.hover( function () { $(this).addClass("selected"); theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 400); }, function () { $(this).removeClass("selected"); theMenu.stop().animate({ height: 0, opacity: 0 }, 400, function () { $(this).css({ display: "none" }); }); } ); }); } $(document).ready(function () { dropMenu(".drop-menu-effect"); }); </script> <div class="navbox"> <div class="nav"> <ul class="clearfix"> <li><a class="selected" target="_blank" href="javascript:void(0);"><span>网站首页</span></a></li> <li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>内容管理</span></a> <ul class="submenu"> <li><a href="#">普通文章</a></li> <li><a href="#">专题文章</a></li> <li><a href="#">材料文章</a></li> </ul> </li> <li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>系统帮助</span></a> <ul class="submenu"> <li><a href="#">参考文档</a></li> <li><a href="#">意见反馈</a></li> <li><a href="#">官方交流论坛</a></li> </ul> </li> </ul> </div> </div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章