Javascript實(shí)現(xiàn)簡單二級(jí)下拉菜單實(shí)例

2024-05-06 16:07:05

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹Javascript實(shí)現(xiàn)二級(jí)下拉菜單的具體過程,需要的朋友可以參考下

復(fù)制代碼代碼如下:

<span><!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>
<meta http-equiv="content-type" content="texthtml;charset=utf-8">
<title>Menu</title>
<style type="text/css">
#nav
{
list-style: none;
text-align: center;
}
#nav li
{
float: left;
width: 100px;
color: white;
background-color: #3E3E3E;
}
#menu
{
list-style: none;
padding: 5px;
display: none;
margin-left: -5px;
margin-top: -5px;
}
#menu li
{
background-color: #ccc;
width: 100px;
text-align: left;
padding-left: 10px;
}
#menu li a:link
{
text-decoration: none;
display: block;
}
#menu li a:hover
{
background-color:#3E3E3E;
color: white
}
</style>
</head>
<body>
<ul>
<li>數(shù) 據(jù) 庫
<ul>
<li><a >MySQL</a></li>
<li><a >SQL Server</a></li>
<li><a >Oracle</a></li>
<li><a >DB2</a></li>
</ul>
</li>
<li>前臺(tái)腳本
<ul>
<li><a >JavaScript</a></li>
<li><a >Ruby</a></li>
<li><a >HTML</a></li>
<li><a >Python</a></li>
</ul>
</li>
<li>后臺(tái)腳本
<ul>
<li><a >PHP</a></li>
<li><a >ASP</a></li>
<li><a >ASP.NET</a></li>
<li><a >JSP</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var lis = document.getElementById("nav").getElementsByTagName('li');
var i = 0;

for( i = 0; i < lis.length; i++)
{
if(lis[i].className == "child")
{
lis[i].onmouseover = function()
{
var ulObj1 = this.getElementsByTagName('ul')[0];
ulObj1.style.display = "block";
this.style.backgroundColor="#ccc";
this.style.color="black";
}
}

lis[i].onmouseout = function()
{
var ulObj1 = this.getElementsByTagName('ul')[0]; //this是HTMLElement對(duì)象
ulObj1.style.display = "none";
this.style.backgroundColor="#3E3E3E";
this.style.color="white";
}
}

</script>
</body>
</html></span>