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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
mysql5详细安装教程
2007/01/15 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Python 基础之字符串string详解及实例
2017/04/01 Python
python实现发送邮件功能
2017/07/22 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
中秋节礼品促销方案
2014/02/02 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
博士生导师推荐信
2014/07/08 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Nginx快速入门教程
2021/03/31 Servers
golang的文件创建及读写操作
2022/04/14 Golang