本文讲述了一个原生JS实现模仿淘宝左侧商品分类菜单效果代码的例子。分享给大家参考。具体如下：

这是一个用原生JS实现的淘宝左侧的产品分类菜单效果代码，用JavaScript技术实现，兼容所有主流浏览器。自己修改CSS菜单，会变得更漂亮。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-f-淘宝-pro-menu-style-codes/

具体代码如下：

！DOCTYPE htmlheadtitle仿淘宝网左侧的商品分类菜单代码/title/header dystylehtml { color : # 000；背景：#FFF}body，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，code，form，fieldset，legend，input，button，textarea，select，p，blockquote，th，td { margin:0padding:0 }表{边框-塌陷：塌陷；border-spacing:0}fieldset，img{border:0}address，button，caption，cite，code，dfn，em，input，optgroup，option，select，strong，textarea，th，var{font:inherit}del，ins { text-decision : none } Li { list-style 3: none } caption，th { text-align 3360 left } h1，h2，h3，h4，h5，h6 { font-size }缩写，缩写{ border :0 font-variant : normal } sup {垂直对齐：基线} sub {垂直对齐：基线}图例{color:#000} .隐藏{ display:none}。子列{ position:relativez指数：999;}.类别{ width:230pxborder:1px实心# 8A0E00}.h3类高度：30像素线高：30 px文本-缩进：15像素；背景技术# A91319color: # fff}。ul li类高度：30像素线高：30 px文本-缩进：35像素；背景：#FFF8F6网址(箭头-r . png)no-重复205 px中心；边框-底部：1px实心# EcceBorder-top :1 px实心# fffcursor:pointer指针指针；color: # A71F37}。保险商实验所类别李：悬停{底色： # 8a0e 00color: # fff}。流行音乐类别{border:2px实心# 8A0E00背景# FDF5F5位置：绝对；左侧：200pxtop:40pxz指数：1000;}.流行类别。分项{宽度：390像素高度：350 px}/style div class=' wrapper ' div class=' sub col ' div class=' category ' H3所有商品分类/ul id=' J _ category ' class=' item ' Li潮流服饰/li li精品鞋包/li li美容护肤/li li珠宝饰品/li li运动户外/li li手机数码/li li居家生活/li li家电家装/li li母婴用品/li li食品保健/Li/ul div id=' J _ pop category ' class=' pop-category hidden ' div class=' sub item ' style=' display : none；'潮流服饰/div class=' sub item ' style=' display : none；'精品鞋包/div class=' sub item ' style=' display : none；'美容护肤/div class=' sub item ' style=' display : none；'珠宝饰品/div class=' sub item ' style=' display : none；'运动户外/div class=' sub item ' style=' display : none；'手机数码/div class=' sub item ' style=' display : none；'居家生活/div class=' sub item ' style=' display : none；'家电家装/div class=' sub item ' style=' display : none；'母婴用品/div class=' sub item ' style=' display : none；'食品保健/div /div /div /div脚本类型=' text/JavaScript '/get元素的编号为$(id)'方法函数$(){ var elements=new Array()；for(var I=0；一、论点。长度；I){ var element=arguments[I]；if(元素类型==' string ')元素=文档。getelementbyid(元素)；if(自变量. length==1)返回元素；elements.push(元素);}返回元素；}//获取ele的类名函数getelementsbyclasname(类名，标记名){ var ele=[]，all=document。getelementsbytagname(标记名| | ' *)；for(var I=0；一、全部长度；I){ if(all[I]} .CLaSS name==CLaSS name){ ele[ele。长度]=全部[I]；} }返回ele }/脚本脚本类型=' text/JavaScript ' var category=$(' J _ category ')，popCategory=$('J_popCategory ')，cateLi=category。getelementsbytagname(' Li ')，子项=getelementsbyclasname('子项'，' div ')；类别。onmouseover=function(){ pop category。风格。display=' block};类别。onmouseout=function(){ pop category。风格。显示='无'；};for(var I=0；icateLi.lengthi ){ cateLi[i].索引=我；卡特利[我]。onmouseover=function(){ for(var j=0；jsubitems . length j){ 0子项[j]。风格。显示='无'；}子项[这个。索引]。风格。display=' block};}/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。