Javascript实现简单二级下拉菜单实例
更新时间：2014年06月15日 09:52:27 投稿：whsnow
这篇文章主要介绍Javascript实现二级下拉菜单的具体过程,需要的朋友可以参考下
复制代码 代码如下:
<span style="font-size:14px;"><!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 id="nav">
<li class="child">数 据 库
<ul id="menu">
<li><a href="http://blog.csdn.net/u011043843">MySQL</a></li>
<li><a href="http://blog.csdn.net/u011043843">SQL Server</a></li>
<li><a href="http://blog.csdn.net/u011043843">Oracle</a></li>
<li><a href="http://blog.csdn.net/u011043843">DB2</a></li>
</ul>
</li>
<li class="child">前台脚本
<ul id="menu">
<li><a href="http://blog.csdn.net/u011043843">JavaScript</a></li>
<li><a href="http://blog.csdn.net/u011043843">Ruby</a></li>
<li><a href="http://blog.csdn.net/u011043843">HTML</a></li>
<li><a href="http://blog.csdn.net/u011043843">Python</a></li>
</ul>
</li>
<li class="child">后台脚本
<ul id="menu">
<li><a href="http://blog.csdn.net/u011043843">PHP</a></li>
<li><a href="http://blog.csdn.net/u011043843">ASP</a></li>
<li><a href="http://blog.csdn.net/u011043843">ASP.NET</a></li>
<li><a href="http://blog.csdn.net/u011043843">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对象
ulObj1.style.display = "none";
this.style.backgroundColor="#3E3E3E";
this.style.color="white";
}
}
</script>
</body>
</html></span>
相关文章
Javascript 调用 ActionScript 的简单方法
在Flex中，ActionScript调用Javascript是比较简单的，说白了就是，在html里，怎么调用Javascript，在ActionScript就怎么调用就可以了。接下来通过本文给大家介绍js 调用 actionscript方法，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了页面装载js及性能分析方法,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了小程序自定义tabBar组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单，对bootstrap 表单相关知识感兴趣的朋友一起学习吧2016-01-01
js利用FileReader实现图片转base64格式并上传预览头像
本文主要介绍了js利用FileReader实现图片转base64格式并上传预览头像，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
使用JavaScript italics方法实现文本变斜体教程示例
这篇文章主要为大家介绍了JavaScript italics实现文本变斜体教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
这篇文章主要介绍了js如何清空form表单中的内容，下面有个不错的示例，大家可以参考下2014-05-05
echarts是非常好用的图表插件,下面这篇文章主要给大家介绍了关于ECharts多图表联动功能的相关资料,需要的朋友可以参考下2021-06-06
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
这篇文章主要介绍了JavaScript中的 attribute 和 jQuery中的 attr 方法浅析,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论