jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果實(shí)例
大家都知道jQuery是一個(gè)框架,它對(duì)JS進(jìn)行了封裝,使其更方便使用。前面兩篇博文分別是用CSS樣式和JS實(shí)現(xiàn)的,那么這篇就用jQuery來(lái)實(shí)現(xiàn)二級(jí)下拉式菜單。
使用JQuery實(shí)現(xiàn)需要用到的知識(shí)有:
- 1)使用$(function(){...})獲取到想要作用的HTML元素。
- 2)通過(guò)使用children()方法尋找子元素。
- 3)通過(guò)使用show()方法來(lái)顯示HTML元素。
- 4)通過(guò)使用hide()方法來(lái)隱藏HTML元素。
- 5)jQuery庫(kù)引用方法:
第一種方法:將jQuery庫(kù)下載到電腦上,然后引用,我下載的是jquery-1.7.1.min.js這個(gè)版本。
例如:
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
第二種方法:直接引用在線服務(wù)器上的jQuery庫(kù)文件,比如谷歌服務(wù)器jQuery庫(kù),百度服務(wù)器jQuery庫(kù)等。
例如:引用百度服務(wù)器上的jQuery庫(kù)文件
<script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>
接下來(lái)看看制作的流程:
- 1、調(diào)用jQuery庫(kù):編寫代碼,引用jquery庫(kù)。由于谷歌已退出大陸,建議使用百度服務(wù)器的jQuery庫(kù)。
- 注意: 百度服務(wù)器的jQuery庫(kù)地址:http://libs.baidu.com/jquery/1.9.0/jquery.js
- 2 、編寫顯示子菜單函數(shù),使用$,并通過(guò)class名獲取一級(jí)菜單li,過(guò)children()找到li的孩子元素ul,使用show()方法,顯示二級(jí)菜單。
- 3、編寫隱藏子菜單函數(shù),使用$,并通過(guò)class名獲取一級(jí)菜單li,過(guò)children()找到li的孩子元素ul,使用hide()方法, 隱藏二級(jí)菜單。
- 4、做瀏覽器兼容性測(cè)試,至少五個(gè)瀏覽器。IE7,8,9,火狐,谷歌,2345瀏覽器等。
先來(lái)看看效果圖:
最后我們來(lái)看看代碼的情況,和前面的區(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庫(kù)--> <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)站首頁(yè)</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" >交流平臺(tái)</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二級(jí)導(dǎo)航下拉菜單詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02詳解jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)
AJAX 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下,能夠更新部分網(wǎng)頁(yè)的技術(shù)。下面通過(guò)本文給大家分享jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù),需要的的朋友參考下2017-07-07jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01通過(guò)jquery獲取上傳文件名稱、類型和大小的實(shí)現(xiàn)代碼
這篇文章主要介紹了在文件上傳到服務(wù)器之前,我們可以通過(guò)jquery來(lái)獲取上傳文件的名稱,類型和尺寸大小,需要的朋友可以參考下2018-04-04使用jQuery簡(jiǎn)化Ajax開(kāi)發(fā) Ajax開(kāi)發(fā)入門
jQuery是一個(gè)可以簡(jiǎn)化 JavaScript™以及AJAX(Asynchronous JavaScript + XML,異步Javascript和XML)編程的Javascript庫(kù)。不同于其他的Javascript庫(kù),jQuery有他自己的哲學(xué),使你可以 很簡(jiǎn)單的編寫代碼。2009-10-10用jquery實(shí)現(xiàn)動(dòng)畫跳到頂部和底部(這個(gè)比較簡(jiǎn)單)
用jquery實(shí)現(xiàn)動(dòng)畫的跳到頂部和底部,當(dāng)點(diǎn)擊頂部按鈕的時(shí)候,執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離2014-09-09