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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
js简单时间比较的方法
Aug 02 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
php a simple smtp class
2007/11/26 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP二维数组去重算法
2016/12/17 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python中pip的安装与使用教程
2018/08/10 Python
Python清空文件并替换内容的实例
2018/10/22 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
pandas分组聚合详解
2020/04/10 Python
python获取linux系统信息的三种方法
2020/10/14 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
应用数学自荐书范文
2013/11/24 职场文书
采购经理岗位职责
2014/02/16 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
安全教育观后感
2015/06/17 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python