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操纵Cookie实现购物车程序
Feb 15 Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
vue整合百度地图显示指定地点信息
Apr 06 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中的日期及时间
2006/11/23 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
PyQt5实现简易电子词典
2019/06/25 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python解析json代码实例解析
2019/11/25 Python
Python列表切片常用操作实例解析
2019/12/16 Python
通过python检测字符串的字母
2020/02/18 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
党员干部廉洁承诺书
2014/05/28 职场文书
学期个人工作总结
2015/02/13 职场文书
总经理岗位职责范本
2015/04/01 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书