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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
JS常用表单验证方法总结
May 22 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
js实现图片实时时钟
Jan 15 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php使用codebase生成随机数
2014/03/25 PHP
php正则表达式学习笔记
2015/11/13 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
详解ECMAScript typeof用法
2018/07/25 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python进程间通信Queue实例解析
2018/01/25 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python 多维List创建的问题小结
2019/01/18 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
协议书的格式
2014/04/23 职场文书
生物学专业求职信
2014/07/23 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
感动中国何玥观后感
2015/06/02 职场文书
爱国电影观后感
2015/06/19 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
使用scrapy实现增量式爬取方式
2022/06/21 Python