JS实现超精简响应鼠标显示二级菜单代码


Posted in Javascript onSeptember 12, 2015

本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码。分享给大家供大家参考。具体如下:

这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式。喜欢的朋友拿去修改一下,再美化一番,就够用了。

运行效果截图如下:

JS实现超精简响应鼠标显示二级菜单代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>二级菜单,响应鼠标</title>
<style type="text/css">
.mainNav ul li {float: left;width: 150px;}
.mainNav li ul {display: none;}
li.hover ul {display: block;}
</style>
<script language="javascript" type="text/javascript">
 function showSubLevel(Obj){
  Obj.className="hover";
 }
 function hideSubLevel(Obj){
  Obj.className="";
 }
</script>
</head>
<body>
<div class="mainNav">
 <ul>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目A
 <ul>
 <li>A的二级栏目</li>
 <li>A的二级栏目</li>
 <li>A的二级栏目</li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目B
 <ul>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目C
 <ul>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 <li>B的二级栏目</li>
 </ul>
 </li>
 </ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
js arguments.callee的应用代码
May 07 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 #Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 #Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 #Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 #Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 #Javascript
javascript判断网页是关闭还是刷新
Sep 12 #Javascript
js查看一个函数的执行时间实例代码
Sep 12 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JS array 数组详解
2009/03/22 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
详解Python中的type()方法的使用
2015/05/21 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
python高级特性简介
2020/08/13 Python
python 动态绘制爱心的示例
2020/09/27 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
外贸公司实习自我鉴定
2013/09/24 职场文书
酒吧创业计划书
2014/01/18 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书