JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
我們在淘寶、搜狐等大型網(wǎng)站上都可以看到使用的一些二級(jí)下拉菜單,比如下面這張圖片。那么如何實(shí)現(xiàn)導(dǎo)航菜單欄中的二級(jí)下拉菜單?下面小編給大家分享實(shí)現(xiàn)思路。
但是如何實(shí)現(xiàn)類似的圖片呢?實(shí)際上,我們有至少三種方式來實(shí)現(xiàn),下面,我附上代碼供大家參考。
1.僅使用html和css
<meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style: none;text-decoration: none;} #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;} ul{background: #aaa} ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;} ul li:hover{background: #cea;} ul li ul li{float: none;} /*關(guān)鍵一:將二級(jí)菜單設(shè)置為display:none;*/ ul li ul{position: absolute;top:40px;left: 0; display: none;} ul li ul li:hover{background: red;} /*關(guān)鍵二:在劃過二級(jí)菜單從屬的一級(jí)菜單時(shí),設(shè)置為display:block;*/ ul li:hover ul{display: block;} </style> <div id="nav"> <ul> <li><a href="">首頁</a></li> <li><a href="">汽車</a> <ul> <li><a href="#">奧迪</a> </li> <li><a href="#">道奇</a> </li> </ul> </li> <li><a href="">手機(jī)</a> <ul> <li><a href="#">小米</a> </li> <li><a href="#">華為</a> </li> </ul> </li> <li><a href="">聯(lián)系我們</a></li> </ul> </div>
我們可以看到,這種方法是比較好的,它保證了結(jié)構(gòu)與表現(xiàn)的完全分離。
2.用javasc
<!DOCTYPE htm> <html lang="en"> <head > <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style: none;text-decoration: none;} #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;} ul{background: #aaa} ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;} ul li:hover{background: #cea;} ul li ul li{float: none;} ul li ul{position: absolute;top:40px;left: 0; display:none;} ul li ul li:hover{background: red;} </style> <div id="nav"> <ul> <li><a href="#">首頁</a></li> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">汽車</a> <!-- 關(guān)鍵一:在二級(jí)標(biāo)題從屬的一級(jí)標(biāo)題標(biāo)簽內(nèi)設(shè)置時(shí)間執(zhí)行程序,this代表的時(shí)這個(gè)li元素 --> <ul> <li><a href="#">奧迪</a> </li> <li><a href="#">道奇</a> </li> </ul> </li> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">手機(jī)</a> <ul> <li><a href="#">小米</a> </li> <li><a href="#">華為</a> </li> </ul> </li> <li><a href="#">聯(lián)系我們</a></li> </ul> </div> script> function show(li){ var ul=li.getElementsByTagName("ul")[0]; // 關(guān)建二:在li這個(gè)對(duì)象內(nèi)查詢標(biāo)簽名為ul的標(biāo)簽,由于二級(jí)標(biāo)簽只有一個(gè),所以索引為0即可。 ul.style.display="block"; // 關(guān)鍵三:當(dāng)鼠標(biāo)劃過li時(shí),其子元素ul標(biāo)簽的display為block } function hide(li){ var ul=li.getElementsByTagName("ul")[0]; ul.style.display="none"; // 關(guān)鍵四:當(dāng)鼠標(biāo)劃出li時(shí),其子元素ul的display為none } /script>
使用javascript實(shí)現(xiàn)起來較為麻煩,且這里結(jié)構(gòu)和行為沒有分開(雖然可以試用dom在JavaScript中創(chuàng)建使得結(jié)構(gòu)和行為分開,但十分繁瑣),不推薦。
3.用jQuery實(shí)現(xiàn)
jQuery是一種javascript庫,我們可以在jQuery官網(wǎng)上下載最新版本的庫文件,其中壓縮的文件是用于產(chǎn)品的,為壓縮的文件是便于開發(fā)人員學(xué)習(xí)和調(diào)試的。下載到本機(jī)以后,需要將庫文件引用到html中,由于jQuery本質(zhì)上也是JavaScript,所以引用方式為:
<script src="路徑名稱"></script>
用jQuery實(shí)現(xiàn)二級(jí)下拉菜單的代碼如下:
<meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style: none;text-decoration: none;} #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;} ul{background: #aaa} ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;} ul li:hover{background: #cea;} ul li ul li{float: none;} ul li ul{position: absolute;top:40px;left: 0; display: none;} ul li ul li:hover{background: red;} </style> <div id="nav"> <ul> <li><a href="">首頁</a></li> <li class="navmenu"><a href="">汽車</a> <ul> <li><a href="#">奧迪</a> </li> <li><a href="#">道奇</a> </li> </ul> </li> <li class="navmenu"><a href="">手機(jī)</a> <ul> <li><a href="#">小米</a> </li> <li><a href="#">華為</a> </li> </ul> </li> <li><a href="">聯(lián)系我們</a></li> </ul> </div> <!-- 關(guān)鍵一:引入jQuery庫文件 --> script type="text/javascript"> $(function(){ $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) }) // 關(guān)鍵二:正確使用jQuey的語法完成行為。 $(function(){ $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) }) /script>
顯然,使用jQuery是非常方便的。
最終的實(shí)現(xiàn)效果如下;
即當(dāng)鼠標(biāo)劃過一級(jí)菜單時(shí),會(huì)出現(xiàn)相應(yīng)的二級(jí)菜單。
以上所述是小編給大家介紹的JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單,希望對(duì)大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JavaScript 下拉菜單實(shí)現(xiàn)代碼
- css+js下拉菜單
- js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
- 三級(jí)下拉菜單的js實(shí)現(xiàn)代碼
- 一個(gè)日期下拉菜單的js實(shí)現(xiàn)代碼
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- Js點(diǎn)擊彈出下拉菜單效果實(shí)例
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- js實(shí)現(xiàn)全國省份城市級(jí)聯(lián)下拉菜單效果代碼
- javascript實(shí)現(xiàn)簡單下拉菜單效果
相關(guān)文章
CocosCreator骨骼動(dòng)畫之龍骨DragonBones
這篇文章主要介紹了怎么在CocosCreator中使用骨骼動(dòng)畫龍骨DragonBones,對(duì)骨骼動(dòng)畫感興趣的同學(xué),可以試一下2021-04-04ECMAScript?的?6?種簡單數(shù)據(jù)類型
這篇文章主要介紹了ECMAScript的?6?種簡單數(shù)據(jù)類型,ECMAScript的數(shù)據(jù)類型很靈活,一種數(shù)據(jù)類型可以當(dāng)作多種數(shù)據(jù)類型來使用,具體使用詳情文章詳細(xì)介紹需要的小伙伴可以參考一下2022-06-06使用javascript訪問XML數(shù)據(jù)的實(shí)例
使用javascript訪問XML數(shù)據(jù)的實(shí)例...2006-12-12jQuery及JS實(shí)現(xiàn)循環(huán)中暫停的方法
這篇文章主要介紹了jQuery及JS實(shí)現(xiàn)循環(huán)中暫停的方法,以實(shí)例形式分析了循環(huán)中暫停的原理及實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器示例
這篇文章主要介紹了JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器,涉及javascript事件響應(yīng)及數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-08-08