微信公众号

电商网站右侧栏

web前端 15983 9年前 (2016-02-15)

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

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

LESS：

@c:#ed145b;
//背景图标fixedbg.png的base64为：
//data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAAAoCAMAAADt2mdsAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAEYciZejVwZpEVnitCDT2rjhHFQAAA9tJREFUaN7s1tuu6iAUheHB+VTseP+n3WDqstmrE0zITppsvxu9MKm/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC6g2TwEVbMJpQQ2ukJS2VTchmH3wEhiAaz4IeV/jo3ExquLbNVlNlZ1FdesY+MsJrS3WGc2Fx4Y0zSGZdhuYV0GrFC/8y+70M5DwVB8PhLrFKZ8CGF8atREVqAKU2R5Jn/z/bWD9mk71+tzIBkyRNl1pOsUfmPnUEhtDBw7/GI8T7zBNfL1Omtfr1eBfAoKAmM752w3XnnyIa08UDWfpDORl6T2XOb1Zd8LZNXzxVeMOAdMZ95Zcea7xEMCVuIjmaA5q9dsNESRb3Eev3DaL8RfthcyjOs16f2g3vDMfDLzK//zcfg785LcbjGs12SoNcj1mmf6g5lfueFVNs5J95wj9VR9Ga9/2jMHl9PS24FeX3DJ88x/sO1X7vaJZKw1kkxSPN/xvIxX53ZdpDWzr+FTXtobO8/2SfyqyD2jyTsjBDy/vZIZ3+3Iwgjlo/2ozx+M2T+O/9Oeve02CkNRGF4+4LW37bp+/6cdvMOkkDFVlWhUVPW7gFw4In9swwWkg3EkJiYzP1v1Bfd2/bx9X/8S5/AffT2eXaH6ebv2vr8zu6V3xcXNbniTQSNLP2tva3vATljrG66tT0wezmLx5bQdqb8HHIT3nnBtX4mPfUs+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRMXEVEDn3L3OHu7EsguZBU7Oj23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0WUGJ5GXio216pqDpPB6h0sUkDmgVUyK1F+JmSc6dbR9D2B5ZVMcR36RxpJVdUSeXiAMu0rBSRkjDjBIoS+eqQjRwU2bxYmvCA6LNA5d6W/3r16+f6A9gyE5/ana7kwAAAABJRU5ErkJggg==
.fixedbar { width:36px; height:100%; position:fixed; right:0; top:0; z-index:1; _display:none;
	.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; }
	}
}
.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; }
}
.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：

<style>.fixedbar{width:36px;height:100%;position:fixed;right:0;top:0;z-index:1;_display:none}.fixedbar .on{cursor:pointer;background:#ed145b;-webkit-transition:.2s linear;transition:.2s linear}.fixedbar .on i{background:#ed145b url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAAAoCAMAAADt2mdsAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAEYciZejVwZpEVnitCDT2rjhHFQAAA9tJREFUaN7s1tuu6iAUheHB+VTseP+n3WDqstmrE0zITppsvxu9MKm/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC6g2TwEVbMJpQQ2ukJS2VTchmH3wEhiAaz4IeV/jo3ExquLbNVlNlZ1FdesY+MsJrS3WGc2Fx4Y0zSGZdhuYV0GrFC/8y+70M5DwVB8PhLrFKZ8CGF8atREVqAKU2R5Jn/z/bWD9mk71+tzIBkyRNl1pOsUfmPnUEhtDBw7/GI8T7zBNfL1Omtfr1eBfAoKAmM752w3XnnyIa08UDWfpDORl6T2XOb1Zd8LZNXzxVeMOAdMZ95Zcea7xEMCVuIjmaA5q9dsNESRb3Eev3DaL8RfthcyjOs16f2g3vDMfDLzK//zcfg785LcbjGs12SoNcj1mmf6g5lfueFVNs5J95wj9VR9Ga9/2jMHl9PS24FeX3DJ88x/sO1X7vaJZKw1kkxSPN/xvIxX53ZdpDWzr+FTXtobO8/2SfyqyD2jyTsjBDy/vZIZ3+3Iwgjlo/2ozx+M2T+O/9Oeve02CkNRGF4+4LW37bp+/6cdvMOkkDFVlWhUVPW7gFw4In9swwWkg3EkJiYzP1v1Bfd2/bx9X/8S5/AffT2eXaH6ebv2vr8zu6V3xcXNbniTQSNLP2tva3vATljrG66tT0wezmLx5bQdqb8HHIT3nnBtX4mPfUs+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRMXEVEDn3L3OHu7EsguZBU7Oj23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0WUGJ5GXio216pqDpPB6h0sUkDmgVUyK1F+JmSc6dbR9D2B5ZVMcR36RxpJVdUSeXiAMu0rBSRkjDjBIoS+eqQjRwU2bxYmvCA6LNA5d6W/3r16+f6A9gyE5/ana7kwAAAABJRU5ErkJggg==) no-repeat;-webkit-transition:.2s linear;transition:.2s linear}.fixedbar .on .cart i{border-top:1px solid #ed145b}.fixedbar .on .barname{right:36px}.fixedbar .on .barnum{border-bottom:1px solid #ed145b}.fixedbar .on .barnum span{color:#ed145b;background:#fff}.fixedbar .on: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}.fbarnav{height:100%;background:#262626;position:relative;z-index:1}.fbartop{margin:-200px 0 0;position:absolute;top:38%;right:0}.fbartop li{position:relative}.fbartop i{width:36px;height:40px;margin:20px auto;cursor:pointer;background:#262626 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAAAoCAMAAADt2mdsAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAEYciZejVwZpEVnitCDT2rjhHFQAAA9tJREFUaN7s1tuu6iAUheHB+VTseP+n3WDqstmrE0zITppsvxu9MKm/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC6g2TwEVbMJpQQ2ukJS2VTchmH3wEhiAaz4IeV/jo3ExquLbNVlNlZ1FdesY+MsJrS3WGc2Fx4Y0zSGZdhuYV0GrFC/8y+70M5DwVB8PhLrFKZ8CGF8atREVqAKU2R5Jn/z/bWD9mk71+tzIBkyRNl1pOsUfmPnUEhtDBw7/GI8T7zBNfL1Omtfr1eBfAoKAmM752w3XnnyIa08UDWfpDORl6T2XOb1Zd8LZNXzxVeMOAdMZ95Zcea7xEMCVuIjmaA5q9dsNESRb3Eev3DaL8RfthcyjOs16f2g3vDMfDLzK//zcfg785LcbjGs12SoNcj1mmf6g5lfueFVNs5J95wj9VR9Ga9/2jMHl9PS24FeX3DJ88x/sO1X7vaJZKw1kkxSPN/xvIxX53ZdpDWzr+FTXtobO8/2SfyqyD2jyTsjBDy/vZIZ3+3Iwgjlo/2ozx+M2T+O/9Oeve02CkNRGF4+4LW37bp+/6cdvMOkkDFVlWhUVPW7gFw4In9swwWkg3EkJiYzP1v1Bfd2/bx9X/8S5/AffT2eXaH6ebv2vr8zu6V3xcXNbniTQSNLP2tva3vATljrG66tT0wezmLx5bQdqb8HHIT3nnBtX4mPfUs+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRMXEVEDn3L3OHu7EsguZBU7Oj23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0WUGJ5GXio216pqDpPB6h0sUkDmgVUyK1F+JmSc6dbR9D2B5ZVMcR36RxpJVdUSeXiAMu0rBSRkjDjBIoS+eqQjRwU2bxYmvCA6LNA5d6W/3r16+f6A9gyE5/ana7kwAAAABJRU5ErkJggg==) no-repeat;position:relative;z-index:2;display:block}.fbartop .user i{background-position:0 0}.fbartop .asset i{background-position:-36px 0}.fbartop .history i{background-position:-72px 0}.fbartop .goods i{background-position:-108px 0}.fbartop .cart i{margin:0;border-top:1px solid #4c4c4c;background-position:-144px 0}.fbartop .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}.fbarbtm li{position:relative}.fbarbtm i{width:36px;height:40px;margin:20px auto;cursor:pointer;background:#262626 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAAAoCAMAAADt2mdsAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAEYciZejVwZpEVnitCDT2rjhHFQAAA9tJREFUaN7s1tuu6iAUheHB+VTseP+n3WDqstmrE0zITppsvxu9MKm/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC6g2TwEVbMJpQQ2ukJS2VTchmH3wEhiAaz4IeV/jo3ExquLbNVlNlZ1FdesY+MsJrS3WGc2Fx4Y0zSGZdhuYV0GrFC/8y+70M5DwVB8PhLrFKZ8CGF8atREVqAKU2R5Jn/z/bWD9mk71+tzIBkyRNl1pOsUfmPnUEhtDBw7/GI8T7zBNfL1Omtfr1eBfAoKAmM752w3XnnyIa08UDWfpDORl6T2XOb1Zd8LZNXzxVeMOAdMZ95Zcea7xEMCVuIjmaA5q9dsNESRb3Eev3DaL8RfthcyjOs16f2g3vDMfDLzK//zcfg785LcbjGs12SoNcj1mmf6g5lfueFVNs5J95wj9VR9Ga9/2jMHl9PS24FeX3DJ88x/sO1X7vaJZKw1kkxSPN/xvIxX53ZdpDWzr+FTXtobO8/2SfyqyD2jyTsjBDy/vZIZ3+3Iwgjlo/2ozx+M2T+O/9Oeve02CkNRGF4+4LW37bp+/6cdvMOkkDFVlWhUVPW7gFw4In9swwWkg3EkJiYzP1v1Bfd2/bx9X/8S5/AffT2eXaH6ebv2vr8zu6V3xcXNbniTQSNLP2tva3vATljrG66tT0wezmLx5bQdqb8HHIT3nnBtX4mPfUs+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRMXEVEDn3L3OHu7EsguZBU7Oj23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0WUGJ5GXio216pqDpPB6h0sUkDmgVUyK1F+JmSc6dbR9D2B5ZVMcR36RxpJVdUSeXiAMu0rBSRkjDjBIoS+eqQjRwU2bxYmvCA6LNA5d6W/3r16+f6A9gyE5/ana7kwAAAABJRU5ErkJggg==) no-repeat;position:relative;z-index:2;display:block}.fbarbtm .survey i{background-position:-180px 0}.fbarbtm .backtop i{background-position:-216px 0}.fbarbtm .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}.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}.barnum span{padding:5px;border-radius:50%;background:#ed145b}@media screen and (max-width:1000px){.fixedbar{right:-36px}.switch{right:0;-webkit-transition:.2s linear;transition:.2s linear}.switch .showbar{right:0}.showbar{background:#262626;right:36px}.showbar.on{background:#ed145b}}@media screen and (max-height:530px){.fbartop{top:50%}.fbarbtm{display:none}}</style>
<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");
	});

});
</script>
<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>

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