原生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使用prototype定义对象类型(转)[
Dec 22 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 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
NOT NULL 和NULL
2007/01/15 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
python数据结构之图的实现方法
2015/07/08 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
女大学生自我鉴定
2013/12/09 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
公司市场部岗位职责
2015/04/15 职场文书
高中同学会致辞
2015/08/01 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python