JavaScript實(shí)現(xiàn)非常簡(jiǎn)單實(shí)用的下拉菜單效果
更新時(shí)間：2015年08月27日 14:55:17 作者：企鵝
這篇文章主要介紹了JavaScript實(shí)現(xiàn)非常簡(jiǎn)單實(shí)用的下拉菜單效果,通過(guò)定義顯示及隱藏菜單項(xiàng)及鼠標(biāo)事件調(diào)用該函數(shù)實(shí)現(xiàn)下拉菜單功能,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)非常簡(jiǎn)單實(shí)用的下拉菜單效果。分享給大家供大家參考。具體如下：
這是一款實(shí)用的JS下拉菜單，鼠標(biāo)移上菜單就顯示出二級(jí)菜單，是從其它網(wǎng)站上整理下來(lái)的，修改花了不少時(shí)間，現(xiàn)在去除了一些無(wú)用代碼，更簡(jiǎn)潔了，而且代碼兼容性似乎也表現(xiàn)不錯(cuò)，這款兩級(jí)下拉菜單，基本是由CSS和JavaScript共同實(shí)現(xiàn)的，真的挺簡(jiǎn)潔實(shí)用。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-css-down-show-menu-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JavaScript下拉菜單</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:14px; background-color:#000;
}
#navigation, #navigation li ul {
list-style-type:none;
}
#navigation {
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#fff;
width:82px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#255f9e;
padding-left:10px;
}
#navigation li a:hover {
color:#fff;
background:#ffb100;
}
#navigation li ul li a:hover {
color:#fff;
background:#ffb100
}
#navigation li ul {
display:none;
position:absolute;
top:40px;
margin-top:1px;
font-size:12px;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">菜單1</a>
<ul>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單1</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">菜單2</a>
<ul>
<li><a href="#">欄目2</a></li>
<li><a href="#">欄目2</a></li>
<li><a href="#">欄目2</a></li>
<li><a href="#">欄目2</a></li>
<li><a href="#">欄目2</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">菜單3</a>
<ul>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單3</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">菜單4</a>
<ul>
<li><a href="#">菜單4</a></li>
<li><a href="#">菜單4</a></li>
<li><a href="#">菜單4</a></li>
<li><a href="#">菜單4</a></li>
<li><a href="#">菜單4</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目5</a>
<ul>
<li><a href="#">菜單5</a></li>
<li><a href="#">菜單5</a></li>
<li><a href="#">菜單5</a></li>
<li><a href="#">菜單5</a></li>
<li><a href="#">菜單5</a></li>
</ul>
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目6</a>
<ul>
<li><a href="#">菜單6</a></li>
<li><a href="#">菜單6</a></li>
<li><a href="#">菜單6</a></li>
<li><a href="#">菜單6</a></li>
<li><a href="#">菜單6</a></li>
</ul>
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目7</a>
<ul>
<li><a href="#">菜單7</a></li>
<li><a href="#">菜單7</a></li>
<li><a href="#">菜單7</a></li>
<li><a href="#">菜單7</a></li>
<li><a href="#">菜單7</a></li>
</ul>
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目8</a>
<ul>
<li><a href="#">菜單8</a></li>
<li><a href="#">菜單8</a></li>
<li><a href="#">菜單8</a></li>
<li><a href="#">菜單8</a></li>
<li><a href="#">菜單8</a></li>
</ul>
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目09</a>
<ul>
<li><a href="#">菜單9</a></li>
<li><a href="#">菜單9</a></li>
<li><a href="#">菜單9</a></li>
<li><a href="#">菜單9</a></li>
<li><a href="#">菜單9</a></li>
</ul>
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目10</a>
<ul>
<li><a href="#">菜單10</a></li>
<li><a href="#">菜單10</a></li>
<li><a href="#">菜單10</a></li>
<li><a href="#">菜單10</a></li>
<li><a href="#">菜單10</a></li>
</ul>
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目11</a>
<ul>
<li><a href="#">菜單11</a></li>
<li><a href="#">菜單11</a></li>
<li><a href="#">菜單11</a></li>
<li><a href="#">菜單11</a></li>
<li><a href="#">菜單11</a></li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了JavaScript針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-09-09 
枚舉的實(shí)現(xiàn)求得1-1000所有出現(xiàn)1的數(shù)字并計(jì)算出現(xiàn)1的個(gè)數(shù)
求得1-1000所有出現(xiàn)1的數(shù)字，并計(jì)算出現(xiàn)1的個(gè)數(shù)，以下是采用枚舉的實(shí)現(xiàn)方法，但是若從1-N就不管用了，因?yàn)镹不一定會(huì)是多少
2013-09-09 
這篇文章主要介紹了JS html事件冒泡和事件捕獲操作,結(jié)合完整實(shí)例形式分析了javascript事件冒泡及事件捕獲相關(guān)原理與實(shí)現(xiàn)方法,需要的朋友可以參考下
2019-05-05 
layui table動(dòng)態(tài)表頭 改變表格頭部 重新加載表格的方法
今天小編就為大家分享一篇layui table動(dòng)態(tài)表頭 改變表格頭部 重新加載表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09 
下面小編就為大家?guī)?lái)一篇淺談時(shí)鐘的生成(js手寫簡(jiǎn)潔代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08 
BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼
這篇文章主要介紹了BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼,需要的朋友可以參考下
2017-05-05 
IE8提示Invalid procedure call or argument 異常的解決方法
某臺(tái)機(jī)器上，訪問(wèn)公司的好幾個(gè)產(chǎn)品網(wǎng)站，都拋出很多 Invalid procedure call or argument ，跟進(jìn)了下，情況最后簡(jiǎn)化為
2012-09-09 
IE DOM實(shí)現(xiàn)存在的部分問(wèn)題及解決方法
IE DOM實(shí)現(xiàn)存在的部分問(wèn)題及解決方法
2009-07-07 
JavaScript使用canvas實(shí)現(xiàn)手寫簽名功能
最近遇到一個(gè)h5手寫簽名的需求,按理說(shuō)這種功能網(wǎng)上隨便一搜一大把現(xiàn)成的源碼和組件,但是像這種比較經(jīng)典又很簡(jiǎn)單的功能,還是要弄清楚到底怎么實(shí)現(xiàn)的,所以接下來(lái)本文就給大家介紹一下如何用canvas實(shí)現(xiàn)手寫簽名功能
2023-08-08