这是一个简单的仿淘宝滑动门效果代码，个人感觉真的挺不错，以前有过一款和这个差不多。在滑动门里你可以再次布局你的网页，可以做成一个功能超强大的导航，原示例是一个拼音索引程序，改成菜单也是可以的。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<!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=utf-8" /> <title>简单仿淘宝的一个不错的滑动门</title> <style type="text/css"> body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;} a{color:blue;} ul{margin:0;padding:0;list-style:none;} #navigation{height:26px;} #navigation li{float:left;} #navigation li.show .content{display:block;} #navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden} #navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;} #container{position:relative;width:800px;margin:50px;} #navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;} #navigation li .content ul li{margin-right:10px;float:none;display:inline;} #navigation li .content ul li a{border:none;} #navigation li .content ul li{width:120px;} #navigation li .content ul li h3{clear:both;text-align:left;} </style> </head> <body> <div> <ul> <li><span>整站导航：</span></li> <li> <a href="#">A</a> <div> <h3>百度有啊</h3> <ul> <li><a href="https://www.baidu.com">百度有啊</a></li> <li><a href="#">致富小康</a></li> </ul> <h3>脚本下载</h3> <ul> <li><a href="#">黄河泰山</a></li> <li><a href="#">池鱼之殃</a></li> <li><a href="#">百度有啊</a></li> </ul> </div> </li> <li> <a href="#">B</a> <div> <h3>网页特效</h3> <ul> <li><a href="https://www.jb51.net/jiaoben/">网页特效</a></li> <li><a href="https://www.baidu.com">百度搜索</a></li> <li><a href="https://mp3.baidu.com">百度MP3</a></li> </ul> <h3>精品代码</h3> <ul> <li><a href="#">代码索引</a></li> <li><a href="#">百度搜索</a></li> </ul> </div> </li> <li><a href="#">C</a><div>C</div></li> <li><a href="#">D</a><div>D</div></li> <li><a href="#">E</a><div>E</div></li> <li><a href="#">F</a><div>F</div></li> <li><a href="#">G</a><div>G</div></li> <li><a href="#">H</a><div>H</div></li> <li><a href="#">I</a><div>I</div></li> <li><a href="#">J</a><div>J</div></li> <li><a href="#">K</a><div>K</div></li> <li><a href="#">L</a><div>L</div></li> <li><a href="#">M</a><div>M</div></li> </ul> </div> </body> </html> <script type="text/javascript"> function showAjaxContent(){ var obj=document.getElementById("navigation"); var liObj=obj.getElementsByTagName("li"); var length=liObj.length; var currentLiObj; for(var i=0;i<length;i++){ currentLiObj=liObj[i]; if(currentLiObj.parentNode!=obj){continue;} //然后循环添加事件 currentLiObj.onmouseover=function(){ if(this.className.indexOf("show")<0){ this.className+=" show"; } clearStyle(this); } currentLiObj.onmouseout=function(){ this.className=this.className.replace("show",""); clearStyle(this); } } function clearStyle(obj){ for(var i=0;i<length;i++){ currentLiObj=liObj[i]; if(obj!=currentLiObj){ currentLiObj.className=currentLiObj.className.replace("show",""); } } } } showAjaxContent(); </script>