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 ...
随机推荐
- json标准是双引号
双引号才是json 的标准,单引号是不规范的(虽然在js 中是行的通的)!json 的名称和字符串值需要用双引号引起来,单引号的话,使用json.parse会出现错误
- python基础知识——基于python3.6
语法糖 # # -*- coding: utf-8 -*- # #------------- # #--------- 语法糖--------------- # #------------------ ...
- python 3 ---购物车练习
# -*- coding:utf-8 -*-#Author Chen #定义商品列表List_of_commodities = [ ('Iphone',6888), ('Mac Pro',12888) ...
- linux-rmdir
linux-rmdir rmdir命令用于删除空目录,删除的目录的里面必须无任何东西,有点鸡肋的命令 从下面先建立了一个a文件夹. 命令: rmdir a,即可删除这个空目录,ls 就找不到这个文件夹 ...
- vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题
vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...
- table固定头部，表格tbody可上下左右滑动
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class="table_box_big"> ...
- C#获取指定月指定周的日期范围
); MessageBox.Show(end.ToShortDateString());
- [转载] PHP工作模型与运行机制
转载自http://www.nowamagic.net/librarys/veda/detail/350 PHP的工作模型非常特殊.从某种程度上说,PHP和ASP.ASP.NET.JSP/Servle ...
- VueJS使用笔记
html: <script src='vue.js'></script> <div id='app'> <span>{{msg}}</span&g ...
- params SqlParameter[] commandParameters（转）
C#代码 ExecuteReader(string connectionString, CommandType commandType, string commandText, params Sql ...