首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现非常简单实用的下拉菜单效果

Posted in Javascript onAugust 27, 2015

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款实用的JS下拉菜单，鼠标移上菜单就显示出二级菜单，是从其它网站上整理下来的，修改花了不少时间，现在去除了一些无用代码，更简洁了，而且代码兼容性似乎也表现不错，这款两级下拉菜单，基本是由CSS和JavaScript共同实现的，真的挺简洁实用。

运行效果截图如下：

JavaScript实现非常简单实用的下拉菜单效果

在线演示地址如下：

具体代码如下：

<!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 runat="server"> 
<title>JavaScript下拉菜单</title> 
<style type="text/css"> 
* { 
padding:0; 
margin:0; 
} 
body { 
font-family:verdana, sans-serif; 
font-size:14px; background-color:#000;
} 
#navigation, #navigation li ul { 
list-style-type:none; 
} 
#navigation { 
} 
#navigation li { 
float:left; 
text-align:center; 
position:relative; 
} 
#navigation li a:link, #navigation li a:visited { 
display:block; 
text-decoration:none; 
color:#fff; 
width:82px; 
height:40px; 
line-height:40px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#255f9e; 
padding-left:10px; 
} 
#navigation li a:hover { 
color:#fff; 
background:#ffb100; 
} 
#navigation li ul li a:hover { 
color:#fff; 
background:#ffb100
} 
#navigation li ul { 
display:none; 
position:absolute; 
top:40px;
margin-top:1px; 
font-size:12px;
} 
</style> 
<script type="text/javascript"> 
function displaySubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "block"; 
} 
function hideSubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "none"; 
} 
</script> 
</head> 
<body> 
<ul id="navigation"> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜单1</a> 
<ul> 
<li><a href="#">菜单1</a></li> 
<li><a href="#">菜单1</a></li> 
<li><a href="#">菜单1</a></li> 
<li><a href="#">菜单1</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜单2</a> 
<ul> 
<li><a href="#">栏目2</a></li> 
<li><a href="#">栏目2</a></li> 
<li><a href="#">栏目2</a></li> 
<li><a href="#">栏目2</a></li> 
<li><a href="#">栏目2</a></li> 
</ul> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜单3</a> 
<ul> 
<li><a href="#">菜单3</a></li> 
<li><a href="#">菜单3</a></li> 
<li><a href="#">菜单3</a></li> 
<li><a href="#">菜单3</a></li> 
<li><a href="#">菜单3</a></li> 
</ul> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">菜单4</a> 
<ul> 
<li><a href="#">菜单4</a></li> 
<li><a href="#">菜单4</a></li> 
<li><a href="#">菜单4</a></li> 
<li><a href="#">菜单4</a></li> 
<li><a href="#">菜单4</a></li> 
</ul> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目5</a> 
<ul> 
<li><a href="#">菜单5</a></li> 
<li><a href="#">菜单5</a></li> 
<li><a href="#">菜单5</a></li> 
<li><a href="#">菜单5</a></li> 
<li><a href="#">菜单5</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目6</a> 
<ul> 
<li><a href="#">菜单6</a></li> 
<li><a href="#">菜单6</a></li> 
<li><a href="#">菜单6</a></li> 
<li><a href="#">菜单6</a></li> 
<li><a href="#">菜单6</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目7</a> 
<ul> 
<li><a href="#">菜单7</a></li> 
<li><a href="#">菜单7</a></li> 
<li><a href="#">菜单7</a></li> 
<li><a href="#">菜单7</a></li> 
<li><a href="#">菜单7</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目8</a> 
<ul> 
<li><a href="#">菜单8</a></li> 
<li><a href="#">菜单8</a></li> 
<li><a href="#">菜单8</a></li> 
<li><a href="#">菜单8</a></li> 
<li><a href="#">菜单8</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目09</a> 
<ul> 
<li><a href="#">菜单9</a></li> 
<li><a href="#">菜单9</a></li> 
<li><a href="#">菜单9</a></li> 
<li><a href="#">菜单9</a></li> 
<li><a href="#">菜单9</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目10</a> 
<ul> 
<li><a href="#">菜单10</a></li> 
<li><a href="#">菜单10</a></li> 
<li><a href="#">菜单10</a></li> 
<li><a href="#">菜单10</a></li> 
<li><a href="#">菜单10</a></li> 
</ul> 
</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目11</a> 
<ul> 
<li><a href="#">菜单11</a></li> 
<li><a href="#">菜单11</a></li> 
<li><a href="#">菜单11</a></li> 
<li><a href="#">菜单11</a></li> 
<li><a href="#">菜单11</a></li> 
</ul> 
</li>
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript实现非常简单实用的下拉菜单效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
JavaScript中的Function函数
Aug 27 #Javascript
jquery带动画效果幻灯片特效代码
Aug 27 #Javascript
javascript中判断json的方法总结
Aug 27 #Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 #Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 #Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 #Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 #Javascript
pandas(7) mp3Play(1) 音频(1) 数据处理(2) GUI(2) apply(1) 数据保存(1) agg(1) 数组(5) 矩阵(1)
You might like
PHP入门
2006/10/09 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
javascript 回调函数详解
2014/11/11 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
浅谈layui里的上传控件问题
2019/09/26 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Django框架模板介绍
2019/01/15 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
django 环境变量配置过程详解
2019/08/06 Python
python3操作注册表的方法（Url protocol）
2020/02/05 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
项目经理的岗位职责
2013/11/23 职场文书
粗加工管理制度
2014/02/04 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
pandas数值排序的实现实例
2021/07/25 Python