原生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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
js实现拖拽功能
Mar 01 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
微信小程序保存多张图片的实现方法
Mar 05 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
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP session会话的安全性分析
2011/09/08 PHP
详解php命令注入攻击
2019/04/06 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
PHP7 新增常量
2021/03/09 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
JS实现拼图游戏
2021/01/29 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
详解Python locals()的陷阱
2019/03/26 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
什么是岗位职责
2013/11/12 职场文书
房屋出售协议书
2014/04/10 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
《学棋》教后反思
2014/04/14 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
奖金申请报告模板
2015/05/15 职场文书
小学运动会通讯稿
2015/07/18 职场文书
学校教学管理制度
2015/08/06 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js