您好,欢迎来到模板无忧!
登录
注册
闂佽 鍋撻柟顖滃椤ワ拷
闂佺懓鍚嬬划搴ㄥ磼閿燂拷
闂侀潻闄勫妯好归敓锟�
闁汇埄鍨奸崰鏍ㄦ叏閿燂拷
模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
关闭顶部
展开顶部
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
AI鐏忓繗浠� 閼宠棄鍟撴导姘辨暰
閸╃喎鎮�
閹恒劏宕�
展开边栏
关闭边栏
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
跳动的菜单_菜单导航特效
查看演示效果
特效Tag:
菜单
添加
缂佸洦鈪礑edeCMS鐟欏棝顣堕弫娆戔柤
娑旀壆鈹栭梻锟� 缁夌喐婀囬崝鈥虫珤 闁缍夌涵鏇氱鞍閼辨棑绱�
閺冪姴鍜栫粩娆撴毐瀹搞儱鍙�,閻ф儳瀹抽弶鍐櫢娑撯偓闁款喖鍙忛弻锟�!
跳动的菜单,您可以先修改部分代码再运行.
<head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>www.mb5u.com</title> <style type="text/css"> <!-- a:link,a:visited { text-decoration: none; color: #666666 } a:hover { text-decoration: underline } #hor1 { position:absolute; left:320px; top:20px; width:220px; height:20px; z-index:1; background-color: #999900; } #hor2 { position:absolute; left:320px; top:40px; width:220px; height:20px; z-index:2; background-color: #FFCC00; } #hor3 { position:absolute; left:320px; top:60px; width:220px; height:20px; z-index:3; background-color: #99CC00; } #board1 { position:absolute; left:320px; top:40px; width:220px; height:120px; z-index:-100; background-color: #333333; visibility: hidden; } body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; font-weight: bold; } body { background-color: #666666; } #board2 { position:absolute; left:320px; top:60px; width:220px; height:120px; z-index:-90; background-color: #333333; visibility: hidden; } #board3 { position:absolute; width:220px; height:120px; z-index:-80; left: 320px; top: 80px; background-color: #333333; visibility: hidden; } #hor4 { position:absolute; left:320px; top:80px; width:220px; height:20px; z-index:4; background-color: #99CCCC; } #board4 { position:absolute; left:320px; top:100px; width:220px; height:120px; z-index:-70; background-color: #333333; visibility: hidden; } --> </style> <script type="text/javascript"> lastNo=0 function re(menu_no){ if(lastNo!=menu_no){ cur=menu_no+1 lastNo=menu_no rest() }else{ cur=100 } document.getElementById("board"+menu_no).style.visibility="visible" } function rest(){ for(i=1;i<=4;i++){ document.getElementById("hor"+i).style.top=20*i; document.getElementById("board"+i).style.visibility="hidden" } menu_num=4; act=1 height=120+20 speed=0; posY=0; } function huke(){ if(act==1&&cur<100){ speed=(height-posY)*0.69+speed*0.6 posY+=speed for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=posY+(i-2)*20 } if(Math.abs(height-posY)<0.5){ for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=height+(i-2)*20 } act=0 } setTimeout("huke()",50) } } </script> </head> <body> <div id="hor1" onclick="re(1);huke()">模板无忧</div> <div id="hor2" onclick="re(2);huke()">Populor</div> <div id="hor3" onclick="re(3);huke()">Sports</div> <div id="hor4" onclick="re(4);huke()">Woman</div> <div id="board1"><a href="http://www.mb5u.com" target="_blank">http://www.mb5u.com</a></div> <div id="board2"><a href="http://www.mb5u.com" target="_blank">http://www.mb5u.com</a></div> <div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球?</div> <div id="board4">1.二十一世纪最缺的是什么?人才<br /> <a href="http://www.mb5u.com" target="_blank">http://www.mb5u.com</a> <a href="http://www.mb5u.com" target="_blank">http://www.mb5u.com</a></div> </body>
所属频道:
菜单导航特效
/
更新时间:2010-05-23
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
定时自动切换的选项卡Tab
从百度扒下来的Js竖直伸缩菜单
CSS 竖排折叠菜单
仿QQ折叠菜单平滑型(JS+css)
仿蓝色理想网站选项卡式的导航条
windows XP左侧的菜单效果
CSS+Js遮罩效果的TAB及焦点图片切换
下拉菜单链接页面打开方式选择
一个选项卡Tab的雏形
简单菜单
猜你也喜欢看这些
基于marquee类带停顿横向图片滚动代码
JS拖拽放大拉伸图片
Js图片连续左右滚动代码
很靓的导航
JavaScript 由左向右的图片渐变过渡
链接图片无缝向左平滑滚动Js版代码
JavaScript妙味课堂,物体平移运动特效
纯CSS代码实现的图片列表滚动
像弹簧一样抖动的横向图片滚动
Google纪念Logo小球下落特效
相关链接:
复制本页链接
|
搜索跳动的菜单
特效说明:
菜单导航模板
-
跳动的菜单
。
闁衡偓閹増顥�&闁告帒妫旈棅锟�
QQ缂佸本妞藉Λ锟�
闁哄倻澧楀顔碱嚗椤旂厧瑙�
闁煎灚宕橀鍡楊嚗椤旂厧瑙�
濞存粏妗ㄥЧ澶岀磾閿燂拷
鐎殿喒鍋撻煫鍥у暟缂嶏拷
闁谎勫劤鐎规娊骞栧⿰鍡橆棏
濠㈣泛绉撮崺妤冪磾閹存繃绲�
闁哄洦娼欓ˇ锟�...