欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單

 更新時(shí)間:2016年10月31日 14:05:45   作者:918之初  
我們在淘寶、搜狐等大型網(wǎng)站上都可以看到使用的一些二級(jí)下拉菜單,比如下面這張圖片。那么如何實(shí)現(xiàn)導(dǎo)航菜單欄中的二級(jí)下拉菜單呢?下面小編給大家分享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)站的支持!

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)照片裁剪

    微信小程序?qū)崿F(xiàn)照片裁剪

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)照片裁剪,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • CocosCreator骨骼動(dòng)畫之龍骨DragonBones

    CocosCreator骨骼動(dòng)畫之龍骨DragonBones

    這篇文章主要介紹了怎么在CocosCreator中使用骨骼動(dòng)畫龍骨DragonBones,對(duì)骨骼動(dòng)畫感興趣的同學(xué),可以試一下
    2021-04-04
  • js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法

    js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • ECMAScript?的?6?種簡單數(shù)據(jù)類型

    ECMAScript?的?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í)例

    使用javascript訪問XML數(shù)據(jù)的實(shí)例...
    2006-12-12
  • jQuery及JS實(shí)現(xiàn)循環(huán)中暫停的方法

    jQuery及JS實(shí)現(xiàn)循環(huán)中暫停的方法

    這篇文章主要介紹了jQuery及JS實(shí)現(xiàn)循環(huán)中暫停的方法,以實(shí)例形式分析了循環(huán)中暫停的原理及實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-02-02
  • 原生js實(shí)現(xiàn)商品篩選功能

    原生js實(shí)現(xiàn)商品篩選功能

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)商品篩選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器示例

    JS實(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
  • JavaScript數(shù)組和循環(huán)詳解

    JavaScript數(shù)組和循環(huán)詳解

    這篇文章主要介紹了JavaScript數(shù)組和循環(huán)詳解,本文講解了循環(huán)遍歷數(shù)組、按順序存儲(chǔ)和訪問值、以相反的順序存儲(chǔ)和訪問值、在數(shù)組中搜索等內(nèi)容,需要的朋友可以參考下
    2015-04-04
  • 封裝好的一個(gè)萬能檢測表單的方法

    封裝好的一個(gè)萬能檢測表單的方法

    這篇文章主要介紹了一個(gè)封裝好的萬能檢測表單的方法,非常的好用,使用也很方便,這里推薦給小伙伴們。
    2015-01-01

最新評(píng)論