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资料prototype 属性
Mar 13 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
详解React 条件渲染
Jul 08 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
桌面中心(二)数据库写入
2006/10/09 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
python实现的简单抽奖系统实例
2015/05/22 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python队列queue模块详解
2018/04/27 Python
Python检查ping终端的方法
2019/01/26 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Keras搭建自编码器操作
2020/07/03 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
公司接待方案
2014/03/08 职场文书
超市中秋节促销方案
2014/03/21 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
微观世界观后感
2015/06/10 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
行政处罚告知书
2015/07/01 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers