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