京东左侧商品分类菜单JS弹出式菜单资源-CSDN文库

共3个文件

js：2个

html：1个

弹出式菜单

5星 · 超过95%的资源需积分: 50 196 浏览量 2011-01-11 12:54:30 上传评论 4 收藏 18KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

京东左侧商品分类菜单JS弹出式菜单.rar （3个子文件）

京东左侧商品分类菜单JS弹出式菜单

jquery-1.2.6.pack.js 30KB

京东左侧商品菜单.html 4KB

categorys.js 1KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>京东商城-中国最大的电脑、手机、数码、家电、日用百货网上购物商城</TITLE> <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="categorys.js"></script> <SCRIPT defer type=text/javascript> $(function(){ showSubCategory(); }) </SCRIPT> <style> #AllSort { width:209px; padding-top:8px; position:relative; z-index:200; background:#F4F9FD; margin-bottom:6px; border:#468ebe 1px solid; border-top:none; font-size:12px; } #AllSort h3 { padding:3px 5px 0 9px; color:#025fa8; width:195px; height:22px; line-height:22px; } #AllSort h3 a:link,#AllSort h3 A:visited{ color:#025fa8;} #AllSort dl {overflow: hidden; width: 209px;} #AllSort dt { padding:3px 5px 0 9px; background:url(http://www.360buy.com/images/jo_item.gif) no-repeat 199px -140px; overflow:hidden; width:195px; cursor:pointer; height:24px; line-height:24px; } #AllSort dt span { display:block; padding-right:5px; float:right; overflow:hidden; width:140px; color:#999; height:21px; } * HTML #AllSort dt span {padding-right:4px;} #AllSort .Dis { display:block;} #AllSort .noDis {display:none;} #AllSort .curr { width:195px; height:19px; line-height:19px; padding-bottom:4px; border-top:#959595 1px solid; background:#FFF url(http://www.360buy.com/images/jo_line_bg.jpg) repeat-x 0px -478px; } #AllSort .curr span { display:none;} #AllSort dd { PADDING-RIGHT: 5px; PADDING-LEFT: 9px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; OVERFLOW: hidden; WIDTH: 195px; CURSOR: default; PADDING-TOP: 5px; } #AllSort dd span { background: url(http://www.360buy.com/images/jo_item.gif) no-repeat 0px -143px; display:block; padding-left:8px; width:82px; float:left; } #AllSort div span { background: url(http://www.360buy.com/images/jo_item.gif) no-repeat 0px -143px; display:block; padding-left:8px; width:82px; float:left; } .viewall { padding:6px 8px 0 8px; text-align:right; border:#e1e1e1 1px dotted; } .pop_wrap { background: url(http://www.360buy.com/images/shadow_04.gif) no-repeat left top; padding:0 3px 3px 0; margin-top:0; display:none; z-index:999; position:absolute; width:201px; left:190px; } .pop { background:#FFF url(http://www.360buy.com/images/jo_line1.gif) no-repeat 0px -780px; border:#959595 1px solid; border-left:0; padding:3px 10px; overflow:hidden; width:180px; line-height:24px; } </style> </HEAD> <BODY> <div id="AllSort"> <h3><a href="http://www.360buy.com/electronic.aspx">家用电器</a></h3> <dl id="EFF_dl_0"> <dt id="EFF_dt_00"><span> - 洗衣机  平板电视...</span><a href="#">大家电</a></dt> <dd class="noDis" id="EFF_dd_00"> <span><a href="#">洗衣机</a></span> <span><a href="#">平板电视</a></span> <span><a href="#">电热水器</a></span> <span><a href="#">家庭音响</a></span> <span><a href="#">燃气热水器</a></span> <span><a href="#">空调</a></span> <span><a href="#">冰箱</a></span> <span><a href="#">冷柜</a></span> <span><a href="#">DVD/USB播放器</a></span> <span><a href="#">电视附件</a></span></dd> <dt id="EFF_dt_01"><span> - 吸尘器  电熨斗...</span><a href="#">生活电器</a></dt> <dd class="noDis" id="EFF_dd_01"> <span><a href="#">吸尘器</a></span> <span><a href="#">电熨斗</a></span> <span><a href="#">饮水机</a></span> <span><a href="#">取暖电器</a></span> <span><a href="#">加湿器</a></span> <span><a href="#">净化器</a></span> <span><a href="#">电动工具</a></span></dd> </dl> <div class="viewall"><a target="_blank" href="special.aspx?id=5" class="link_1">全部商品>></a></div> </div> </BODY></HTML>

评论收藏

内容反馈

开心lulu

2014-03-11

效果不错，就是有点问题，需要修改
终极天眼

2011-11-25

不错的导航菜单，就是IE6 不兼容
yytc200

2011-12-16

单独使用的时候没有问题，但是加入其他东西的时候经常会出现二级菜单无法弹出，但总体还是不错的
yurongsheng

2011-11-09

JQuery写的不错，但有个bug，第二行不显示需要 newDiv.innerHTML = $("#EFF_dd_" + this.id.substr(7)).html();
普通网友

2014-07-29

用来学习不错