利用JavaScript实现简单的下拉菜单
最近几日，突然对Javascript非常兴趣，就想用Javascript实现几个经常都实现的特效，虽然对于javascript一直能够做一些开发，但还是使用很少。
首先我想实现的就是一个下拉样式的树，在实现之前，我就想到结构一定要很简单，我想将菜单的结构做成一个最简单的结构样式，经过约5个小时的奋斗，终于完成初步的实现，先将代码贴下：
代码
<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代码，不在界面中做更做设置，简化界面的设置；
详细功能现在没有时间来进行说明，先将代码贴上；
转载于:https://www.cnblogs.com/jeffwoot/archive/2010/05/30/javascript.html
利用JavaScript实现简单的下拉菜单相关推荐
- jquery实现简单的下拉菜单
本文用简单的几行jquery代码实现简单的下拉菜单效果 看效果 html <ul><li>主题市场<ul><li>运动派<ul><li ...
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
- JavaScript实现二级联动下拉菜单
最近学习前端js,做了一个二级联动下拉菜单.二级下拉菜单的内容随着一级下拉菜单选项的更改而更改.菜单的内容是手动存在js的数组里的,随便写了几个数据. 效果图: 实现源码: <!DOCTYPE ...
- 利用VBA代码解决Excel下拉菜单跳过空单元格的问题
一.问题描述 利用Excel制作下拉菜单,当某一列有空白单元格时,如下图所示 在下拉菜单中,也会存在空白单元格 常规制作下拉菜单的方法没有办法避免该问题,所以需要利用VBA解决这个问题 二.解决方法 ...
- 怎样在excel中利用有效性序列建立二级下拉菜单
比如 在A列中选择部门名称,B列中的选择菜单自动会变成该部门下所有员工 问题补充: 问题一样.那答案呢? madm 的二级下拉菜单的公式如何运用..能否发文件上来 提问者: superaoyi - ...
- 简单jquery下拉菜单流畅版
时间总是不轻易间的溜走,想做的事情还有好多,回想起来还有好多没实现,纠结,头大. 本来说好昨天写的,忙公司项目琐事,耽误了,都过凌点,想写点什么,一下子又不晓得该写什么好. 还是继续整点jquery实 ...
- js实现简单的下拉菜单列表
下拉菜单 效果图: 基本代码 如下: <!DOCTYPE html> <html><head><meta charset=</
- Jsp+javascript打造二级级联下拉菜单
数据库需求分析: class(一级栏目信息):classId(自动编号),className(栏目名称) Nclass(二级栏目信息):NclassId(自动编号),NclassName(栏目名称), ...
- html下拉菜单图片,JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: Good Test function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = ...
最新文章
- 安装华为T2000软件，无法初始化MS SQL 2000问题解决办法
- java 连接sqlitle_ASP连接SQL2005数据库连接代码
- linux命令查看g 版本,如何查看linux版本
- Unity 音频优化方案
- 自制Unity小游戏TankHero-2D(3)开始玩起来
- Codeforces Round #499 (Div. 1) Solution
- 前端白屏问题_深入理解前端性能监控
- 我的第一个SpringBoot项目
- Mysql-sql_mode
- 应用程序按照以下顺序执行由 global.asax 文件中定义的模块或用户代码处理的事件...
- Git安装配置与GitHub注册及简单使用
- RSA私钥及公钥生成
- 利用神经网络来计算XOR
- 什么是OSINT？以及如何使用开源网络情报工具？
- python个人所得税怎么写_Python计算个人所得税！
- python:实现丢番图方程算法(附完整源码)
- andorid 问题集合
- getchar()作用
- maya轮廓光材质快速创建插件 下载及教程
- 管理小故事精髓 100例(转) 1