纯CSS仿京东的商品分类导航条效果

  • 作者:不详
  • 来源:56gee
  • 更新时间:2011-08-24 22:04:13
  • 点击:7697
[0分]

以下代码是仿京东的商品分类导航条效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>纯CSS仿京东的商品分类导航条效果</title>  
<meta name="keywords" content="纯CSS仿京东的商品分类导航条效果 56gee" /> 
<style type="text/css">  
.my_left_category{  
width:150px;  
font-size:12px;  
font-family:arial,sans-serif;  
letter-spacing:2px;  
}  
.my_left_category h1{  
background-image:url(http://www.56gee.com/Upload/20110824/20110824222354.gif);  
height:20px;  
background-repeat:no-repeat;  
font-size:14px;  
font-weight:bold;  
padding-left:15px;  
padding-top:8px;  
margin:0px;  
color:#FFF;  
}  
.my_left_category .my_left_cat_list{  
width:148px;  
border-color:#b60134;  
border-style:solid;  
border-width:0px 1px 1px 1px;  
line-height:13.5pt;  
}  
.my_left_category .my_left_cat_list h2 {  
margin:0px;  
padding:3px 5px 0px 9px;  
}  
.my_left_category .my_left_cat_list h2 a {  
color:#d6290b;  
font-weight:bold;  
font-size:14px;  
line-height:22px;  
}  
.my_left_category .my_left_cat_list h2 a:hover {  
color:#d6290b;  
font-weight:bold;  
font-size:14px;  
line-height:22px;  
}  
.my_left_category .h2_cat{  
width:148px;  
height:26px;  
background-image:url(http://www.56gee.com/Upload/20110824/20110824222526.gif);  
background-repeat:no-repeat;  
line-height:26px;  
font-weight:normal;  
color:#333333;  
position:relative;  
}  
.my_left_category .h2_cat_1{  
width:148px;  
height:26px;  
background-image:url(http://www.56gee.com/Upload/20110824/20110824222530.gif);  
background-repeat:no-repeat;  
line-height:26px;  
font-weight:normal;  
color:#333333;  
position:relative;  
}  
.my_left_category a{  
font:12px;  
text-decoration:none;  
color:#333333;  
}  
.my_left_category a:hover{  
text-decoration:underline;  
color:#ff3333;  
}  
.my_left_category h3{  
margin:0px;  
padding:0px;  
height:26px;  
font-size:12px;  
font-weight:normal;  
display:block;  
padding-left:8px;  
}  
.my_left_category h3 span{color:#999999; width:145px; float:right;}  
.my_left_category h3 a{ line-height:26px;}  
.my_left_category .h3_cat{  
display:none;  
width:204px;  
position:absolute;  
left:123px;  
margin-top:-26px;  
cursor:auto;  
}  
.my_left_category .shadow{  
position:inherit;  
background:url(http://www.56gee.com/Upload/20110824/20110824222535.gif) left top;  
width:204px;  
}  
.my_left_category .shadow_border{  
position:inherit;  
width:200px;  
border:1px solid #959595; margin-top:1px;  
border-left-width:0px;  
background:url(http://www.56gee.com/Upload/20110824/20110824222546.gif) no-repeat 0px 21px;  
background-color:#ffffff;  
margin-bottom:3px  
}  
.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}  
.my_left_category .shadow_border ul li {  
list-style:none;  
padding-left:10px;  
background-image:url(http://www.56gee.com/Upload/20110824/20110824222549.gif);  
background-repeat:no-repeat;  
background-position:0px 8px;  
float:left;  
width:75px;  
height:26px;  
overflow:hidden;  
letter-spacing:0px;  
}  
.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}  
.my_left_category .active_cat h3 { font-weight:bold}  
.my_left_category .active_cat h3 span{ display:none;}  
.my_left_category .active_cat div{display:block;}  
</style>  
</head>  
<body>  
<div class="my_left_category">  
<h1>56gee导航</h1>  
<div class="my_left_cat_list">  
<div class="h2_cat" onmouseover="this.className=’h2_cat active_cat’" onmouseout="this.className=’h2_cat’">  
<h3><a href="#">酷站欣赏</a></h3>  
<div class="h3_cat">  
<div class="shadow">  
<div class="shadow_border">  
<ul>  
<li><a href="#">欧美酷站</a></li>  
<li><a href="#">日韩酷站</a></li>  
<li><a href="#">国内酷站</a></li>  
<li><a href="#">文化艺术</a></li>  
<li><a href="#">饮食酷站</a></li>  
<li><a href="#">婚庆摄影</a></li>  
<li><a href="#">旅游度假</a></li>  
<li><a href="#">游戏娱乐</a></li>  
</ul>  
</div>  
</div>  
</div>  
</div>  
<div class="h2_cat" onmouseover="this.className=’h2_cat active_cat’" onmouseout="this.className=’h2_cat’">  
<h3><a href="#">设计欣赏</a></h3>  
<div class="h3_cat">  
<div class="shadow">  
<div class="shadow_border">  
<ul>  
<li><a href="#">网页设计</a></li>  
<li><a href="#">UI设计</a></li>  
<li><a href="#">VI设计</a></li>  
<li><a href="#">Logo设计</a></li>  
<li><a href="#">环艺建筑</a></li>  
<li><a href="#">艺术创作</a></li>  
<li><a href="#">摄影艺术</a></li>  
<li><a href="#">工艺设计</a></li>  
</ul>  
</div>  
</div>  
</div>  
</div>  
<div class="h2_cat" onmouseover="this.className=’h2_cat active_cat’" onmouseout="this.className=’h2_cat’">  
<h3><a href="#">设计交流</a></h3>  
<div class="h3_cat">  
<div class="shadow">  
<div class="shadow_border">  
<ul>  
<li><a href="#">Photoshop教程</a></li>  
<li><a href="#">HTML/CSS教程</a></li>  
<li><a href="#">Flash教程</a></li>  
<li><a href="#">SEO/网站搭建</a></li>  
</ul>  
</div>  
</div>  
</div>  
</div>  
<!-- again -->  
<div class="h2_cat" onmouseover="this.className=’h2_cat active_cat’" onmouseout="this.className=’h2_cat’">  
<h3>设计素材</h3>  
<div class="h3_cat">  
<div class="shadow">  
<div class="shadow_border">  
<ul>  
<li><a href="#">桌面墙纸</a></li>  
<li><a href="#">PSD分层</a></li>  
<li><a href="#">矢量图</a></li>  
<li><a href="#">字体库</a></li>  
</ul>  
</div>  
</div>  
</div>  
</div>  
</div>  
</div>  
</body>  
</html>  

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华