首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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鼠标滑过显示二级菜单特效

- Author -

行者杰客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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
长波(3) 怀旧期刊(1) 保养(1) 下载(1) 短波(8) 无线电(12) 烈阳天道(2) 萨拉雷(1) 广播(8) 中学科技(1)
You might like
动态新闻发布的实现及其技巧
2006/10/09 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
destoon会员注册提示“数据校验失败（2）”解决方法
2014/06/21 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
js实现数组转换成json
2015/06/26 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
法学毕业生自我鉴定
2013/11/08 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
小区文明倡议书
2014/05/16 职场文书
北京故宫的导游词
2015/01/31 职场文书
护士自荐信范文
2015/03/25 职场文书
郭明义电影观后感
2015/06/08 职场文书
秋季运动会加油词
2015/07/18 职场文书
话题作文之自信作文
2019/11/15 职场文书
详解nginx进程锁的实现
2021/06/14 Servers