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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
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
You might like
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php跨服务器访问方法小结
2015/05/12 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python sorted函数的小练习及解答
2019/09/18 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python属性和内建属性实例解析
2020/01/14 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
python爬虫基础之urllib的使用
2020/12/31 Python
英语系本科生求职信范文
2013/12/18 职场文书
后进生转化工作制度
2014/01/17 职场文书
服装店营销方案
2014/03/10 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
欠条格式范本
2015/07/03 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Go timer如何调度
2021/06/09 Golang