這是一款基于jQuery實現(xiàn)的導(dǎo)航菜單，淡入淡出二級的菜單導(dǎo)航，很經(jīng)常見到的效果，這里使用的是jquery-1.6.2版本的JS，鼠標(biāo)移動到包括二級子菜單的主菜單上，會立即漸顯出二級的子菜單，鼠標(biāo)在二級子菜單上劃過，子菜單項的背景會改變。

運行效果截圖如下：

在線演示地址如下：

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>漸隱漸現(xiàn)的二級豎向下拉導(dǎo)航菜單</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="#" >網(wǎng)站首頁</a></li>
  <li><a href="#" >最新動態(tài)頁</a>
   <ul>
    <li><a href="#">源碼愛好者</a></li>
    <li><a href="#">編程導(dǎo)航</a></li>
    <li><a href="#">網(wǎng)頁特效</a></li> 
   </ul>
  </li>
  <li><a href="#" >產(chǎn)品預(yù)定</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="#">未來戰(zhàn)士</a> | </li>
    <li><a href="#">蟒蛇之災(zāi)</a></li> 
   </ul>
  </li>
  <li><a href="#" >會員俱樂部</a></li>
  <li><a href="#" >凱撒論壇</a></li>
 </ul> 
</div>
</body>
</html>

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章: