模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
CSS鼠标滑动菜单_菜单导航特效
查看演示效果
特效Tag：
滑动门
CSS菜单
添加
流行鼠标滑动菜单，实际上这是一个大家常说的滑动门殊效，鼠标经过后相应版块随之变化。
<html> <head> <title>鼠标滑动菜单</title> <meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312"> <style type="text/css"> <!-- body { margin: 0px; } #header { background-color: #ffffff; height: 286px; width: 687px; margin: 0px; padding: 0px; border: 1px solid #CCCCCC; font-size: 12px; } #menu { margin: 0px; padding: 0px; list-style:none; } #menu li { list-style:none; display: block; width: 137px; height: 23px; text-align: center; float: left; margin: 0px; padding-right: 0px; padding-left: 0px; line-height: 23px; height: 23px } .sec1 { background-image: url(/jscss/demoimg/200904/btn_bg.gif);float: left;list-style-type: none; height: 23px;border-right:1px solid #B0BEC7;border-bottom:1px solid #B0BEC7;} .sec2 { background: url(/jscss/demoimg/200904/btn_select.gif);position: relative; height: 23px;border-right:1px solid #B0BEC7;border-bottom:1px solid #FFFFFF;color: #FF0000} .block { display: block;list-style:none;} .unblock { display: none;list-style:none;} .pic img { padding: 3px; border: 1px solid #ccc; } --> </style> </head> <body> <script language=javascript> function secBoard(n) { for(i=0;i<menu.childNodes.length;i++) menu.childNodes[i].className="sec1"; menu.childNodes[n].className="sec2"; for(i=0;i<main.childNodes.length;i++) main.childNodes[i].style.display="none"; main.childNodes[n].style.display="block"; } </script> <div id="header"> <ul id="menu"> <li onMouseOver="secBoard(0)" class="sec2">Mb5u.com</li> <li onMouseOver="secBoard(1)" class="sec1">ASP</li> <li onMouseOver="secBoard(2)" class="sec1">PHP</li> <li onMouseOver="secBoard(3)" class="sec1">EXTJS</li> <li onMouseOver="secBoard(4)" class="sec1">JSP</li> </ul> <ul id="main"> <li class="block">模板无忧（mb5u.com）一个有质量的学习型源码下载站。</li> <li class="unblock">ASP的内容</li> <li class="unblock">PHP的内容</li> <li class="unblock">EXTJS的内容</li> <li class="unblock">JSP的内容</li> </ul> </div> </body> </html>
所属频道：
菜单导航特效
/
更新时间：2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
纤细线条型CSS滑动门
CSS之漂亮区域链接构成的菜单
来自GG网站的超酷JS导航代码
精致纯CSS导航栏
CSS竖排选项卡Tab
纯CSS竖向滑动展开折叠菜单
CSS导航菜单
向上滑动的蓝色大气导航菜单
VISTA风格按钮菜单，量你会喜欢
图文混排的JS+CSS选项卡Tab
猜你也喜欢看这些
纯CSS实现Lightbox点击小图无刷新显示大图
自写Js+CSS轮显效果
JavaScript 图片滚动(绝对酷)
JS漂浮图片，点击图片后会关闭
JS模拟Windows的图片放大特效
一个载入图片等待状态的Loading效果
Js封装匀速循环的横向图片滚动
Javascript图片幻灯代码(无jquery)
JavaScript判断远程图片是否存在
Google纪念Logo小球下落特效
相关链接：
复制本页链接
|
搜索CSS鼠标滑动菜单
特效说明：
菜单导航模板
-
CSS鼠标滑动菜单
。
。。