本文通过一个实例说明了用JS CSS实现滑动切换标签菜单的效果。分享给大家参考。具体如下：

这是一个风格简单的JS CSS推拉门特效代码。当鼠标滑过菜单时，二级菜单自动切换，鼠标无需点击。推拉门效果是一种流行的网页菜单效果，在网上经常可以看到。这个菜单已经通过了火狐、IE8、Chrome下的测试，代码兼容性还可以。自己用，美化风格。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-CSS-move-cha-tab-menu-style-codes/

具体代码如下：

！doctype html html xmlns=' http://www。w3。org/1999/XHTML ' xmlns : xlink=' http://www .w3。org/1999/xlink ' lang=' zh _ CN ' XML : lang=' zh _ CN ' hearta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '脚本类型=' text/JavaScript ' var $=函数(a，b){ var ID=document。getelementbyid(a)；var OBJ=(b)？身份证。getelementsbytagname(b): id；返回OBJ } var n=0；var tab=function(MENU，BOdy){ var l=MENU。长度；for(var I=0；il；i ){ MENU[i].onmouseover=function(a){ return function(){ MENU[n]).类名=' label ' BOdy[n]。风格。显示='无'；菜单[a].标签标签-选定的；BOdy[a]。风格。display=' blockn=a；} }(一)；} }/脚本样式正文{ font-family : '微软雅黑，' SimSun '，'宋体，' Arial狭义；} #页眉，#主，#页脚{宽度： 1050像素背景# F1F9D9margin: 5px汽车；} # header { height : 50px } # main { height : auto } #页脚{ height : 50px } # menu { height : 36pxpadding : 2px 0 0 } Li { list-style : none；光标：指针；}.类别{ margin : 0；高度： 35pxborder-底部： 1px实心# b5e2f3文本对齐：中心；}.标签{border: 1px固体# b5e 2 F3；向左浮动：宽度： 100像素；高度： 25pxmargin: 0 3px背景# f1 Fe F3 padd : 9px 0 0 0 outline : 0；-moz-border-radius : 5px 5px 0 0；}.标签选择{背景： # FFF；边框-底部： 1px实心# FFF；} #链接内容{ margin-top :-1；高度： 600像素；padding: 10pxborder: 1px实心# b5e2f 3 border-top : 0；背景： # FFF；}.链接{左侧浮动：宽度： 180像素；显示器：块；边距： 10px 0；}/style title my link/title/head body div id=' container ' div id=' header '/div div id=' main ' div id=' menu ' ul class=' category ' Li class=' label label-selected '在线学习/li li class='标签'运动休闲/li li class='标签'编程社区/li li class='标签'文化娱乐/li li class='标签'休息项目/li li class='标签'人际往来/Li/ul/div div id=' link content ' div class=' category-1 ' style=' display : block；'ul li class='link'spanhtml学习/span/li li class='link'span编译原理/span/li li class='link'span人工智能/span/li li class='link'span算法设计/span/Li/ul/div class=' category-2 ' style=' display : none；'ul li class='link'span开车/span/li li class='link'span郊游/span/li li class='link'span音乐/span/Li/ul/div class=' category-2 ' style=' display : none；ul Li class=' link ' SPan MSdn/SPan/Li Li class=' link ' SPan编译原理/span/li li class='link'span科幻电影/span/li li class='link'span技术文档/span/Li/ul/div class=' category-2 ' style=' display : none；ul li class='link'spanjava学习/span/li li class='link'spanhtml学习/span/li li class='link'span编译原理/span/li li class='link'span人工智能/span/li li class='link'span算法设计/span/Li/ul/div class=' category-2 ' style=' display : none；'ul li class='link'spanhtml学习/span/li li class='link'span编译原理/span/li li class='link'span人工智能/span/Li/ul/div class=' category-2 ' style=' display : none；ul li class='link'spanjava学习/span/li li class='link'spanhtml学习/span/li li class='link'span算法设计/span/Li/ul/div/div/div id=' footer '/div/div脚本选项卡($('menu '，' Li ')，$('linksContent '，' div ')；/脚本/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。