首頁 > 開發者 > JavaScript
jQuery實現淡入淡出二級下拉導覽功能表的方法，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/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>漸隱漸現的二級豎向下拉導覽功能表</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">*{margin:0;padding:0;}body{font-size:14px;}ul{margin:0;padding:0;list-style:none;}a{text-decoration:none;color:#000;}#wrap{position:relative;top:0px;width:876px;height:34px;line-height:34px;margin:0 auto;}ul#menu li{float:left;display:block;width:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;}ul#menu li a:link{display:block;background:#EDEBEC;font-size:14px;color:#333;width:92px;height:37px;line-height:37px;}ul#menu li a:hover,.red{background:#CE070E!important;color:#FFF!important;}/*子功能表*/ul#menu li ul{position:absolute;top:37px;width:90px;display:none;border:1px #CE070E solid;border-top:none;background:#FFF;}ul#menu li ul li{float:left;}ul#menu li ul li a:link{width:90px;height:37px;line-height:37px;background:#FFF;}ul#menu li ul li a:hover{color:#CE070E;text-decoration:underline}ul#menu li ul li{width:90px;height:37px;line-height:37px;float:left;}</style><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript" language="javascript"> $(function(){ $("ul#menu>li:has(ul)").hover( function(){ $(this).children('a').addClass('red').end().find('ul').fadeIn(400); }, function(){ $(this).children('a').removeClass('red').end().find('ul').fadeOut(400); } );});</script></head><body><div id="wrap"> <ul id="menu"> <li><a href="#" >網站首頁</a></li> <li><a href="#" >最新動向頁</a> <ul> <li><a href="#">源碼愛好者</a></li> <li><a href="#">編程導航</a></li> <li><a href="#">網頁特效</a></li> </ul> </li> <li><a href="#" >產品預定</a></li> <li><a href="#" >協助查詢</a> <ul> <li><a href="#">時速快遞</a> | </li> <li><a href="#">太空一號</a> | </li> <li><a href="#">蜘蛛俠前傳</a> | </li> <li><a href="#">未來戰士</a> | </li> <li><a href="#">蟒蛇之災</a></li> </ul> </li> <li><a href="#" >會員俱樂部</a></li> <li><a href="#" >凱撒論壇</a></li> </ul> </div></body></html>
希望本文所述對大家的jquery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
