编程 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. 主导航绑定事件

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 相关文章推荐

如何快速的呈现我们的网页的技巧整理

Jul 01 Javascript

jQuery ul标签下拉菜单演示代码

Dec 11 Javascript

跟我学习javascript的循环

Nov 18 Javascript

模拟javascript中的sort排序(简单实例)

Aug 17 Javascript

AngularJS实践之使用NgModelController进行数据绑定

Oct 08 Javascript

js编写的treeview使用方法

Nov 11 Javascript

JavaScript实现的select点菜功能示例

Jan 16 Javascript

完美解决axios跨域请求出错的问题

Feb 05 Javascript

JavaScript中为事件指定处理程序的五种方式分析

Jul 27 Javascript

在Vue项目中取消ESLint代码检测的步骤讲解

Jan 27 Javascript

JavaScript Window浏览器对象模型原理解析

May 30 Javascript

解决vue props传Array/Object类型值,子组件报错的情况

Nov 07 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