jquery實現(xiàn)二級導(dǎo)航下拉菜單效果實例

更新時間：2019年05月14日 15:32:03 作者：Alvin哥哥

這篇文章主要介紹了jquery二級導(dǎo)航下拉菜單，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

大家都知道jQuery是一個框架，它對JS進(jìn)行了封裝，使其更方便使用。前面兩篇博文分別是用CSS樣式和JS實現(xiàn)的，那么這篇就用jQuery來實現(xiàn)二級下拉式菜單。

使用JQuery實現(xiàn)需要用到的知識有：

1)使用$(function(){...})獲取到想要作用的HTML元素。
2)通過使用children()方法尋找子元素。
3)通過使用show()方法來顯示HTML元素。
4)通過使用hide()方法來隱藏HTML元素。
5)jQuery庫引用方法:

第一種方法：將jQuery庫下載到電腦上，然后引用，我下載的是jquery-1.7.1.min.js這個版本。

例如：

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

第二種方法：直接引用在線服務(wù)器上的jQuery庫文件，比如谷歌服務(wù)器jQuery庫，百度服務(wù)器jQuery庫等。

例如：引用百度服務(wù)器上的jQuery庫文件

<script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>

接下來看看制作的流程：

1、調(diào)用jQuery庫：編寫代碼，引用jquery庫。由于谷歌已退出大陸，建議使用百度服務(wù)器的jQuery庫。
注意: 百度服務(wù)器的jQuery庫地址:http://libs.baidu.com/jquery/1.9.0/jquery.js
2 、編寫顯示子菜單函數(shù)，使用$,并通過class名獲取一級菜單li，過children()找到li的孩子元素ul，使用show()方法,顯示二級菜單。
3、編寫隱藏子菜單函數(shù)，使用$,并通過class名獲取一級菜單li，過children()找到li的孩子元素ul，使用hide()方法, 隱藏二級菜單。
4、做瀏覽器兼容性測試，至少五個瀏覽器。IE7,8,9，火狐，谷歌，2345瀏覽器等。

先來看看效果圖：

最后我們來看看代碼的情況，和前面的區(qū)別不大：

HTML代碼：

<!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>

<link
rel="stylesheet"
type="text/css"
href="style.css" rel="external nofollow" 
/>

<!--引用百度服務(wù)器的jQuery庫-->

<script
src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script
type="text/javascript"
src="script.js"></script>

</head>

  

<body>

<div
id="nav"
class="nav">

  <ul>

    <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >網(wǎng)站首頁</a></li>

   <li
class="navmenu"><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >課程大廳</a>

    <ul>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >JavaScript</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Ajax</a></li>

    </ul>

   </li>

   <li
class="navmenu"><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >學(xué)習(xí)中心</a>

    <ul>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >視頻學(xué)習(xí)</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >案例學(xué)習(xí)</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >交流平臺</a></li>

    </ul>

   </li>

   <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >經(jīng)典案例</a></li>

   <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >關(guān)于我們</a></li>

  </ul>

</div>

</body>

</html>

CSS樣式表外部style.css文件代碼：

/*CSS全局設(shè)置*/

*{

 margin:0;

 padding:0;

}

.nav{

 background-color:#EEEEEE;

 height:40px;

 width:450px;

 margin:0
auto;

}

ul{

 list-style:none;

}

ul li{

 float:left;

 line-height:40px;

 text-align:center;

}

a{

 text-decoration:none;

 color:#000000;

 display:block;

 width:90px;

 height:40px;

}

a:hover{

 background-color:#666666;

 color:#FFFFFF;

}

ul li ul li{

 float:none;

 background-color:#EEEEEE;

}

ul li ul{

 display:none;

}

/*為了兼容IE7寫的CSS樣式，但是必須寫在a:hover前面*/

ul li ul li a:link,ul li ul li a:visited{

 background-color:#EEEEEE;

}

ul li ul li a:hover{

 background-color:#009933;

}

JS腳本外部script,js文件代碼：

$(function(){

  $(".navmenu").mouseover(function(){

   $(this).children("ul").show(); 

  })

   

  $(".navmenu").mouseout(function(){

   $(this).children("ul").hide();

  })

})

以上所述是小編給大家介紹的jquery二級導(dǎo)航下拉菜單詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: