提示：您可以先修改部分代码再运行
<!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>
<title>经典的滑动门导航菜单(一)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
/*
* author raceman
* website www.daqianduan.com
* time 2010.05.05
* modify 2010.05.11
* color #444 #0064B1 #ff6700
*/
body{font-size:12px;color:#444;font-family:Arial,Verdana,Helvetica,sans-serif;word-break:break-all;}
ul,li{padding:0;margin:0;}
li{list-style:none;}
a{color:#0064B1;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#ff6700;text-decoration:underline;}
#menu_l,#menu_r{width:4px;height:73px;overflow:hidden;position:absolute;top:0;}
#menu_l{background:url(yun_qi_img/menu_left.gif) no-repeat;left:-4px;}
#menu_r{background:url(yun_qi_img/menu_right.gif) no-repeat;right:-4px;}
#menu{background:url(yun_qi_img/menu_bg.gif) repeat-x;height:73px;width:960px;margin:0 auto;position:relative;}
#menu ul{padding:0 16px;clear:both;}
/*导航*/
#nav li{float:left;height:35px;}
#nav li.line{background:url(yun_qi_img/menu_line.gif) no-repeat center top;width:8px;}
#nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(yun_qi_img/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}
#nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(yun_qi_img/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#ffffff;text-decoration:none;}
#nav li a.on{background-position:left 100%;}
#nav li a.on span{background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}
/*二级*/
#con li{display:none;}
#con li.on,#con li#con0{display:block;}
#con a{float:left;height:22px;margin-top:8px;margin-right:10px;display:block;float:left;background:url(yun_qi_img/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}
#con a span{float:left;padding:6px 10px 4px 6px;line-height:12px;background:url(yun_qi_img/menu_on_right2.gif) no-repeat right top;}
#con a:hover{text-decoration:none;background:url(yun_qi_img/menu_on_left2.gif) no-repeat left bottom;}
#con a:hover span{background:url(yun_qi_img/menu_on_right2.gif) no-repeat right bottom;}
</style>
<script language="javascript">
function sliding(num){
for(var id = 0;id<=3;id++)
{
if(id==num)
{
document.getElementById("con"+id).style.display="block";
document.getElementById("nav"+id).className="on";
}
else
{
document.getElementById("con"+id).style.display="none";
document.getElementById("nav"+id).className="";
}
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="menu">
<ul id="nav">
<li><a id="nav0" class="on" href="#" onmouseover="javascript:sliding(0)"><span>Index</span></a></li><li class="line"></li>
<li><a id="nav1" href="#" onmouseover="javascript:sliding(1)"><span>HTML/CSS</span></a></li><li class="line"></li>
<li><a id="nav2" href="#" onmouseover="javascript:sliding(2)"><span>JavaScript</span></a></li><li class="line"></li>
<li class="bgnone"><a id="nav3" href="#" onmouseover="javascript:sliding(3)"><span>SEO</span></a></li>
</ul>
<ul id="con">
<li id="con0"><a href="#"><span>Index</span></a><a href="#"><span>News</span></a><a href="#"><span>UI Design</span></a></li>
<li id="con1"><a href="#"><span>HTML</span></a><a href="#"><span>CSS</span></a></li>
<li id="con2"><a href="#"><span>JavaScript</span></a><a href="#"><span>jQuery</span></a><a href="#"><span>Ajax</span></a></li>
<li id="con3"><a href="#"><span>SEO</span></a></li>
</ul>
<div id="menu_l"></div>
<div id="menu_r"></div>
</div>
</body>
</html>
提示：您可以先修改部分代码再运行