DIV+CSS滑动门（仿网易）

2024-09-05 12:19:33

字体：大中小

来源：转载

供稿：网友

仿网易的一款简洁CSS滑动门菜单，基于DIV+CSS，特别简洁，代码看上去很少，但效果很好，这里只是演示，用时候把对应选项卡的内容换为你自己的，一般里面是一些LI列表之类的，你可以在CSS里再加上一下LI的定义，这样就完美了。

<!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>滑动门</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>

上一篇：JavaScript动态选项卡添加的实现

下一篇：CSS带图片的漂亮导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注