经验分享程序开发文档资料数据资源其它资源

纯css左侧垂直商品分类菜单特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 纯css左侧垂直商品分类菜单特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

纯css左侧垂直商品分类菜单特效代码

HTML代码(index.html):

<!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" />
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen" />
<title>纯css左侧垂直商品分类菜单</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
</head>
<body>
<div class="sidebar">
	<h2>商品目录</h2>
	<ul id="menu">
		<li><a href="#">时尚女包</a>    
			<div class="dropdown_4columns">         
				<div class="col_1">            
					<h3>热门类目</h3>
					<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>
					</ul>                  
				</div>    
				<div class="col_1">            
					<h3>价格区间</h3>
					<ul>
						<li><a href="#">100元以下</a></li>
						<li><a href="#">100-300元</a></li>
						<li><a href="#">300-500元</a></li>
						<li><a href="#">500-1000元</a></li>
						<li><a href="#">1000元以上</a></li>
					</ul>
				</div>    
				<div class="col_1">            
					<h3>促销活动</h3>
					<ul>
						<li><a href="#">城市风情系列促销</a></li>
						<li><a href="#">春节5折促销</a></li>
						<li><a href="#">清仓促销一折起</a></li>
						<li><a href="#">羽绒潮包优惠活动</a></li>
						<li><a href="#">品牌降价促销</a></li>
					</ul>  
				</div>    
				<div class="col_1">
					<h3>推荐品牌</h3>
					<ul>
						<li><a href="#">派克兰帝</a></li>
						<li><a href="#">Bessie贝茜</a></li>
						<li><a href="#">Adidas</a></li>
						<li><a href="#">BeLLE百丽包</a></li>
						<li><a href="#">欧伦堡</a></li>
					</ul>  
				</div>            
			</div>  
		</li><!-- End 4 columns Item -->
		
		<li><a href="#">精品男包</a>    
			 <div class="dropdown_4columns">         
				<div class="col_1">            
					<h3>热门类目</h3>
					<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>
					</ul>                  
				</div>    
				<div class="col_1">            
					<h3>价格区间</h3>
					<ul>
						<li><a href="#">100元以下</a></li>
						<li><a href="#">100-300元</a></li>
						<li><a href="#">300-500元</a></li>
						<li><a href="#">500-1000元</a></li>
						<li><a href="#">1000元以上</a></li>
					</ul>
				</div>    
				<div class="col_1">            
					<h3>促销活动</h3>
					<ul>
						<li><a href="#">城市风情系列促销</a></li>
						<li><a href="#">春节5折促销</a></li>
						<li><a href="#">清仓促销一折起</a></li>
						<li><a href="#">羽绒潮包优惠活动</a></li>
						<li><a href="#">品牌降价促销</a></li>
					</ul>  
				</div>    
				<div class="col_1">
					<h3>推荐品牌</h3>
					<ul>
						<li><a href="#">派克兰帝</a></li>
						<li><a href="#">Bessie贝茜</a></li>
						<li><a href="#">Adidas</a></li>
						<li><a href="#">BeLLE百丽包</a></li>
						<li><a href="#">欧伦堡</a></li>
					</ul>  
				</div>            
			</div>  
		</li><!-- End 4 columns Item -->
		
		<li><a href="#">极品真皮包</a>    
			<div class="dropdown_4columns">         
				<div class="col_1">            
					<h3>热门类目</h3>
					<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>
					</ul>                  
				</div>    
				<div class="col_1">            
					<h3>价格区间</h3>
					<ul>
						<li><a href="#">100元以下</a></li>
						<li><a href="#">100-300元</a></li>
						<li><a href="#">300-500元</a></li>
						<li><a href="#">500-1000元</a></li>
						<li><a href="#">1000元以上</a></li>
					</ul>
				</div>    
				<div class="col_1">            
					<h3>促销活动</h3>
					<ul>
						<li><a href="#">城市风情系列促销</a></li>
						<li><a href="#">春节5折促销</a></li>
						<li><a href="#">清仓促销一折起</a></li>
						<li><a href="#">羽绒潮包优惠活动</a></li>
						<li><a href="#">品牌降价促销</a></li>
					</ul>  
				</div>    
				<div class="col_1">
					<h3>推荐品牌</h3>
					<ul>
						<li><a href="#">派克兰帝</a></li>
						<li><a href="#">Bessie贝茜</a></li>
						<li><a href="#">Adidas</a></li>
						<li><a href="#">BeLLE百丽包</a></li>
						<li><a href="#">欧伦堡</a></li>
					</ul>  
				</div>            
			</div>  
		</li><!-- End 4 columns Item -->
		
		<li><a href="#">商务旅行包</a>    
			 <div class="dropdown_4columns">         
				<div class="col_1">            
					<h3>热门类目</h3>
					<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>
					</ul>                  
				</div>    
				<div class="col_1">            
					<h3>价格区间</h3>
					<ul>
						<li><a href="#">100元以下</a></li>
						<li><a href="#">100-300元</a></li>
						<li><a href="#">300-500元</a></li>
						<li><a href="#">500-1000元</a></li>
						<li><a href="#">1000元以上</a></li>
					</ul>
				</div>    
				<div class="col_1">            
					<h3>促销活动</h3>
					<ul>
						<li><a href="#">城市风情系列促销</a></li>
						<li><a href="#">春节5折促销</a></li>
						<li><a href="#">清仓促销一折起</a></li>
						<li><a href="#">羽绒潮包优惠活动</a></li>
						<li><a href="#">品牌降价促销</a></li>
					</ul>  
				</div>    
				<div class="col_1">
					<h3>推荐品牌</h3>
					<ul>
						<li><a href="#">派克兰帝</a></li>
						<li><a href="#">Bessie贝茜</a></li>
						<li><a href="#">Adidas</a></li>
						<li><a href="#">BeLLE百丽包</a></li>
						<li><a href="#">欧伦堡</a></li>
					</ul>  
				</div>            
			</div>  
		</li><!-- End 4 columns Item -->
		
		<li><a href="#">高档丝巾包</a>    
			 <div class="dropdown_4columns">         
				<div class="col_1">            
					<h3>热门类目</h3>
					<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>
					</ul>                  
				</div>    
				<div class="col_1">            
					<h3>价格区间</h3>
					<ul>
						<li><a href="#">100元以下</a></li>
						<li><a href="#">100-300元</a></li>
						<li><a href="#">300-500元</a></li>
						<li><a href="#">500-1000元</a></li>
						<li><a href="#">1000元以上</a></li>
					</ul>
				</div>    
				<div class="col_1">            
					<h3>促销活动</h3>
					<ul>
						<li><a href="#">城市风情系列促销</a></li>
						<li><a href="#">春节5折促销</a></li>
						<li><a href="#">清仓促销一折起</a></li>
						<li><a href="#">羽绒潮包优惠活动</a></li>
						<li><a href="#">品牌降价促销</a></li>
					</ul>  
				</div>    
				<div class="col_1">
					<h3>推荐品牌</h3>
					<ul>
						<li><a href="#">派克兰帝</a></li>
						<li><a href="#">Bessie贝茜</a></li>
						<li><a href="#">Adidas</a></li>
						<li><a href="#">BeLLE百丽包</a></li>
						<li><a href="#">欧伦堡</a></li>
					</ul>  
				</div>            
			</div>  
		</li><!-- End 4 columns Item -->
		
		<li><a href="#">菱格纹包包</a>    
			 <div class="dropdown_4columns">         
				<div class="col_1">            
					<h3>热门类目</h3>
					<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>
					</ul>                  
				</div>    
				<div class="col_1">            
					<h3>价格区间</h3>
					<ul>
						<li><a href="#">100元以下</a></li>
						<li><a href="#">100-300元</a></li>
						<li><a href="#">300-500元</a></li>
						<li><a href="#">500-1000元</a></li>
						<li><a href="#">1000元以上</a></li>
					</ul>
				</div>    
				<div class="col_1">            
					<h3>促销活动</h3>
					<ul>
						<li><a href="#">城市风情系列促销</a></li>
						<li><a href="#">春节5折促销</a></li>
						<li><a href="#">清仓促销一折起</a></li>
						<li><a href="#">羽绒潮包优惠活动</a></li>
						<li><a href="#">品牌降价促销</a></li>
					</ul>  
				</div>    
				<div class="col_1">
					<h3>推荐品牌</h3>
					<ul>
						<li><a href="#">派克兰帝</a></li>
						<li><a href="#">Bessie贝茜</a></li>
						<li><a href="#">Adidas</a></li>
						<li><a href="#">BeLLE百丽包</a></li>
						<li><a href="#">欧伦堡</a></li>
					</ul>  
				</div>            
			</div>  
		</li><!-- End 4 columns Item -->
		
		<li><a href="#">羽绒潮包包</a>    
			 <div class="dropdown_4columns">         
				<div class="col_1">            
					<h3>热门类目</h3>
					<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>
					</ul>                  
				</div>    
				<div class="col_1">            
					<h3>价格区间</h3>
					<ul>
						<li><a href="#">100元以下</a></li>
						<li><a href="#">100-300元</a></li>
						<li><a href="#">300-500元</a></li>
						<li><a href="#">500-1000元</a></li>
						<li><a href="#">1000元以上</a></li>
					</ul>
				</div>    
				<div class="col_1">            
					<h3>促销活动</h3>
					<ul>
						<li><a href="#">城市风情系列促销</a></li>
						<li><a href="#">春节5折促销</a></li>
						<li><a href="#">清仓促销一折起</a></li>
						<li><a href="#">羽绒潮包优惠活动</a></li>
						<li><a href="#">品牌降价促销</a></li>
					</ul>  
				</div>    
				<div class="col_1">
					<h3>推荐品牌</h3>
					<ul>
						<li><a href="#">派克兰帝</a></li>
						<li><a href="#">Bessie贝茜</a></li>
						<li><a href="#">Adidas</a></li>
						<li><a href="#">BeLLE百丽包</a></li>
						<li><a href="#">欧伦堡</a></li>
					</ul>  
				</div>            
			</div>  
		</li><!-- End 4 columns Item -->
		<div class="clear"></div>	
	</ul>
</div>
</body>
</html>

CSS代码(menu.css):

body{font-size:14px;font-family:"\5B8B\4F53",san-serif;line-height:21px;text-align:left;}
body,div,ul,li,h1,h2,h3{padding:0;margin:0;}
ul,li{list-style:none;}
.clear{clear:both;}
.sidebar{background:#3B4053;border:1px solid #e6ebf1;width:190px;padding:5px;margin:30px auto;}
.sidebar h2{color:#fff;font-size:14px;line-height:21px;text-align:center;padding:2px 0 7px;}
#menu{width:190px;background:#e6ebf1;padding:8px 0;}
#menu li{float:left;width:166px;display:block;padding-left:24px;background:#e6ebf1;position:relative;line-height:21px;border:none;}
#menu li:hover{background:#3B4053;}
#menu li a{font-family:"\5B8B\4F53",san-serif;font-size:14px;color:#3B4053;display:block;outline:0;text-decoration:none;padding:5px 0;}
#menu li:hover a{color:#fff;}
.dropdown_4columns{margin:6px auto;float:left;position:absolute;left:-999em;text-align:left;border-left:6px solid #3B4053;border-top:1px solid #3B4053;border-bottom:1px solid #3B4053;border-right:1px solid #3B4053;width:510px;background:#e6ebf1;padding:5px 0 10px;}
#menu li:hover .dropdown_4columns{left:190px;top:-6px;}
.col_1{width:120px;display:inline;float:left;position:relative;margin:0;}
.col_4{width:510px;display:inline;float:left;position:relative;margin:0;}
#menu h3{font-size:14px;font-weight:bold;color:#3B4053;margin:4px 0;padding-left:20px;font-family:"\5B8B\4F53",san-serif;line-height:21px;font-size:12px;text-align:center;}
#menu li:hover div a{font-size:12px;color:#003366;}
#menu li:hover div a:hover{color:#e47911;}
#menu li ul{list-style:none;padding:0;margin:0;}
#menu li ul li{font-size:12px;line-height:21px;position:relative;padding:0 0 0 6px;margin:0;text-align:left;width:120px;border-left:#ccc 1px solid;}
#menu li ul li a{padding:0 0 0 6px;margin:0;}
#menu li ul li:hover{background:none;padding:0 0 0 6px;margin:0;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.99 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.99 KB
立即下载
郑卿伊
了解
打赏作者 鼓励作者
Html Js 画廊展示特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章