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 相关文章推荐
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
Javascript中神奇的this
2016/01/20 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
超市业务员岗位职责
2013/12/05 职场文书
扬尘污染防治方案
2014/06/15 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
八一建军节演讲稿
2014/09/10 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
高老头读书笔记
2015/06/30 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL