js代碼實(shí)現(xiàn)下拉菜單【推薦】
更新時(shí)間：2016年12月15日 10:52:35 作者：小僵尸
本篇文章主要分享了js代碼實(shí)現(xiàn)下拉菜單的代碼，可復(fù)制直接運(yùn)行看效果，具有很好的參考價(jià)值，跟小編一起來(lái)看下吧
效果：
js代碼：
<script type="text/javascript">
function ShowSub(li) {//函數(shù)定義
var subMenu = li.getElementsByTagName("ul")[0] ;//獲取
subMenu.style.display = " block ";
}
function HideSub(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = " none ";
}
</script>
css樣式：
*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}//ie7顯示寬度的兼容性 設(shè)置width 而不用padding的自適應(yīng)
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{ display:none;}
html代碼
<div id="nav"> <ul> <li><a href="#">首頁(yè)</a></li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" ><a href="#">課程大廳</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">Html/CSS</a></li> </ul> </li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" ><a href="#">學(xué)習(xí)中心</a> <ul> <li><a href="#">視頻學(xué)習(xí)</a></li> <li><a href="#">實(shí)例練習(xí)</a></li> <li><a href="#">問(wèn)與答</a></li> </ul> </li> <li><a href="#">經(jīng)典案例</a></li> <li><a href="#">關(guān)于我們</a></li> </ul> </div>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- JS實(shí)現(xiàn)經(jīng)典的中國(guó)地區(qū)三級(jí)聯(lián)動(dòng)下拉菜單功能實(shí)例【測(cè)試可用】
- js實(shí)現(xiàn)省份下拉菜單效果
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式
- 全國(guó)省市二級(jí)聯(lián)動(dòng)下拉菜單 js版
- js實(shí)現(xiàn)select二級(jí)聯(lián)動(dòng)下拉菜單
- Extjs實(shí)現(xiàn)下拉菜單效果
- javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- 純JS實(shí)現(xiàn)出生日期[年月日]下拉菜單效果
相關(guān)文章
JavaScript中的for...of和for...in循環(huán)容易遇到的問(wèn)題及解決方法總結(jié)
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語(yǔ)法,但它們?cè)谑褂脮r(shí)可能會(huì)引發(fā)一些意想不到的問(wèn)題,本文將分享我在使用這兩種循環(huán)時(shí)所遇到的坑和經(jīng)驗(yàn),需要的朋友可以參考下2023-08-08
基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理
這篇文章主要介紹了基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理的相關(guān)資料，小編認(rèn)為非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了js圖片放大鏡效果的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript中const關(guān)鍵字的用法及特性
該文章講解了JavaScript中const關(guān)鍵字的用法以及它的一些特性，該關(guān)鍵字用于創(chuàng)建常量，即一旦賦值之后就不能再修改，但是，使用?const創(chuàng)建的對(duì)象和數(shù)組卻可以被修改，本文通過(guò)講解“賦值”和“變異”之間的重要區(qū)別，詳細(xì)解釋了這一現(xiàn)象,需要的朋友可以參考下2023-05-05
這里介紹的是網(wǎng)上比較流行的刷新頁(yè)面的代碼，整理的相對(duì)比較全了，這些知識(shí)都是前后臺(tái)結(jié)合過(guò)程中，經(jīng)常用的到的。2010-04-04
javascript Array數(shù)組對(duì)象的擴(kuò)展函數(shù)代碼
我們經(jīng)常給 String,Function,Array 的原型加上自定義的擴(kuò)展函數(shù),比如去除字符串空格,數(shù)組排序等2010-05-05
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)左右輪播圖的具體代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2017-01-01
詳解Javascript數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則
本文主要介紹了Javascript的基本數(shù)據(jù)類型和數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則。具有很好的參考價(jià)值，需要的朋友可以看下2016-12-12
Javascript實(shí)現(xiàn)秒表倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)秒表倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件簡(jiǎn)單示例
這篇文章主要介紹了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件,結(jié)合實(shí)例形式分析了JavaScript針對(duì)HTML事件、鍵盤事件及鼠標(biāo)事件的簡(jiǎn)單處理方法,需要的朋友可以參考下2019-11-11