jquery實現二級導航下拉菜單效果實例

來源：懂視網責編：小采時間：2020-11-27 21:57:00

jquery實現二級導航下拉菜單效果實例

jquery實現二級導航下拉菜單效果實例:大家都知道jQuery是一個框架，它對JS進行了封裝，使其更方便使用。前面兩篇博文分別是用CSS樣式和JS實現的，那么這篇就用jQuery來實現二級下拉式菜單。使用JQuery實現需要用到的知識有： 1)使用$(function(){...})獲取到想要作用的HTML元素。 2

推薦度：

點擊下載本文 文檔為doc格式

導讀jquery實現二級導航下拉菜單效果實例:大家都知道jQuery是一個框架，它對JS進行了封裝，使其更方便使用。前面兩篇博文分別是用CSS樣式和JS實現的，那么這篇就用jQuery來實現二級下拉式菜單。使用JQuery實現需要用到的知識有： 1)使用$(function(){...})獲取到想要作用的HTML元素。 2

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

使用JQuery實現需要用到的知識有：

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>

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

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

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

接下來看看制作的流程：

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

先來看看效果圖：

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

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" 
/>

<!--引用百度服務器的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" >網站首頁</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" >學習中心</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" >視頻學習</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>

     <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" >經典案例</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>

</div>

</body>

</html>

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

/*CSS全局設置*/

*{

 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二級導航下拉菜單詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jquery實現二級導航下拉菜單效果實例

推薦度：

點擊下載本文 文檔為doc格式

標簽：菜單實現效果

熱門焦點

jquery實現二級導航下拉菜單效果實例

jquery實現二級導航下拉菜單效果實例

jquery實現二級導航下拉菜單效果實例

最新推薦

猜你喜歡

熱門推薦