jQuery简易左侧分类栏，仿国际版阿里巴巴。

来源：互联网发布：软件著作权与专利编辑：程序博客网时间：2024/06/04 17:46

为什么是简易版？

因为没有加入国际版阿里巴巴分类栏根据窗口大小调整位置的功能。

style.css

#sorts-list {position: absolute;width: 150px;border:1px solid #aaa;}#sorts-list .fore {height:40px;line-height:40px;background:#eee;}#sorts-list .fore a {text-decoration:none;color:#03c;padding-left: 20px;font-size:18px;font-weight:400;font-family:Tahoma;}#sorts-list .item {width: 150px;height: 30px;margin:0;padding:0;border: solid #eee;border-width:1px 0 0 0;}#sorts-list .item span {position:relative;top:4px;height:20px;display:block;width: 140px;background:#fff;}#sorts-list .item .background-img {width:8px;height:20px;float:right;margin-right:0px;background-image:url(images/other.png);background-repeat:no-repeat;background-attachment:scroll;}#sorts-list .item a {width: 150px;height: 20px;padding-left: 20px;line-height: 20px;text-decoration:none;color:#333;font-size:12px;font-family:Tahoma;}#sorts-list .item .sorts-subs {display:none;position: absolute;left: 140px;top: 0;width: 160px;border:solid #aaa;border-width:1px 1px 1px 1px;background:#fff;}#sorts-list .item .sorts-subs div {height: 20px;}#sorts-list .hover span {z-index:3;border:#aaa solid;border-width:1px 0 1px 1px;}#sorts-list .hover span a {color:#3a91e7;text-decoration:underline;}#sorts-list .hover .background-img {margin-right:5px;;}#sorts-list .hover .sorts-subs {z-index:2;}#sorts-list .hover .sorts-subs a:hover {color:#3a91e7;text-decoration:underline;}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><link rel=stylesheet href="style.css" type="text/css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script></head><body><div id="left-banner">    <div id="sorts-list"><div class="fore">    <a href="#">Categories</a></div>    <div class="item"><span><div class="background-img"></div><a href="#">Agriculture</a></span><div class="sorts-subs" style="top:45px"><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div></div>   </div>            <div class="item"><span><div class="background-img"></div><a href="#">Agriculture</a></span><div class="sorts-subs" style="top:76px"><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div></div>   </div>    <div class="item"><span><div class="background-img"></div><a href="#">Agriculture</a></span><div class="sorts-subs" style="top:107px"><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div></div>   </div>    <div class="item"><span><div class="background-img"></div><a href="#">Agriculture</a></span><div class="sorts-subs" style="top:138px"><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div></div>   </div>    <div class="item"><span><div class="background-img"></div><a href="#">Agriculture</a></span><div class="sorts-subs" style="top:169px"><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div></div>   </div>    <div class="item"><span><div class="background-img"></div><a href="#">Agriculture</a></span><div class="sorts-subs" style="top:200px"><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div></div>   </div>    <div class="item"><span><div class="background-img"></div><a href="#">Agriculture</a></span><div class="sorts-subs" style="top:231px"><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div><div><a href="#">Agriculture</a></div></div>   </div></div></div><script>$(document).ready(function() {$(".item span").hover(function() {$(this).next().css("display","block");$(this).parent().addClass("hover");},function() {$(this).next().css("display","none");$(this).parent().removeClass("hover");});$(".sorts-subs").hover(function() {$(this).css("display","block");$(this).parent().addClass("hover");},function() {$(this).css("display","none");$(this).parent().removeClass("hover");});});</script></body></html>