JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
更新時(shí)間：2015年09月12日 15:51:42 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)動(dòng)態(tài)修改頁(yè)面元素屬性的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼。分享給大家供大家參考。具體如下：
這是一款精簡(jiǎn)版的二級(jí)導(dǎo)航菜單，響應(yīng)鼠標(biāo)的動(dòng)作，鼠標(biāo)放上即顯示出菜單，常見(jiàn)的一種菜單樣式。喜歡的朋友拿去修改一下，再美化一番，就夠用了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/
具體代碼如下：
<html>
<head>
<title>二級(jí)菜單，響應(yīng)鼠標(biāo)</title>
<style type="text/css">
.mainNav ul li {float: left;width: 150px;}
.mainNav li ul {display: none;}
li.hover ul {display: block;}
</style>
<script language="javascript" type="text/javascript">
function showSubLevel(Obj){
Obj.className="hover";
}
function hideSubLevel(Obj){
Obj.className="";
}
</script>
</head>
<body>
<div class="mainNav">
<ul>
<li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一級(jí)欄目A
<ul>
<li>A的二級(jí)欄目</li>
<li>A的二級(jí)欄目</li>
<li>A的二級(jí)欄目</li>
</ul>
</li>
<li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一級(jí)欄目B
<ul>
<li>B的二級(jí)欄目</li>
<li>B的二級(jí)欄目</li>
<li>B的二級(jí)欄目</li>
</ul>
</li>
<li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一級(jí)欄目C
<ul>
<li>B的二級(jí)欄目</li>
<li>B的二級(jí)欄目</li>
<li>B的二級(jí)欄目</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)超精簡(jiǎn)的鏈接列表在固定區(qū)域內(nèi)滾動(dòng)效果代碼
- JS短路原理的應(yīng)用示例 精簡(jiǎn)代碼的途徑
- 一個(gè)精簡(jiǎn)的JS DIV層tab切換代碼
- JS、CSS文字切換，定時(shí)交替，代碼精簡(jiǎn)
- javascript 短路法代碼精簡(jiǎn)
- 代碼精簡(jiǎn)的可以實(shí)現(xiàn)元素圓角的js函數(shù)
- 比較精簡(jiǎn)的Javascript拖動(dòng)效果函數(shù)代碼
- 利用JScript中運(yùn)算符"||"和"&&"的特殊特性實(shí)現(xiàn)代碼精簡(jiǎn)
- 讓JavaScript代碼更加精簡(jiǎn)的方法技巧
相關(guān)文章
這篇文章主要介紹了vant倒序年月日期組件封裝實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日期范圍選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
js實(shí)現(xiàn)一個(gè)逐步遞增的數(shù)字動(dòng)畫(huà)
可視化大屏項(xiàng)目使用最多的組件就是數(shù)字組件，本文主要介紹了js實(shí)現(xiàn)一個(gè)逐步遞增的數(shù)字動(dòng)畫(huà)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了微信小程序加載機(jī)制及運(yùn)行機(jī)制圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了javascript彈出層輸入框(示例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
最近在編寫(xiě)一個(gè)JavaScript框架，發(fā)現(xiàn)有很多細(xì)節(jié)注意得不夠,于是開(kāi)始關(guān)注JavaScript提高效率的一些技巧，在這里分享給大家，感興趣的你可以參考下2013-08-08
截取字符串的使用比較廣泛，有很多中方法，本文粗略的整理了一些，感興趣的額朋友可以才參考下2013-10-10
本文將詳細(xì)介紹一個(gè)可拖拽列寬表格實(shí)例,需要了解更多的朋友可以參考下2012-11-11
uniapp的webview實(shí)現(xiàn)左滑返回上一個(gè)頁(yè)面操作方法
uniapp默認(rèn)左滑是關(guān)閉整個(gè)webview,而不是關(guān)閉當(dāng)前頁(yè),本文給大家介紹uniapp的webview實(shí)現(xiàn)左滑返回上一個(gè)頁(yè)面操作方法,感興趣的朋友一起看看吧2023-12-12
24個(gè)ES6方法解決JS實(shí)際開(kāi)發(fā)問(wèn)題(小結(jié))
這篇文章主要介紹了24個(gè)ES6方法解決JS實(shí)際開(kāi)發(fā)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05