本文实例讲述了JavaScript CSS实现仿天猫侧边网页菜单效果。分享给大家供大家参考。具体如下：

这是一款自己写的仿天猫的菜单效果，二级分类的功能已经实现，但没有美化，留着用的朋友自己完善吧，JS功能已经实现，鼠标移在主分类上，二级分类向右伸出展开，目前淘宝网、天猫购物、京东都在用的导航菜单特效，测试时候请先点击一下菜单，主菜单就显示出来了。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-CSS-FTA mil-web-菜单-样式-代码/

具体代码如下：

！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；charset=utf-8' /title仿天猫侧边网页菜单/title style type=' text/CSS ' * { margin :0；划水：0;}正文{ font-size :14 px字体系列： '宋体；}h1、h2、H3；字体粗细：正常；}李{列表式：无；} a { color: # 333文本装饰：无；} # nav { width :202 pxh three :35 px背景# C00余量margin:50px 0 0 20px} # nav h1 {左填充：17 px线高：35 pxcolor: # fff右边距：17 px} # box { width :200 pxborder :1 px实心# B00border-top :无；边距-左侧：20 pxdisplay : none } # subnav { width :200 px } # subnav .列表{宽度：200像素高度：30 px}#subnav .列表h2 {宽度：160px高度：30 px左填充左侧：30像素线高：30 px右边距：10 px}#subnav .列表a :悬停，#subnav .活动a : hover { color : # 900 font-weight : bold；}#subnav .活动{宽度：200像素高度：30 px边框-底部：1px实心# b00border-top:1px实心# b00位置：相对；}#subnav .活动h2 {宽度：170px高度：30 px左填充左侧：30像素线高：30 px背景# fff位置：绝对；左侧left:1pxtop:0z索引：4;}#subnav .list _ nav { width:500px飞越：隐藏；border:1px实心# b00位置：绝对；left :200 pxtop :-1px；z索引：3;display:none}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var OnAv=document。getelementbyid(' nav ')；var oBox=document。getelementbyid(' box ')；var oSubnav=文档。getelementbyid(' subnav ')；var AlI=Osubnav。GetElementsBytagname(' Li ')；var I=0；奥纳夫。onclick=function(){ if(obox。风格。display==' block '){ obox。风格。显示='无'；} else { ObOx。风格。display=' block} } for(I=0；iaLi.lengthi ) { if(aLi[i]，'列表'){ aLi[i].onmousemove=function(){ for(I=0；iaLi.lengthI){ var ADIvlist=this。GetElementsBytagname(' div ')[0]；adivlist。风格。display=' blockthis . NAmE=' active } } AlI[I].onmouseout=function(){ for(I=0；iaLi.lengthI){ var ADIvlist=this。GetElementsBytagname(' div ')[0]；adiv列表。风格。显示='无'；this.className=' list } } } } }/script/head dydiv id=' nav ' h1所有商品分类/h1/div div id=' box ' ul id=' subnav ' Li class=' list ' h2a href=' # '服饰内衣、鞋靴运动/a/div=' list _ nav ' ul Li 1/Li Li 1/Li/ul/div/Li Li=' list ' h2a href=' # '电子商品/a/div=' list _ nav ' ul Li 222/Li Li 2222/Li Li 2222/Li Li 2222/Li/ul/div/Li Li=' list ' h2a href=' # '服饰内衣、鞋靴运动/a/div=' list _ nav ' ul Li 3333/Li Li 3333/Li Li 3333/Li/ul/div/Li Li=' list ' h2a href=' # '服饰内衣、鞋靴运动/a/分区=' list _ nav ' ul li1/Li li1/Li/ul/div/Li/ul/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。