首页 > web前端 > 电商网站右侧栏

电商网站右侧栏

2016-02-15 toyean web前端 0人评论 1949人浏览

如今越来越多的网站都加上了侧边栏,尤以电商网站最为明显,比如说唯品会、天猫、京东、聚美优品等,使用传统的侧栏加以图标指示,使得网站导航一目了然,让用户一眼就把精力集中到侧边导航上,很好的做到了和用户之间的交互,增加了PV,更彰显了网站的高贵品质。

下面是我们做的侧边栏效果,核心代码如下:

LESS:

@c:#ed145b;
.fixedbar { width:36px; height:100%; position:fixed; right:0; top:0; z-index:1; _display:none; }
.fbarnav { height:100%; background:#262626; position:relative; z-index:1; }
.fbartop { margin:-200px 0 0; position:absolute; top:38%; right:0;
	li { position:relative; }
	i { width:36px; height:40px; margin:20px auto; cursor:pointer; background:#262626 url(images/fixedbg.png) no-repeat; position:relative; z-index:2; display:block; }
	.user i { background-position:0 0; }
	.asset i { background-position:-36px 0; }
	.history i { background-position:-72px 0; }
	.goods i { background-position:-108px 0; }
	.cart i { margin:0; border-top:1px solid #4c4c4c; background-position:-144px 0; }
	.barname { width:100px; height:38px; padding:0 8px; font-size:14px; line-height:35px; text-align:center; border:1px solid #ddd; border-right:0; border-radius:3px 0 0 3px; background:#fff; position:absolute; top:0; right:-120px; z-index:1; -webkit-transition:.3s linear; transition:.3s linear; }
}
.fbarbtm { position:absolute; bottom:10px; right:0;
	li { position:relative; }
	i { width:36px; height:40px; margin:20px auto; cursor:pointer; background:#262626 url(images/fixedbg.png) no-repeat; position:relative; z-index:2; display:block; }
	.survey i { background-position:-180px 0; }
	.backtop i { background-position:-216px 0; }
	.barname { width:100px; height:38px; padding:0 8px; font-size:14px; line-height:35px; text-align:center; border:1px solid #ddd; border-right:0; border-radius:3px 0 0 3px; background:#fff; position:absolute; top:0; right:-120px; z-index:1; -webkit-transition:.3s linear; transition:.3s linear; }
}
.on { cursor:pointer; background:@c; -webkit-transition:.2s linear; transition:.2s linear;
	i { background:@c url(images/fixedbg.png) no-repeat; -webkit-transition:.2s linear; transition:.2s linear; }
	.cart i { border-top:1px solid @c; }
	.barname { right:36px; }
	.barnum { border-bottom:1px solid @c;
		 span { color:@c; background:#fff; }
	}
	&:after { content:""; width:0; height:0; margin-top:-5px; border:5px solid transparent; border-left-color:#fff; position:absolute; top:50%; left:0; z-index:2; }
}
.showbar:after { display:none; }
.bartxt { width:14px; margin:auto; font-size:14px; color:#fff; line-height:18px; text-align:center; }
.barnum { width:26px; height:26px; margin:5px auto 0; padding:0 0 8px; color:#fff; line-height:20px; text-align:center; border-bottom:1px solid #4c4c4c;
	span { padding:5px; border-radius:50%; background:@c; }
}
@media screen and (max-width:1000px) {
	.fixedbar { right:-36px; }
	.switch { right:0; -webkit-transition:.2s linear; transition:.2s linear;
		.showbar { right:0; }
	}
	.showbar { background:#262626; right:36px;
		&.on { background:@c; }
	}
}
@media screen and (max-height:530px) {
	.fbartop { top:50%; }
	.fbarbtm { display:none; }
}


script:

$(function(){
	$(".fbartop li,.fbarbtm li").hover(function(){
		$(this).toggleClass("on");
	});
	$(".showbar").hover(function(){
		$(this).parents(".fixedbar").addClass("switch");
	});
	$(".fbarnav").hover(function(){
		$(this).parents(".fixedbar").addClass("switch");
	},function(){
		$(this).parents(".fixedbar").removeClass("switch");
	});

});


HTML:

<div class="fixedbar">
		<div class="fbarnav">
			<div class="fbartop">
				<ul>
					<li>
						<div class="user">
							<i></i>
							<p class="barname">个人中心</p>
						</div>
					</li>
					<li>
						<div class="asset">
							<i></i>
							<p class="barname">我的资产</p>
						</div>
					</li>
					<li>
						<div class="history">
							<i></i>
							<p class="barname">我看过的商品</p>
						</div>
					</li>
					<li>
						<div class="goods">
							<i></i>
							<p class="barname">我收藏的商品</p>
						</div>
					</li>
					<li class="showbar">
						<div class="cart">
							<i></i>
							<p class="bartxt">购物车</p>
							<p class="barnum"><span>99</span></p>
						</div>
					</li>
				</ul>
			</div>
			<div class="fbarbtm">
				<ul>
					<li>
						<div class="survey">
							<i></i>
							<p class="barname">用户反馈</p>
						</div>
					</li>
					<li class="showbar">
						<div class="backtop">
							<i></i>
							<p class="barname">返回顶部</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>


效果请看本页面右侧边栏→


  • 个人中心

  • 我的资产

  • 我看过的商品

  • 我收藏的商品

  • 购物车

    99

  • 用户反馈

  • 返回顶部

打赏
拓源网官方微信
关注拓源网微博
476590949
09:00 - 18:00
拓源网QQ群: 491920017
客服邮箱: