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

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • PHP无限分类代码，支持数组格式化、直接输出菜单两种方式

    复制代码 代码如下: <?php /** +------------------------------------------------ * 通用的树型类 +------------------------------------------------ * @author yangyunzhou@foxmail.com +------------------------------------------------ * @date 2010年11月23日10:09:31 +-------

  • 仿当当网淘宝网等主流电子商务网站商品分类导航菜单

    仿当当网淘宝网等主流电子商务网站商品分类导航菜单

    本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在CSS的编写上,并没有用到太多的JS. 下面只介少几处关键点,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中. (1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的div, 这个div向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口. (2) 在图片中标号2处如何实现每个连接不会中间换行? 可以把

  • iOS实现顶部标签式导航栏及下拉分类菜单

    iOS实现顶部标签式导航栏及下拉分类菜单

    本文实例为大家分享了iOS实现顶部标签式导航栏及下拉分类菜单的全部过程,供大家参考,具体内容如下 当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果

  • jQuery模仿京东/天猫商品左侧分类导航菜单效果

    jQuery模仿京东/天猫商品左侧分类导航菜单效果

    现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

  • winform树形菜单无限级分类实例

    winform树形菜单无限级分类实例

    以下实现的是一个树形菜单,每一级对应一类窗口,点击叶子节点时弹出新的窗口: 用递归和委托实现的. 第一部分功能-创建树形菜单 复制代码 代码如下: /// <summary>         /// 创建树形菜单         /// </summary>         public void AddTree(int ParentID, TreeNode pNode)         {             // 数据库名字字段             string str

  • Android PopupWindow实现右侧、左侧和底部弹出菜单

    Android PopupWindow实现右侧、左侧和底部弹出菜单

    本教程为大家分享了Android PopupWindow弹出菜单的具体代码,供大家参考,具体内容如下 项目代码:http://xiazai.jb51.net/201611/yuanma/PopupLeftMenu(jb51.net).rar 项目SDK是5.1,建议将代码拷到自己的工程中去 代码如下: MainActivity类: package com.example.popupleftmenu; import android.app.Activity; import android.cont

  • 解决yii2左侧菜单子级无法高亮问题的方法

    我们先来看看具体问题. 添加角色是属于角色这个菜单的,如何在执行添加角色这个操作时让角色这个菜单处于选中状态呢? adminlte左侧导航的Create,View等action不能定位到index的模块(左侧二级导航不能展开定位) 如果你是按照我们上文的教程来的,那接下来所要说明的问题应该不是问题,先来看看我们当时是怎么处理左侧菜单menu的 use mdm\admin\components\MenuHelper; <?php $callback = function($menu){ //鉴于篇

  • javascript仿京东导航左侧分类导航下拉菜单效果

    javascript仿京东导航左侧分类导航下拉菜单效果

    本文实例为大家分享了类似于京东.淘宝商城左侧分类导航下拉菜单,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <

  • 最常见的左侧分类菜单栏jQuery实现代码

    最常见的左侧分类菜单栏jQuery实现代码

    打开京东.淘宝等各大类网站,最常见的就是左侧分类菜单栏了,既然这么常见的功能,那么应该怎么去实现它呢,接下来,我会在js中介绍两种实现方式,一种是引入jQuery的实现方式,一种是不引入jQuery的原生js的实现方式~~ 先看效果: 一.先准备资料 1)如果你们是用jQuery来开发网站的,肯定先要准备jQuery.js呀,这个百度一搜就有.不用jQuery开发的,可以忽略此步骤 2)准备一些图片,鼠标右键 > 图片另存为就可以保存 icon_nav.jpg: img_226x40.jpg:

随机推荐