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

 更新时间:2015年09月12日 15:51:42   作者:企鹅  
这篇文章主要介绍了JS实现超精简响应鼠标显示二级菜单代码,可实现针对鼠标事件的响应动态修改页面元素属性的功能,非常简单实用,需要的朋友可以参考下

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/

具体代码如下:

<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对中文(汉字)进行排序实例详解

    利用JavaScript对中文(汉字)进行排序实例详解

    排序是我们在日常开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了利用JavaScript对中文(汉字)进行排序的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。
    2017-06-06
  • js实现简易垂直滚动条

    js实现简易垂直滚动条

    本文主要介绍了js实现简易垂直滚动条的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js活用事件触发对象动作

    js活用事件触发对象动作

    现在基本上我很少在对象里面写事情触发行为了,因为感觉那样做相同的对象代码利用率太低,容易导致代码冗余.
    2008-08-08
  • 深入理解react-router 路由的实现原理

    深入理解react-router 路由的实现原理

    这篇文章主要介绍了深入理解react-router 路由的实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解Javascript几种跨域方式总结

    详解Javascript几种跨域方式总结

    在实际开发中我们经常需要获取其他域的资源,本篇文章主要介绍了详解Javascript几种跨域方式总结,有兴趣的可以了解一下。
    2017-02-02
  • javascript或asp实现的判断身份证号码是否正确两种验证方法

    javascript或asp实现的判断身份证号码是否正确两种验证方法

    在网页中经常需要输入正确的身份证号码,只能通过程序来验证身份证格式。根据身份证号码生成的原理,就是验证后面几位就可以了。
    2009-11-11
  • 生产制造追溯系统之再说条码打印

    生产制造追溯系统之再说条码打印

    这篇文章主要介绍了生产制造追溯系统之再说条码打印,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 将函数的实际参数转换成数组的方法

    将函数的实际参数转换成数组的方法

    实际参数在函数中我们可以使用 arguments 对象获得 (注:形参可通过 arguments.callee 获得),虽然 arguments 对象与数组形似,但仍不是真正意义上的数组。
    2010-01-01
  • ES6下React组件的写法示例代码

    ES6下React组件的写法示例代码

    这篇文章主要给大家介绍了在ES6下React组件的写法,其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定,文中分别给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • Firefox中autocomplete="off" 设置不起作用Bug的解决方法

    Firefox中autocomplete="off" 设置不起作用Bug的解决方

    在实现补全提示功能时(Suggest),都会给输入框(Input)元素添加autocomplete属性,且值设为off。
    2011-03-03

最新评论