提示：您可以先修改部分代碼再運行
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>經典的滑動門導覽功能表(一)</title><br /><meta http-equiv="content-type" content="text/html;charset=gb2312"><br /><!--把下面代碼加到<head>與</head>之間--><br /><style type="text/css"><br />/*<br /> * author raceman<br /> * website www.daqianduan.com<br /> * time 2010.05.05<br /> * modify 2010.05.11<br /> * color #444 #0064B1 #ff6700<br />*/<br />body{font-size:12px;color:#444;font-family:Arial,Verdana,Helvetica,sans-serif;word-break:break-all;}<br />ul,li{padding:0;margin:0;}<br />li{list-style:none;}<br />a{color:#0064B1;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}<br />a:hover{color:#ff6700;text-decoration:underline;}<br />#menu_l,#menu_r{width:4px;height:73px;overflow:hidden;position:absolute;top:0;}<br />#menu_l{background:url(yun_qi_img/menu_left.gif) no-repeat;left:-4px;}<br />#menu_r{background:url(yun_qi_img/menu_right.gif) no-repeat;right:-4px;}<br />#menu{background:url(yun_qi_img/menu_bg.gif) repeat-x;height:73px;width:960px;margin:0 auto;position:relative;}<br />#menu ul{padding:0 16px;clear:both;}<br />/*導航*/<br />#nav li{float:left;height:35px;}<br />#nav li.line{background:url(yun_qi_img/menu_line.gif) no-repeat center top;width:8px;}<br />#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;}<br />#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;}<br />#nav li a.on{background-position:left 100%;}<br />#nav li a.on span{background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}<br />/*二級*/<br />#con li{display:none;}<br />#con li.on,#con li#con0{display:block;}<br />#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;}<br />#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;}<br />#con a:hover{text-decoration:none;background:url(yun_qi_img/menu_on_left2.gif) no-repeat left bottom;}<br />#con a:hover span{background:url(yun_qi_img/menu_on_right2.gif) no-repeat right bottom;}<br /></style><br /><script language="javascript"></p><blockquote>function sliding(num){<br /> for(var id = 0;id<=3;id++)<br /> {<br /> if(id==num)<br /> {<br /> document.getElementById("con"+id).style.display="block";<br /> document.getElementById("nav"+id).className="on";<br /> }<br /> else<br /> {<br /> document.getElementById("con"+id).style.display="none";<br /> document.getElementById("nav"+id).className="";<br /> }<br /> }<br />}<br /></blockquote><p></script> <br /></head><br /><body><br /><!--把下面代碼加到<body>與</body>之間--><br /><div id="menu"><br /> <ul id="nav"><br /> <li><a id="nav0" class="on" href="#" onmouseover="javascript:sliding(0)"><span>Index</span></a></li><li class="line"></li><br /> <li><a id="nav1" href="#" onmouseover="javascript:sliding(1)"><span>HTML/CSS</span></a></li><li class="line"></li><br /> <li><a id="nav2" href="#" onmouseover="javascript:sliding(2)"><span>JavaScript</span></a></li><li class="line"></li><br /> <li class="bgnone"><a id="nav3" href="#" onmouseover="javascript:sliding(3)"><span>SEO</span></a></li><br /> </ul><br /> <ul id="con"><br /> <li id="con0"><a href="#"><span>Index</span></a><a href="#"><span>News</span></a><a href="#"><span>UI Design</span></a></li><br /> <li id="con1"><a href="#"><span>HTML</span></a><a href="#"><span>CSS</span></a></li><br /> <li id="con2"><a href="#"><span>JavaScript</span></a><a href="#"><span>jQuery</span></a><a href="#"><span>Ajax</span></a></li><br /> <li id="con3"><a href="#"><span>SEO</span></a></li><br /> </ul><br /> <div id="menu_l"></div><br /> <div id="menu_r"></div><br /></div><br /></body><br /></html></p>
提示：您可以先修改部分代碼再運行
