利用JavaScript实现简单的下拉菜单
2010-05-30 07:43
731 查看
最近几日，突然对Javascript非常兴趣，就想用Javascript实现几个经常都实现的特效，虽然对于javascript一直能够做一些开发，但还是使用很少。
首先我想实现的就是一个下拉样式的树，在实现之前，我就想到结构一定要很简单，我想将菜单的结构做成一个最简单的结构样式，经过约5个小时的奋斗，终于完成初步的实现，先将代码贴下：
代码
<!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>
<title>Drop menu</title>
<style type="text/css">
body
{
font-size: 12px;
}
.dropMenu
{
background-color: Red;
height: 27px;
}
.dropMenu ul
{
padding: 0px;
margin: 0px;
}
.dropMenu a
{
border:solid 1px #00ff00;
display: block;
}
.dropMenu ul li
{
list-style-type: none;
border: solid 1px #00ff00;
float: left;
padding: 5px;
cursor:hand;
}
.dropMenu ul ul
{
background-color:red;
width: 140px;
display: none;
z-index: 10;
}
.dropMenu ul ul li
{
float: none;
}
</style>
<script language="javascript" type="text/javascript">
function openDropMenu(sender) {
var nextNode = sender.nextSibling;
var dropMenu = sender.parentNode;
// 隐藏所有的下拉列表；
for (var i = 0; i < dropMenu.childNodes.length; i++) {
if (dropMenu.childNodes[i].nodeName.toLowerCase() == 'ul' &&
dropMenu.childNodes[i].style.display == 'block') {
closeDropMenu(dropMenu.childNodes[i]);
}
}
if (nextNode.nodeName.toLowerCase() == "ul") {
nextNode.style.left = sender.offsetLeft;
nextNode.style.top = sender.offsetTop + sender.offsetHeight;
nextNode.style.position = "absolute";
nextNode.style.display = 'block';
}
document.onclick = function() {
document.onclick = '';
//alert(sender.innerText);
closeDropMenu(nextNode);
};
}
function openDropSubMenu(sender) {
var nextNode = sender.nextSibling;
var ulNode = sender.parentNode;
for (var i = 0; i < ulNode.childNodes.length; i++) {
if (ulNode.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(ulNode.childNodes[i]);
}
}
if (nextNode != null && nextNode.nodeName.toLowerCase() == "ul") {
// nextNode.style.border = "solid 1px #0000ff";
nextNode.style.position = "absolute";
nextNode.style.left = sender.offsetLeft + sender.offsetWidth;
nextNode.style.top = sender.offsetTop;
nextNode.style.display = "block";
}
}
// 关闭下接菜单
function closeDropMenu(subMenu) {
if (subMenu == null || subMenu.style.display == 'none') return;
// 关闭子菜单
for (var i = 0; i < subMenu.childNodes.length; i++) {
if (subMenu.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(subMenu.childNodes[i]);
}
}
// 关闭当前菜单。
subMenu.style.display = 'none';
}
</script>
</head>
<body>
<h1>Drop Menu Example</h1>
<div class="dropMenu">
<ul>
<li>Normal</li>
<li onmouseover="openDropMenu(this);">关于公司</li>
<ul>
<li>Normal Sub MenuA</li>
<li onmouseover="openDropSubMenu(this);"><a href="http://www.g.cn" >Google</a></li>
<ul>
<li onmouseover="openDropSubMenu(this);">二级子菜单AA</li>
<li onmouseover="openDropSubMenu(this);">二级子菜单AB</li>
<ul>
<li onmouseover="openDropSubMenu(this);">三级子菜单BA</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BB</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BC</li>
<ul>
<li><a href='http://www.baidu.com'>白度</a></li>
<li>四级菜单</li>
<li>四级菜单</li>
</ul>
</ul>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
<li onmouseover="openDropMenu(this);">解决方案</li>
<ul>
<li>解决方案一级子菜单A</li>
<ul>
<li>二级子菜单AA</li>
<li>二级子菜单AB</li>
</ul>
<li>解决方案一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li>解决方案一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li>解决方案一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li>解决方案一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
</ul>
</div>
</body>
</html>本
本方法利用简单的ul与li标签实现菜单的结构，看起来非常自然，但还有一些问题，主要包括在以下方面：
1.没有实现在FireFox中显示出同样的效果；
2.还没有增加任何对菜单项目的CSS样式；
3.还想做成，只要在DIV中提供一个CSS样式就能够自动增加子项目的CSS样式和JAVASCRIPT代码，不在界面中做更做设置，简化界面的设置；
详细功能现在没有时间来进行说明，先将代码贴上；
首先我想实现的就是一个下拉样式的树，在实现之前，我就想到结构一定要很简单，我想将菜单的结构做成一个最简单的结构样式，经过约5个小时的奋斗，终于完成初步的实现，先将代码贴下：
代码
<!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>
<title>Drop menu</title>
<style type="text/css">
body
{
font-size: 12px;
}
.dropMenu
{
background-color: Red;
height: 27px;
}
.dropMenu ul
{
padding: 0px;
margin: 0px;
}
.dropMenu a
{
border:solid 1px #00ff00;
display: block;
}
.dropMenu ul li
{
list-style-type: none;
border: solid 1px #00ff00;
float: left;
padding: 5px;
cursor:hand;
}
.dropMenu ul ul
{
background-color:red;
width: 140px;
display: none;
z-index: 10;
}
.dropMenu ul ul li
{
float: none;
}
</style>
<script language="javascript" type="text/javascript">
function openDropMenu(sender) {
var nextNode = sender.nextSibling;
var dropMenu = sender.parentNode;
// 隐藏所有的下拉列表；
for (var i = 0; i < dropMenu.childNodes.length; i++) {
if (dropMenu.childNodes[i].nodeName.toLowerCase() == 'ul' &&
dropMenu.childNodes[i].style.display == 'block') {
closeDropMenu(dropMenu.childNodes[i]);
}
}
if (nextNode.nodeName.toLowerCase() == "ul") {
nextNode.style.left = sender.offsetLeft;
nextNode.style.top = sender.offsetTop + sender.offsetHeight;
nextNode.style.position = "absolute";
nextNode.style.display = 'block';
}
document.onclick = function() {
document.onclick = '';
//alert(sender.innerText);
closeDropMenu(nextNode);
};
}
function openDropSubMenu(sender) {
var nextNode = sender.nextSibling;
var ulNode = sender.parentNode;
for (var i = 0; i < ulNode.childNodes.length; i++) {
if (ulNode.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(ulNode.childNodes[i]);
}
}
if (nextNode != null && nextNode.nodeName.toLowerCase() == "ul") {
// nextNode.style.border = "solid 1px #0000ff";
nextNode.style.position = "absolute";
nextNode.style.left = sender.offsetLeft + sender.offsetWidth;
nextNode.style.top = sender.offsetTop;
nextNode.style.display = "block";
}
}
// 关闭下接菜单
function closeDropMenu(subMenu) {
if (subMenu == null || subMenu.style.display == 'none') return;
// 关闭子菜单
for (var i = 0; i < subMenu.childNodes.length; i++) {
if (subMenu.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(subMenu.childNodes[i]);
}
}
// 关闭当前菜单。
subMenu.style.display = 'none';
}
</script>
</head>
<body>
<h1>Drop Menu Example</h1>
<div class="dropMenu">
<ul>
<li>Normal</li>
<li onmouseover="openDropMenu(this);">关于公司</li>
<ul>
<li>Normal Sub MenuA</li>
<li onmouseover="openDropSubMenu(this);"><a href="http://www.g.cn" >Google</a></li>
<ul>
<li onmouseover="openDropSubMenu(this);">二级子菜单AA</li>
<li onmouseover="openDropSubMenu(this);">二级子菜单AB</li>
<ul>
<li onmouseover="openDropSubMenu(this);">三级子菜单BA</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BB</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BC</li>
<ul>
<li><a href='http://www.baidu.com'>白度</a></li>
<li>四级菜单</li>
<li>四级菜单</li>
</ul>
</ul>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
<li onmouseover="openDropMenu(this);">解决方案</li>
<ul>
<li>解决方案一级子菜单A</li>
<ul>
<li>二级子菜单AA</li>
<li>二级子菜单AB</li>
</ul>
<li>解决方案一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li>解决方案一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li>解决方案一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li>解决方案一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
</ul>
</div>
</body>
</html>本
本方法利用简单的ul与li标签实现菜单的结构，看起来非常自然，但还有一些问题，主要包括在以下方面：
1.没有实现在FireFox中显示出同样的效果；
2.还没有增加任何对菜单项目的CSS样式；
3.还想做成，只要在DIV中提供一个CSS样式就能够自动增加子项目的CSS样式和JAVASCRIPT代码，不在界面中做更做设置，简化界面的设置；
详细功能现在没有时间来进行说明，先将代码贴上；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript实现非常简单实用的下拉菜单效果
- 利用javaScript实现简单的计算器
- 利用JavaScript及jQuery实现图片预加载的简单方法
- 利用 JavaScript 数据绑定实现一个简单的 MVVM 库
- 利用Html+JavaScript实现简单购物车
- 谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
- 利用Javascript裁剪图片并存储的简单实现
- 如何利用javascript完成对网页css的修改从而实现简单的特效
- 利用css和javascript实现简单的计算器
- 利用javascript实现原生简单ajax的方法。
- 利用JavaScript实现简单的拖动层(只使用于IE)
- 利用JavaScript实现简单的拖动层(只使用于IE)
- Javascript实现简单二级下拉菜单实例
- JavaScript实现非常简单实用的下拉菜单效果
- 实现一个简单的Javascript级联下拉菜单
- 利用JavaScript 实现Word简单导出功能
- 利用JavaScriptCore实现简单的功能（阶乘）
- 利用javascript特性实现的简单HashTable
- JavaScript利用Date实现简单的倒计时实例
- 利用JavaScript实现简单的拖动层(只使用于IE)