Javascript实现简单的下拉二级菜单
在线演示;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>
Javascript实现简单的下拉二级菜单的更多相关文章
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
- Jquery垂直下拉二级菜单
自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...
- DEDECMS v5.7 完美实现导航条下拉二级菜单
一.引言 好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二.实现过程 1.首先: 将下面这段代码贴到templets\def ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- Web前端开发实战1：二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
随机推荐
- c++学习笔记---03---从一个小程序说起2
从一个小程序说起2 要求:编写一个程序,要求用户输入一串整数和任意数目的空格,这些整数必须位于同一行中,但允许出现在该行中的任何位置.当用户按下键盘上的"Enter"键时,数据输入 ...
- linux-mkdir
mkdir mkdir : 可以用来创建目录,如果不加创建路径即在本路径下创建一个新的指定的目录,否则即在给出的路径下创建目录. 目录创建:目录名尽量见名知意,根据不同需要分层创建,尽量避免在同一目录 ...
- nohup和&后台运行,查看占用端口进程
1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...
- Web桌面应用框架3：Web桌面应用开发的N种Style
研究Web桌面应用开发有一段时间了,总结了Web桌面应用开发的一些主流方式. 一.前端Style 这种方式的就是直接实现一个Web程序,再封装一个浏览器展示,相当粗暴和有效.著名的框架就是Electr ...
- javascript 中遍历数组的简单方法
在Javascript中有自带方便遍历数组的方法(此方法非彼方法不要误会哦): 1 .利用for( index in array ){}; 2.利用 array.forEach( function(e ...
- C#泛型集合之List
1.命名空间:System.Collections.Generic(程序集:mscorlib)2.描述: 1).表示可通过索引访问的对象的强类型列表:提供用于对列表进行搜索.排序和操作的方法. 2). ...
- MySQL GTIDs（global transaction identifiers）
1.如何定义和生成GTIDs 唯一性:在所有主从库都是唯一的,由二元组构成 每个事务和GTIDs之间都有1:1映射 GTID = source_id:transaction_id source_id标 ...
- 腾讯课堂web零基础
utf是国际编码 gb2312 国人发明的 gbk 补充集 想看网站源代码可以按F12 <meta name ='keywords' content='设置关键字'> <meta n ...
- Unity3D游戏xlua轻量级热修复框架
这是什么东西 前阵子刚刚集成xlua到项目,目的只有一个:对线上游戏C#逻辑有Bug的地方执行修复,通过考察了xlua和tolua,最终选择了xlua,原因如下: 1)项目已经到了后期,线上版本迭代了 ...
- C++雾中风景3：const用法的小结
const作为C与C++共有的关键字,很多使用的方式大同小异.但由于C++是一门面向对象的语言,在类和对象中有更多的使用规则.之前学习C语言的时候就被const这个关键字搅得焦头烂额,正巧也借这篇文章 ...