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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
几个高效,简洁的字符处理函数
Apr 12 Javascript
JS 控件事件小结
Oct 31 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
前端js中的事件循环eventloop机制详解
May 15 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
Vue实现图书管理小案例
Dec 03 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
Smarty3配置及入门语法
2017/02/22 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python 获取字典键值对的实现
2020/11/12 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
社区端午节活动方案
2014/01/28 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js