JS實(shí)現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
更新時(shí)間：2015年09月12日 15:51:42 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)動(dòng)態(tài)修改頁面元素屬性的功能,非常簡單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼。分享給大家供大家參考。具體如下：
這是一款精簡版的二級(jí)導(dǎo)航菜單，響應(yīng)鼠標(biāo)的動(dòng)作，鼠標(biāo)放上即顯示出菜單，常見的一種菜單樣式。喜歡的朋友拿去修改一下，再美化一番，就夠用了。
運(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ì)有所幫助。
相關(guān)文章
這篇文章主要介紹了js操作table的行和列，無刷新實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
圖片翻轉(zhuǎn)效果具體實(shí)現(xiàn)代碼
想必大家對(duì)圖片翻轉(zhuǎn)效果都有所了解吧，其實(shí)很容易實(shí)現(xiàn)的，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2014-01-01
Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實(shí)現(xiàn)
借助于html2canvas庫，把網(wǎng)頁保存為Canvas畫布，再把生成的canvas保存成圖片，下面的示例，大家可以看看2014-09-09
自己設(shè)置每張圖片切換的時(shí)間間隔，自己設(shè)置每張圖片的路徑（絕對(duì)、相對(duì)路徑都可以）雖然很簡單，但是很實(shí)用2013-05-05
這篇文章主要介紹了淺談ECMAScript 中的Array類型，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
非常不錯(cuò)的功能，當(dāng)單機(jī)一個(gè)鏈接時(shí)，會(huì)彈出確認(rèn)對(duì)話框效果2008-09-09
$符號(hào)在php中是表示變量的特征字符， 在js中它也有很多作用， 一般我們用來命名一個(gè)函數(shù)名稱，獲取id的2008-06-06
2008-01-01
騰訊的這個(gè)還是相對(duì)比較準(zhǔn)確的。因?yàn)轵v訊每個(gè)QQ用戶發(fā)現(xiàn)自己匹配的地理位置信息不準(zhǔn)確都可以提交更正的2010-07-07
編碼規(guī)范就是指導(dǎo)如何編寫和組織代碼的一系列標(biāo)準(zhǔn)，下面通過本文給大家?guī)砹? 種JavaScript編碼規(guī)范，需要的朋友參考下2018-01-01