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

2024-12-02 12:08:53

本文实例为大家分享了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>

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

Vue.js组件tree实现无限级树形菜单

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
全国省市二级联动下拉菜单 js版

本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&
JS中用三种方式实现导航菜单中的二级下拉菜单

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style
最简单js代码实现select二级联动下拉菜单

本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.
JS三级可折叠菜单实现方法

本文实例讲述了JS三级可折叠菜单实现方法.分享给大家供大家参考,具体如下: .ASPX代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
原生JS实现N级菜单的代码

需求分析简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单 1.没有下一级菜单,直接排列 2.有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 '>' 的符号,效果如图: 图:1 初步实现 1.实现是否存在 > 注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路. HTML结构如下: 图:2 •要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移
基于Javascript实现二级联动菜单效果

本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]
javascript鼠标滑过显示二级菜单特效

本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下 1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById
jquery实现鼠标滑过显示二级下拉菜单效果

本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>
JS实现鼠标滑过显示边框的菜单效果

本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS鼠标滑过显示边框菜单</title> </head> <body> <style> .menulines{ border:1px solid white; } .menulines a{ text-decoration:none; color:red; } </style> <
鼠标经过显示二级菜单js特效

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
JS实现超精简响应鼠标显示二级菜单代码

本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</
jquery实现像栅栏一样左右滑出式二级菜单效果代码

本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht
JavaScript+CSS实现的可折叠二级菜单实例

本文实例讲述了JavaScript+CSS实现的可折叠二级菜单.分享给大家供大家参考,具体如下: .aspx文件: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
jquery实现鼠标滑过显示提示框的方法

本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加 jquery.js.按钮图片.提示框图片 ) HTML 代码复制代码代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF
js实现向右横向滑出的二级菜单效果

本文实例讲述了js实现向右横向滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这是一个网页上的横向滑出二级菜单,菜单是竖向排列的,但二级子菜单项是向右横向滑出的,引入了一个JS封装库文件,这个菜单兼容性方面也做的挺好,只是觉得,菜单中有些代码不便于修改,有兴趣的自己看看吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-right-show-out-2l-menu-codes/ 具体代码如下: <!DOCTYPE HTML
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码

在使用Matplotlib画图过程中,有些内容必须鼠标点击或者划过才可以显示,这个问题可以依赖于annotate(s='str' ,xy=(x,y) ,xytext=(l1,l2) ,..)这个函数,其中s 为注释文本内容 , xy 为被注释的坐标点, xytext 为注释文字的坐标位置,其他参数可自行百度哈.当鼠标滑过时候,将其设置为可见,默认情况下为隐藏.下面是一个小例子: # -*- coding: UTF-8 -*- import matplotlib.pyplot as plt fig

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

相关推荐

随机推荐