本文介绍了用js实现的早期推拉门菜单效果代码。分享给大家参考。具体如下：

这是早期推拉门菜单的传奇演示代码。测试时请将鼠标放在左侧相应的导航栏上。当你把它放在左侧菜单时，你会发现其中的奥秘，右侧的内容也会相应改变。JS和HTML相结合，实现更传统的导航效果。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/

具体代码如下：

HTMLHEADTITLE文字导航效果-滑动门/title MetA http-equiv=Content-Type Content=' text/html；charset=GB 2312 '/流浆池bgColor=# fef4d 9中心表边框color=# 993399边框=5边框灯='绿色' TBODY TR TD align=middle SCRIPT language=JAVAScript！-Beginva链接文本=new Array()链接文本[0]='表格边框=' 0 '宽度=' 210 '高度=' 185 ' bgcolor=' # EFFEF '单元格填充=' 8 '单元格间距=' 0 ' trtd valgn=' top '国内最常用的校友录站点/TD/tr/table '链接文本[1]='表格边框=' 0 '宽度=' 210 '高度=' 185 ' bgcolor=' # d1fd 80 '单元格填充=' 8 '单元格间距=' 0 ' trtd valgn=' top '国内最大的游戏网站-第九城市/TD/tr/table '链接文本[2]='表格边框=' 0 '宽度=' 210 '高度=' 185 ' bgcolor=' # FDB9FD '单元格填充=' 8 '单元格间距=' 0 ' trtd valgn=' top '国内最大的新闻发布类站点-新浪网/TD/tr/table '链接文本[3]='表格边框=' 0 '宽度=' 210 '高度=' 185 ' bgcolor=' # FFFF5E '单元格填充=' 8 '单元格间距=' 0 ' trtd valgn=' top '国内最大的综合性娱乐站点-网易/TD/tr/table ' link text[4]=' table border=' 0 ' width=' 210 ' height=' 185 ' bgcolor=' # C2D7FC '单元格填充=' 8 '单元格间距=' 0 ' trtd valgn=' top '最大的搜索引擎站点.百度/TD/tr/table ' var ns6=文档。getelementbyid！文件。所有var ie=文档。所有函数show _ text(thetext，what div){ if(ie)eval(' document。“全部，”什么部门).innerHTML=链接文本[thetext]else if(ns6)文档。getelementbyid(哪个div ).innerHTMl=链接文本[thetext]}函数重置（哪个div){if (ie) eval('document.all . '哪个div ).innerHTML='表格边框=' 0 '宽度=' 210 '高度=' 185 ' bgcolor=' # f 88530 '单元格填充=' 0 '单元格间距=' 8 ' trtd valign=' top ' font face=' arial ' size=' 4 '请把鼠标放到左侧相应的导航栏目上p有所变化/font/TD/tr/table ' else if(ns6)文档。getelementbyid(哪个div ).innerHTML='表格边框=' 0 '宽度=' 210 '高度=' 185 ' bgcolor=' # f 88530 '单元格填充=' 8 '单元格间距=' 0 ' trtd valign=' top ' font face=' arial ' size=' 4 '请把鼠标放到左侧相应的导航栏目上p看到变化效果了吗？/font/TD/TR/TABLE ' }//End-/SCRIPT TABLE单元格间距=0单元格填充=3宽度=370对齐=中心bgColor=黑色边框=0 TBODY TR TD表单元格间距=0单元格填充=0宽度=370背景=' '边框=0车身TR TD表单元格间距=0单元格填充=8宽度=160 bgColor=#f88530边框=0 TBODY TR TD onMouseOver=' bgColor=' # efefefefef '；show_text(0，' div 1 ')' style=' cursor : hand ' onclick=' window。位置=' http://www。中国人。com ' ' onmouseout=' bgColor=' # f 88530 '；复位(“div1”)中国人/TD/TR/TR TD onMouseOver=' bgColor=' # d1fd 80 '；show_text(1，' div 1 ')' style=' cursor : hand ' onclick=' window。位置=' http://www。九号。com ' ' onmouseout=' bgColor=' # f 88530 '；复位(“div1”)第九城市/TD/TR/TR TD onMouseOver=' bgColor=' # FDB9FD '；show_text(2，' div 1 ')' style=' cursor : hand ' onclick=' window。位置=' http://www。新浪。com。cn ' ' onmouseout=' bgColor=' # f 88530 '；复位(“div1”)新浪网/TD/TR/TR TD onMouseOver=' bgColor=' # FFFF5E '；show_text(3，' div 1 ')' style=' cursor : hand ' onclick=' window。位置=' http://www。163 .com ' ' onmouseout=' bgColor=' # f 88530 '；复位(“div1”)网易/TD/TR/TR TD onMouseOver=' bgColor=' # C2D7FC '；show_text(4，' div 1 ')' style=' cursor : hand ' onclick=' window。位置=' http://www。百度。com ' ' onmouseout=' bgColor=' # f 88530 '；复位(“div1”)百度一下/TD/TR/TBODY/TABLE/TD TDSPAN id=div 1 TABLE高度=185单元格间距=0单元格填充=8宽度=210 bgColor=#f88530边框=0 TBODY TR TD vAlign=TopFont face=arial size=4B请把鼠标放到左侧相应的导航栏目上P有所变化/P/B/FONT/TD/TR/TBODY/TABLE/SPAN/TD/TR/TBODY/TABLE/TD/TR/TBODY/TABLE/TD/TR/TBODY/TABLE/CENTER/BODY/HTML希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。