幽灵资源网 Design By www.bzswh.com
本文实例讲述了原生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程序设计有所帮助。
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。