原生JS实现仿淘宝网左侧商品分类菜单效果代码

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

这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码，Javascript技术实现，兼容各主流浏览器。自己再修改一下CSS菜单，它会变得更漂亮。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/

具体代码如下：

 



html{color:#000;background:#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:0;padding:0}table{border-collapse:collapse;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-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
 .hidden{display:none;}
.sub-col{position:relative;z-index:999;}
.category{width:230px;border:1px solid #8A0E00;}
.category h3 {height:30px;line-height:30px;text-indent:15px;background:#A91319;color:#fff;}
.category ul li{height:30px;line-height:30px;text-indent:35px;background:#FFF8F6 url(arrow-r.png) no-repeat 205px center;border-bottom:1px solid #ECECEC;border-top:1px solid #fff;cursor:pointer;color:#A71F37;} 
.category ul li:hover{background-color:#8A0E00;color:#fff;}
.pop-category{border:2px solid #8A0E00;background:#FDF5F5;position:absolute;left:200px;top:40px;z-index:1000;}
.pop-category .sub-item{width:390px;height:350px;}




   所有商品分类
   

    
潮流服饰
    
精品鞋包
    
美容护肤
    
珠宝饰品
    
运动户外
    
手机数码
    
居家生活
    
家电家装
    
母婴用品
    
食品保健
   
   
    潮流服饰
    精品鞋包
    美容护肤
    珠宝饰品
    运动户外
    手机数码
    居家生活
    家电家装
    母婴用品
    食品保健
   
  
 
 
 
 

希望本文所述对大家的Javascript程序设计有所帮助。