Javascript实现简单的下拉二级菜单
- - CSDN博客Web前端推荐文章在线演示; http://jsfiddle.net/Web_Code/ThhbG/embedded/result/. 数 据 库. 前台脚本. 后台脚本. var ulObj1 = this.getElementsByTagName('ul')[0]; //this是HTMLElement对象.
Javascript实现简单的下拉二级菜单
标签：
javascript
菜单
| 发表时间：2014-06-14 19:36 | 作者：u011043843
出处：http://blog.csdn.net
在线演示; http://jsfiddle.net/Web_Code/ThhbG/embedded/result/
<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>
作者：u011043843 发表于2014-6-14 11:36:47 原文链接
阅读：101 评论：0 查看评论
相关 [javascript 菜单] 推荐：
Javascript诞生记
- Milido - 阮一峰的网络日志二周前，我谈了一点Javascript的历史. 今天把这部分补全，从历史的角度，说明Javascript到底是如何设计出来的. 只有了解这段历史，才能明白Javascript为什么是现在的样子. 我依据的资料，主要是Brendan Eich的自述. "1994年，网景公司（Netscape）发布了Navigator浏览器0.9版.
JavaScript，你懂的
- dylan - keakon的涂鸦馆经常有人问我，JavaScript应该怎么学. 先学基本语法，如果曾学过C等语言，应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API，熟悉它能干什么；而在学习DOM API的过程中，你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包，学会至少一个常用的JavaScript库（例如jQuery）.
Javascript 里跑Linux
- rockmaple - Shellex's Blog牛逼到暴的大拿 Fabrice Bellard，用Javascript实现了一个x86 PC 模拟器，然后成功在这个模拟器里面跑Linux（请用Firefox 4 / Google Chrome 11打开，Chome 12有BUG）. 关于这个东西… 伊说 “I did it for fun“，大大啊大大啊….
高效 JavaScript
- xtps - ITeye论坛最新讨论传统上，网页中不会有大量的脚本，至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序，脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多，因此提高脚本的性能变得很重要. 对于桌面应用程序，通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.
你得学JavaScript
- 蒋冰 - 伯乐在线 -博客 注：本文由 敏捷翻译 - 蒋少雄 翻译自 Kenny Meyers 的博文. 如果三年前你问我应该学什么语言，我会告诉你是Ruby. 如果你现在想学一门语言的话，你应该学习JavaScript.. 我认为，每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.
javascript 贪食蛇
- Xin - 博客园-首页原创精华区我的程序用javascript与Html中的table结合，实现的简单的贪食蛇游戏，游戏的主要特点，可调整蛇移动速度，可调整蛇移动范围，碰壁、咬到身体则“Game Over. 游戏并不完善，只是实现了主要的功用，有设计不合理的地方，欢迎您感大家提意见. 实现方法：由javascript语言中的setInterval方法驱动整个游戏程序，设置“nowDirection”即蛇的当前移动方向为全局变量，由setInterval方法定时获取蛇的移动方向，由document.onkeydown()捕捉当前按键（上、下、左、右）以修改nowDirection，这样就可以用方向按键控制蛇周期时间的定向移动.
你不懂Javascript
- 英建 - 黑客志过去几年我注意到技术圈一个很奇怪的现象，有太多程序员将那些他们只是有过非常浅显的了解，但其实根本就不懂的技术写到他们的简历中，这个现象几乎每种语言都有，但这其中最严重的就要数Javascript了. 出现这种状况的一个很大的原因就是现如今几乎每个开发者的工作都或多或少要依赖于Javascript，但大多数人并不真的理解这门语言，他们常用的学习方式是复制粘贴，使用这种方式，你永远不会真正学会这门语言，而只能得到一个你已经懂了的假象.
Javascript 中的 var
- - 酷壳 - CoolShell.cnMelonCard发布了一篇文章——” how one missing var ruined our launch“（”少写了一个var毁了我的网站”），这篇文章是说MelonCard用Node.js做后台，因为出了一个小高峰——有50-100人注册，结果整个网站都不响应了，而且还出现了很多奇怪的问题.
JavaScript 基础
- - CSDN博客推荐文章JavaScript可以出现在HTML的任意地方，甚至在之前插入也不成问题，使用标签. 不过要在框架网页中插入的话，就一定要在