js实现鼠标放在一级菜单，下滑出二级菜单

初始状态

鼠标放在tab4上

实现的代码如下

<html><head>
<title></title>
</head><style>*{margin:0;padding:0;}.tab{margin-left:-3px;float:left;width:60px;//height:20px;
            background:#ccc;text-align:center;}.tab .div-tab{border:1px solid #999;}.tab ul{display:none;overflow:hidden;background:blue;width:0px;height:0px;}.tab ul li{list-style:none;}</style><script>window.onload=function(){var aDiv1=document.getElementsByClassName('tab');var aul=document.getElementsByTagName('ul');var timerfor(var i=0;i<aDiv1.length;i++){aDiv1[i].index=i;var aIndex=aDiv1[i].indexaDiv1[i].onmouseover=function(){for(var j=0;j<aDiv1.length;j++){if(this.index!=j){aul[j].style.height='0px'}}aul[this.index].style.display='block'aul[this.index].style.width='60px';var index=this.indexclearInterval(timer)timer=setInterval(function(){if(aul[index].offsetHeight>80){}else{aul[index].style.height=aul[index].offsetHeight+2+'px';}},30)}aDiv1[i].onmouseout=function(){var index=this.indexclearInterval(timer)timer=setInterval(function(){if(aul[index].offsetHeight<=0){}else{aul[index].style.height=aul[index].offsetHeight-2+'px';}},30)}}}</script>
<body><div class="tab"><div class="div-tab">tab1</div><ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><div class="tab"><div class="div-tab">tab2</div><ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><div class="tab"><div class="div-tab">tab3</div><ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><div class="tab"><div class="div-tab">tab4</div><ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
</body></html>

转载于:https://www.cnblogs.com/superCwen/p/9839881.html

js实现鼠标放在一级菜单，下滑出二级菜单相关推荐

js实现鼠标放在div 悬浮显示另一个div内容链接（不占位置）
js实现鼠标放在div 悬浮显示另一个div内容链接 (不占位置) 代码如下不喜勿喷简单记录前端小知识 <div><a id="div1" href=&quo ...
Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）
前言网上的教程都太乱了,各种杂乱无注释代码.图片资源丢失.一堆样式代码,根本无法改造后应用到自己的项目中. 本文实现了在 Vue / Nuxt 项目中,垂直分类菜单项,当用户鼠标移入菜单后,右侧自 ...
html与js二级菜单横排,JavaScript实现横向滑出的多级菜单效果
本文实例讲述了JavaScript实现横向滑出的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气, ...
div+css 纵向导航菜单及二级菜单弹出
1) 纵向导航菜单 <styletype="text/css"> body { font-family: Verdana;font-size: 12px; line-h ...
html 悬停二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！
话不多说,先上效果图: 1.鼠标没在上面 image 2.鼠标放在一级菜单上,展开二级菜单 image 3.鼠标放在二级菜单上 image 二级菜单测试 /*为了使菜单居中*/ body { padd ...
CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页
图顶层CSS菜单,弹出二级菜单,二级菜单多列: 主体部分三个DIV布局: 这个是IBM官网布局的样子: 代码,拿去花吧:我的奶酪很多: 有不清楚的地方可以问我,qq 513979805 <!D ...
python制作二级菜单_python之tkinter使用-二级菜单
# 菜单功能说明:二级菜单 import tkinter as tk from tkinter import messagebox root = tk.Tk() root.title('菜单选择') ...
微信公众帐号开发教程第14篇-自定义菜单的创建及菜单事件响应
微信5.0发布 2013年8月5日,伴随着微信5.0 iPhone版的发布,公众平台也进行了重要的更新,主要包括: 1)运营主体为组织,可选择成为服务号或者订阅号: 2)服务号可以申请自定义菜单: 3 ...
bootstrap导航窗格响应式二级菜单
这次碰到的需求是响应式二级导航窗格,默认的导航窗格只有点击下拉框的二级窗格,会有如下问题:一级菜单无法添加超链接,二级菜单展示要多点一下. 实现目标: 1.滑动到指定区域,展示二级菜单. 2.一级菜单 ...

js实现鼠标放在一级菜单，下滑出二级菜单

js实现鼠标放在一级菜单，下滑出二级菜单相关推荐

最新文章

热门文章