本文通过实例介绍了用JS CSS实现简易推拉门的方法。分享给大家参考。具体如下：

这是一个超级简单的推拉门菜单。当你把鼠标放在主菜单上，内容会改变。其实这个演示就是一个例子。从代码中的注释可以感受到，每一步都有注释，这对于学习JavaScript和CSS都是有帮助的，也为你以后写出更加美观实用的推拉门铺平了道路。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题滑动门测试/title style # tab _ container 1 { width :310 px；向左文本对齐：border:1px固体# ccccccbackground : URL()-repeat-x top；}.cls _ tab _ nav { height:24px飞越：隐藏；font-size :12 px背景： URL()-重复-x底部；填充-左侧：10 px}.cls _ tab _ nav ul { font-size :9 pt；余量：0划水：0;}.cls _ tab _ nav _ Li {后台： URL()-no-repeat-70px 0；宽度：70 px高度：24px线高：24 pxfloat : leftisplay : inline飞越：隐藏；文本对齐：居中；光标：指针指针；}.cls _ tab _ nav _ Li _ first { font-weight : bold er；背景-位置：0 px 0px}.cls _选项卡_导航阿利{ text-摆设：无；color : # 000000 font-size :12 px；}.cls _ tab _ body {边框-顶部：无；最小高度：175 pxpadd :10 px x8 :175 px }。cls _ div { display : none font-size :14 px；}.cls _ tab _ nav _ Li _ first a { color : # c 80000；}/style/head body div id=' tab _ container 1 ' div class=' cls _ tab _ nav ' ul Li class=' cls _ tab _ nav _ Li cls _ tab _ nav _ Li _ first ' a href=' # '百货大楼/a/Li Li class=' cls _ tab _ nav _ Li ' a href=' # '八方购物/a/Li Li class=' cls _ tab _ nav _ Li ' a href=' # '商场三/a/Li/ul/div class=' cls _ tab _ body ' div class=' cls _ div ' style=' display : block； ' 百货大楼div class=' cls _ div '八方购物div class=' cls _ div '商场三/div /div/div/body /html脚本类型=' text/JavaScript '尝试{ document。exec命令(' background imagecache '，false，true)；} catch(e){ } function $(element){ if(引数。length 1){ for(var I=0，elements=[]，length=arguments.lengthilengthI)元素。push($(参数[I])；返回元素；} if(元素类型=='string ')返回文件。getelementbyid(元素)；否则返回元素；} var Class={ create : function(){ return function(){ this。初始化。应用(这个，参数)；} } } Object.extend=函数(目标，源){ for(源中的定义变量属性){目标[属性]=源[属性]；}返回目的地；} var选项卡菜单=class。create()；选项卡菜单。prototype={ initialize : function(container，selfOpt，other opt){ this。container=$(容器)；var self options=对象。extend({ font weight : ' bold '，fontSize:'12px '，color:'#FFBC44'}，self opt | | { })；var其他选项=对象。extend({ font weight : ' normal '，fontSize:'12px '，color:'#666'}，other opt | | { })；//用为循环得到objs数组，主要是为了兼容非工业管理学(工业工程)浏览器把空白也当作子对象for(var i=0，length=this。集装箱。子节点。长度，objs=[]；iLengtti){ if(this。集装箱。子节点.nodeType==1)objs。推(这个。集装箱。子节点[I])；} var tabArray=objs[0].getElementsByTagName(' Li ')；//用为循环得到divArray数组，主要是为了兼容非工业管理学(工业工程)浏览器把空白也当作子对象var divArray=new Array()；for(i=0，length=objs[1]。子节点。长度；ileng tti){ if(objs[1]).儿童节点.nodeType==1)Divarray。推动(物体[1]).子节点[I])；} for(i=0，length=Tabarray . lengtilengti){ Tabarray[I].长度=长度；塔巴雷[我]。索引=我；塔巴雷[我]。onmouseover=function(){ //其它选项卡样式设置for(var j=0；JT这个。长度；j){ tabArray[j]。风格。背景位置='-' tabArray[j].偏移量“px 0”；用于(自我选项中的定义变量属性){ tabArray[j]。第一个孩子。style[property]=其他选项[property]；} } //当前选项卡样式这个。风格。背景位置=' 0 0 '；用于(自我选项中的定义变量属性){这个。第一个孩子。style[property]=self options[property]；} //隐藏其它选项卡for(j=0；JT这个。长度；j){ Divarray[j]。风格。显示='无'；} //显示当前选项卡divArray[this.index].style[' display ']=' block '；} } } } var tab 1=新tab菜单(' tab _ container 1 '，{fontSize:'12px '，color:'#c80000 '，fontWeight: ' bolder ' }，{fontWeight:'normal '，color : ' # 000000 ' })；/script希望本文所述对大家的Java脚本语言程序设计有所帮助。