javascript鼠标滑过显示二级菜单特效


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下

1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none

function selectTabMenu(i){
switch(i){


case 71:  



document.getElementById("TabMenuCon71").style.display="block";
   document.getElementById("TabMenuCon72").style.display="none";
   document.getElementById("TabMenuCon73").style.display="none";
   document.getElementById("TabMenuCon74").style.display="none";
   document.getElementById("TabMenuCon75").style.display="none";
   document.getElementById("TabMenuCon76").style.display="none";
   break;


   ...

}
}

2. 主导航 绑定事件

<ul class="nav">

<li><a href="#" onmouseover="selectTabMenu(71)">首页</a></li>

3. 二级菜单

<ul id="TabMenuCon71" class="TabMenuCon">
<li><a href="#">公告</a></li>

<li><<a href="#">信息</a></li>
</ul>

4. 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>水平导航-二级菜单</title>
 <style type="text/css">
 *{
  padding:0px;
  margin: 0px;
 }
 .navBar{
  height: 30px;
  background-color: #2B383E;
  text-align: center;
 }
 ul{
  list-style: none;
 }
 .nav li{
  float: left;
 
 }
 .nav li a{
  display: block;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
 }
 .nav li a:hover{
  background-color: #fff;
  color: #4DB6E7
 }
 .TabMenuCon{
  clear: both;
  display: none;
 }
 .TabMenuCon li{
  display: inline-block;
 }
 </style>

 <script type="text/javascript">
 function selectTabMenu(i){
  switch(i){
  case 71: 
  document.getElementById("TabMenuCon71").style.display="block";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 72:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="block";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 73: 
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="block";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 74:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="block";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break; 
  case 75:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="block";
  document.getElementById("TabMenuCon76").style.display="none";
  break; 
  case 76:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="block";
  break; 
  }
 }
 </script>
</head>
<body>
 <div class="navBar">
 <ul class="nav">
  <li><a href="#" onmouseover="selectTabMenu(71)">首页</a></li>
  <li><a href="#" onmouseover="selectTabMenu(72)">关于协会</a></li>
  <li><a href="#" onmouseover="selectTabMenu(73)">协会动态</a></li>
  <li><a href="#" onmouseover="selectTabMenu(74)">协会活动</a></li>
  <li><a href="#" onmouseover="selectTabMenu(75)">会员</a></li>
  <li><a href="#" onmouseover="selectTabMenu(76)">资源空间</a></li>
 </ul>
 
 </div>
 <div id="TabMenuCon">
 <ul id="TabMenuCon71" class="TabMenuCon">
  <li><a href="#">公告</a></li>
  <li><<a href="#">信息</a></li>
 </ul>
 <ul id="TabMenuCon72" class="TabMenuCon">
  <li>协会简介</li>
  <li>组织机构</li>
  <li>协会章程</li>
 </ul>
 <ul id="TabMenuCon73" class="TabMenuCon">
  <li>协会新闻</li>
  <li>活动预告</li>
  <li>求职招聘</li>
 </ul>
 <ul id="TabMenuCon74" class="TabMenuCon">
  <li>义务维修月</li>
  <li>平面设计活动</li>
  <li>程序设计活动</li>
  <li>户外拓展</li>
 </ul>
 <ul id="TabMenuCon75" class="TabMenuCon">
  <li>会员登录</li>
  <li>会员注册</li>
  <li>缴纳会费</li>
  <li>会员信息管理</li>
  <li>修改密码</li>
 </ul>
 <ul id="TabMenuCon76" class="TabMenuCon">
  <li>PS教程</li>
  <li>前端设计</li>
  <li>Flash教程</li>
 </ul>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
JavaScript实现栈结构详细过程
Dec 06 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 #Javascript
分享jQuery封装好的一些常用操作
Jul 28 #Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 #Javascript
利用JS实现数字增长
Jul 28 #Javascript
灵活使用数组制作图片切换js实现
Jul 28 #Javascript
AngularJS 中文API参考手册
Jul 28 #Javascript
AngularJS 简单应用实例
Jul 28 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php去除重复字的实现代码
2011/09/16 PHP
php长字符串定义方法
2012/07/12 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python执行时间的计算方法小结
2017/03/17 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python实现验证码识别功能
2018/06/07 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
525心理活动总结
2014/07/04 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
四查四看整改措施
2014/09/19 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
财务个人年度总结范文
2015/02/26 职场文书
师德师风培训感言
2015/08/03 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python