jQuery实现淡入淡出二级下拉导航菜单的方法

本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现的导航菜单，淡入淡出二级的菜单导航，很经常见到的效果，这里使用的是jquery-1.6.2版本的JS，鼠标移动到包括二级子菜单的主菜单上，会立即渐显出二级的子菜单，鼠标在二级子菜单上划过，子菜单项的背景会改变。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题渐隐渐现的二级竖向下拉导航菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' * { margin :0；划水：0;}正文{ font-size :14 px} ul { margin:0划水：0;列表式：无；} a { text-decoration : nonecolor : # 000 } # wrap { position : relative to p :0 px宽度宽度：876像素宽度：34像素线高：34 pxmargin:0 auto} ul #菜单li { float:left显示：块；宽度：92 px高度：37 px线高：37 px文本对齐：居中；右边距：2 px} ul #菜单阿利：链接{显示：块；背景# EDEBECfont-size :14 px；颜色： # 333宽度：92 px高度：37 px线高：37 px} ul #菜单li a:hover .红色{background:#CE070E！重要；color:#FFF！重要；}/*子菜单*/ul #菜单Li ul { position : absolutetop :37 px宽度：90 pxdisplay : none border :1 px # CE070E实心；边框-top :无；背景： # FFF；} ul #菜单li ul li { float:left} ul #菜单Li Li ul阿利：链接{宽度：90像素；高度：37 px线高：37 px背景： # FFF；} ul #菜单Li ul阿利：悬停{ color : # CE070E文本-装饰装饰：下划线} ul #菜单li ul li {宽度：90像素高度：37 px线高：37 pxfloat:left}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script script type=' text/JavaScript ' language=' JavaScript ' $(function(){ $(' ul # menuli : has(ul)')).悬停(function(){ $(this)).儿童(' a ').addClass(')红色')。end().查找(' ul ').法丁(400);}，function(){ $(this).儿童(' a ').removeClass(“”红色')。end().查找(' ul ').淡出(400)；} );});/script/head dydiv id=' wrap ' ul id=' menu ' lia href=' # '网站首页/a/li lia href='# '最新动态页/a ul lia href='# '源码爱好者/a/li lia href='# '编程导航/a/li lia href='# '网页特效/a/li /ul /li lia href='# '产品预定/a/li lia href='# '帮助查询/a ul lia href='# '时速快递/a | /li lia href='# '太空一号/a | /li lia href='# '蜘蛛侠前传/a | /li lia href='# '未来战士/a | /li lia href='# '蟒蛇之灾/a/li /ul /li lia href='# '会员俱乐部/a/li lia href='# '凯撒论坛/a/li /ul /div/body/html希望本文所述对大家的jquery程序设计有所帮助。