本文实例讲述了JS CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下：

这是一个简洁实用的CSS JavaScript滑动门导航菜单，写时候，我尽量用最少的代码写出兼容性好的代码，希望这款滑动门大家能够喜欢，也希望研究射流研究…的达人一同切磋，共同提高。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/

具体代码如下：

htmlheadtitle简易实用，滑动门/title meta http-equiv=' Content-Type ' Content=' text/html；charset=gbk '/style type=' text/CSS ' * { margin :0；划水：0;}a:link，a :访问过{ text-decoration : none} a :悬停{ text-decoration : none} ul { list-style :无；}.子菜单{ background : # 333 float 3360 leftadd-top :2 px；宽度：100%;}.子菜单li { float:left}。阿利子菜单{ display : blockfloat : leftcolor : # fffh three :25 px线高：25 pxpadding:0 5px边距-左侧：2 px}.子菜单thistyle a { background : # fffcolor : # 000 }。subContent { clear : both border :2 px固体# 000;边框-top :无；背景# fff}。subContent ul { display : none padd :15 px线高：180%;}/STYLe/head body ul class=' Subscription ' Li class=' thistYLe ' a href=' JAVAScript : void(0)'目录/a/Li lia href=" JAVAScript : void(0)"列表/a/Li lia href=" JAVAScript : void(0)"产品/a/Li lia href=" JAVAScript : void(0)"新网/a/Li/ul div class=' subContent ' ul style=' display : block；lia href=' # ' 111111/a/Li lia href=' # ' 111111/a/Li lia href=' # ' 111111/a/Li lia href=' # ' 111111/a/Li/ul lia href=' # ' 222222/a/Li lia href=' # ' 222222/a/Li lia href=' # ' 222222/a/Li lia href='选择。长度；s ){ if(元素).class name==name){ 0返回元素[s]；} } }//选项卡效果var tabList=$ _ class(' Subscription ').getElementsByTagName(' Li ')tabCon=$ _ class(' subContent ').getElementsByTagName(' ul ')；for(I=0；itablist . lengthi){(function(){ var t=I；列表.onmouseover=function(){ for(o=0；otabCon.lengtho){ tabCon[o]。风格。显示='无'；列表.className=if(t==o){ this。类名=' thistyletabCon[o]。风格。display=' block} } } }))))}/script/bdoy/html希望本文所述对大家的Java脚本语言程序设计有所帮助。