Javascript实现简单二级下拉菜单实例


Posted in Javascript onJune 15, 2014
<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加ASP二级域名转向的代码
May 17 Javascript
js DOM的学习笔记
Dec 22 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
jQuery $.extend()用法总结
Jun 15 #Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 #Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 #Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 #Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 #Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 #Javascript
jquery实现倒计时代码分享
Jun 13 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
javascript定义函数的方法
2010/12/06 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python 占位符的使用方法详解
2019/07/10 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python爬虫工具例举说明
2020/11/30 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
幼师自荐信
2013/10/26 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android