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


Posted in Javascript onSeptember 10, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<title>仿淘宝网左侧的商品分类菜单代码</title> 
</head>
<body>
<style>
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;}
</style>
<div class="wrapper">
<div class='sub-col'>
<div class="category">
   <h3>所有商品分类</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_popCategory" class="pop-category hidden">
    <div class='sub-item' style='display:none;'>潮流服饰</div>
    <div class='sub-item' style='display:none;'>精品鞋包</div>
    <div class='sub-item' style='display:none;'>美容护肤</div>
    <div class='sub-item' style='display:none;'>珠宝饰品</div>
    <div class='sub-item' style='display:none;'>运动户外</div>
    <div class='sub-item' style='display:none;'>手机数码</div>
    <div class='sub-item' style='display:none;'>居家生活</div>
    <div class='sub-item' style='display:none;'>家电家装</div>
    <div class='sub-item' style='display:none;'>母婴用品</div>
    <div class='sub-item' style='display:none;'>食品保健</div>
   </div>
  </div>
 </div>
 </div>
 <script type="text/javascript">
//get element's id with '$(id)' method
function $(){
 var elements = new Array();
 for (var i = 0; i < arguments.length; i++) {
 var element = arguments[i];
 if (typeof element == 'string') 
  element = document.getElementById(element);
 if (arguments.length == 1) 
  return element;
 elements.push(element);
 }
 return elements;
}
//get ele's className
function getElementsByClassName(className, tagName){
 var ele = [], all = document.getElementsByTagName(tagName || '*');
 for (var i = 0; i < all.length; i++) {
 if (all[i].className == className) {
  ele[ele.length] = all[i];
 }
 }
 return ele;
}
</script>
 <script type='text/javascript'>
 var category=$('J_category'),popCategory=$('J_popCategory'),
 cateLi=category.getElementsByTagName('li'),subItems=getElementsByClassName('sub-item','div');
 category.onmouseover=function(){
  popCategory.style.display='block';
 };
 category.onmouseout=function(){
  popCategory.style.display='none';
 };
 for(var i=0; i<cateLi.length; i++){
  cateLi[i].index=i;
  cateLi[i].onmouseover=function(){
   for(var j=0; j<subItems.length; j++){
    subItems[j].style.display='none';
   }
   subItems[this.index].style.display='block';
  };
 }
 </script>
</body>
</html>

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

Javascript 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
js面向对象的写法
Feb 19 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 #Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 #Javascript
js实现的动画导航菜单效果代码
Sep 10 #Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 #Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 #Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 #Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 #Javascript
You might like
php流量统计功能的实现代码
2012/09/29 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
javascript的BOM
2016/05/03 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python实现端口复用实例代码
2014/07/03 Python
Python实现在线音乐播放器
2017/03/03 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python模糊图片过滤的方法
2018/12/14 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
在keras中实现查看其训练loss值
2020/06/16 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
毕业生找工作推荐信
2013/11/21 职场文书
创业大赛策划书
2014/03/01 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
党员公开承诺书2016
2016/03/24 职场文书