原生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 相关文章推荐
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
如何通过JS实现日历简单算法
Oct 14 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和ACCESS写聊天室(七)
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
详解django中使用定时任务的方法
2018/09/27 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
经典c++面试题五
2014/12/17 面试题
行政文员岗位职责
2013/11/08 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Java 在生活中的 10 大应用
2021/11/02 Java/Android
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS