你的位置：网翼首页>网络学院>网页特效>菜单导航>

仿网易的滑动门导航效果代码(DIV+CSS)

时间:2008-05-10 02:23:13 来源:网翼网络收集作者: 【背景色

】

DIV+CSS实现的仿网易的滑动门导航效果代码，代码非常短小精悍，希望对您主页制作有用处。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿网易的滑动门技术，用DIV+CSS技术实现</title> <style type="text/css">  </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">最新新闻</li> <li onMouseOver="secBoard(1)" class="sec1">最新文章</li> <li onMouseOver="secBoard(2)" class="sec1">最新日志</li> <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li> </ul>  <ul id="main"> <li class="block">第一个内容</li> <li class="unblock">第二个内容</li> <li class="unblock">第三个内容</li> <li class="unblock">第四个内容</li> </ul>  </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

网友评论加入收藏打印本文我要推荐关闭此页

上一篇：网站导航文字按特殊的类型进行切换的特效下一篇：网页左右浮动广告特效代码

05-10网站导航文字按特殊的类型进行切换的特效	05-10商品分类到搜索栏友好提示特效
05-11类似选项卡的切换效果	05-11网页特效代码：非常简洁的网页导航菜单
05-11网页设计中不错的二级导航菜单特效	05-11网页特效：个性化的网页按钮
05-11不错的翻页特效(CSS实现)	05-11效果不错的分页列表的网页特效代码
04-09[JS效果]动画效果打开/关闭层	06-11XHTML+CSS制作的网站导航菜单
03-28通用滑动门类导航

文章评论

共有 0位网翼网友发表了评论查看完整内容

网翼IT技术教程网站：WWW.WEBYI.COM

仿网易的滑动门导航效果代码(DIV+CSS)

相关文章

文章评论

推荐信息

24小时热门信息

最新信息