模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
多级滚动菜单(cool)_菜单导航特效
查看演示效果
特效Tag：
菜单
添加
多级滚动菜单(cool),您可以先修改部分代码再运行.
<!--要完成此效果需要三个步骤 第一步：把如下代码加入到<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> <!--第二步：把如下代码加入到--><body> <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;width: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; width: 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; width: 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> <!--第三步：把“onmousemove="move()" onload=bodyload()”加在<body>标记里 例如：--><body onmousemove="move()" onload=bodyload()>
所属频道：
菜单导航特效
/
更新时间：2010-05-23
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
CSS竖向菜单，多级展开
像滑动门一样的CSs菜单
鼠标滑过字体加粗、背景变色的CSS导航栏
比较流行的JS+CSS选项卡TAB
自写的滑动门式菜单
拖动菜单
类似淘宝一样的纯CSS导航菜单
自己写的CSS+JS滑动门菜单
带三角导航的CSS菜单
最简洁的仿QQ折叠菜单的实现
猜你也喜欢看这些
无缝垂直图片滚动的JS代码
向上翻动的内容切换示例
JS水平循环飞舞的图片
XML立体字体
变长宽的图片
NBA网站大幅JS焦点图切换
黑色风格带缓冲的JS焦点图代码
百叶窗形式的图片渐变交替
图片拖拉缩放效果(仿PHOTOSHOP)
下拉框选择图片的代码
相关链接：
复制本页链接
|
搜索多级滚动菜单(cool)
特效说明：
菜单导航模板
-
多级滚动菜单(cool)
。
。