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 相关文章推荐
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
javascript操作cookie
Jan 17 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
js实现微信聊天界面
Aug 09 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JS原型链怎么理解
2016/06/27 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
如何使用python操作vmware
2019/07/27 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
离婚财产分隔协议书
2014/10/23 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Python PIL按比例裁剪图片
2022/05/11 Python