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

本文链接：https://blog.csdn.net/vs2005_net/article/details/2625447

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">

<!--

#header {

background-color: #F8F4EF;

height: 200px;

width: 400px;

margin: 0px;

padding: 0px;

border: 1px solid #ECE1D5;

font-family: "宋体";

font-size: 12px;

}

#menu {

margin: 0px;

padding: 0px;

list-style-type: none;

}

#menu li {

display: block;

width: 100px;

text-align: center;

float: left;

margin: 0px;

padding-top: 0.2em;

padding-right: 0px;

padding-bottom: 0.2em;

padding-left: 0px;

cursor: hand;

}

.sec1 { background-color: #FFFFCC;}

.sec2 { background-color: #00CCFF;}

.block { display: block;}

.unblock { display: none;}

-->

</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>