zoukankan
html css js c++ java
滑出式网页导航菜单
代码如下:
<!-- ++++++++++++++++++++++++++++滑出式网页导航菜单++++++++++++++++++++++++++ --> <html> <head> <!-- +++++++++++++++++++++++++++++++++以下代码加入<head>区域++++++++++++++++++++++++++++++++++ --> <style> body,td,a {font-size:9pt;color:black;text-decoration:none} .normal {padding:2px} .up {padding:1px;border:#999999 1px solid;background:#cccccc} .down {padding:1px;border:dbdbdb 1px solid;background:dbdbdb} .menuv {filter: revealTrans(transition=23,duration=0.5);padding:2px} </style> </head> <!-- +++++++++++++++++++++++++++++++++以下代码加入<body>区域++++++++++++++++++++++++++++++++++ --> <body onMouseMove="move()" onLoad="bodyload()"> <script> //闪烁的表格边框 function flashit(){if(!document.all)return;if (td123.style.borderColor=="black")td123.style.borderColor="#999999";else td123.style.borderColor="black"}setInterval("flashit()",500) //渐入的效果,改变alpha值 function high(image){theobject=image,highlighting=setInterval("highlightit(theobject)",100)}function low(image){clearInterval(highlighting),image.filters.alpha.opacity=50}function highlightit(cur2){if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=20;else if(window.highlighting)clearInterval (highlighting)} //拖动层的js var over=false,down=false,divleft,divtop;function move(){if(down){plane.style.left=event.clientX-divleft;plane.style.top=event.clientY-divtop;}} //滑动层 function bodyload() { if(plane.style.pixelTop!=0) { plane.style.pixelTop-=10 setTimeout('bodyload()',1) } } //渐变显示层 function Show(divid) { divid.filters.revealTrans.apply(); divid.style.visibility = "visible"; divid.filters.revealTrans.play(); } function Hide(divid) { divid.filters.revealTrans.apply(); divid.style.visibility = "hidden"; divid.filters.revealTrans.play(); } </script> <div style="position:absolute;z-index:1;1;height:1; left: 0; top: 500" ID=plane onmousedown="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)" onmouseup="down=false"> <table id="td123" cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4"> <tr> <td bgcolor="#cccccc" height="20" style="BORDER:#999999 1px solid;cursor:move"> <div align="center">多级滑动菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this),Show(menu1) " onMouseOut="this.className='normal',low(this),menu1.style.visibility='hidden'" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" > <div align="right">有下级菜单>></div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this),Show(menu2)" onMouseOut="this.className='normal',low(this),menu2.style.visibility='hidden'" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" > <div align="right">有下级菜单>></div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="right">无下级菜单>></div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="right">无下级菜单>></div> </td> </tr> </table> <div id="menu1" style="position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; 105" onMouseOver=this.style.visibility='visible' onMouseOut=this.style.visibility='hidden' class="menuv"> <table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right"> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="center">子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> </table> </div> <div id="menu2" style="position:absolute;top:45px;left:96; z-index:1; visibility: hidden; 105" onMouseOver=this.style.visibility='visible' onMouseOut=this.style.visibility='hidden' class="menuv"> <table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right"> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="center">子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> </table> </div> </div> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
青苹果Web应用商店
https://webapp.taobao.com/
PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发,详细需求联系
QQ:8511978
查看全文
相关阅读:
springboot2 整合redis
springboot2 整合mongodb
Springboot2 Vue 前后端分离 整合打包 docker镜像
nginx常见问题总结
nginx配置中root和alias的区别
nginx高级用法
nginx搭建代理服务器与负载均衡器
nginx常规扩展功能
nginx典型官方模块解释
nginx默认配置文件解释
原文地址:https://www.cnblogs.com/Dicky/p/206779.html
最新文章
对于Access数据库查询遇到空值的解决办法
DEV控件:gridControl常用属性设置(转载)
arcgis破解的时候,不能启动license manager的问题
VSTO开发,转帖
word开发遇到的问题
获取桌面路径
Vue项目打包常见问题整理
Cesium Vue开发环境搭建
ASP.NET Web API + Elasticsearch 6.x 快速做个全文搜索
typescript-koa-postgresql 实现一个简单的rest风格服务器 —— 连接 postgresql 数据库
热门文章
typescript-koa-postgresql 实现一个简单的rest风格服务器 —— 集成 koa
typescript-koa-postgresql 实现一个简单的rest风格服务器 —— typescript 开发环境配置
nodeJS搭建一个简单的(代理)web服务器
springboot 定时任务(多线程)
springboot2 + grpc
springboot2 + grpc + k8s + istio
ubuntu16.04 docker kubernetes(k8s) istio 安装
flutter 简单的StatefullWeiget 获取内部事件的值
flutter 下拉菜单封装
springboot2 mybatis-plus 自定义查询
Copyright © 2011-2022 走看看