Right column of e-commerce website

Nowadays, more and more websites have added sidebars, especially e-commerce websites, such as Vipshop, Tmall, JD, JumeiYoupin, etc Icon The instructions make the website navigation clear at a glance, so that users can focus on the side navigation at a glance, which has achieved good interaction with users, increased PV, and demonstrated the noble quality of the website.

The following is our sidebar effect. The core code is as follows:

LESS：

 @c:# ed145b; //The base64 of the background icon fixedbg.png is: //data: image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAPwAAAAoCAMAAADt2mdsAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAEYciZejVwZpEVnitCDT2rjhHFQAAA9tJREFUaN7s1tuu6iAUheHB+VTseP+n3WDqstmrE0zITppsvxu9MKm/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC6g2TwEVbMJpQQ2ukJS2VTch mH3wEhiAaz4IeV/jo3ExquLbNVlNlZ1FdesY+MsJrS3WGc2Fx4Y0zSGZdhuYV0GrFC/8y+70M5DwVB8PhLrFKZ8CGF8atREVqAKU2R5Jn/z/bWD9mk71+tzIBkyRNl1pOsUfmPnUEhtDBw7/GI8T7zBNfL1Omtfr1eBfAoKAmM752w3XnnyIa08UDWfpDORl6T2XOb1Zd8LZNXzxVeMOAdMZ95Zcea7xEMCVuIjmaA5q9dsNESRb3Eev3DaL8RfthcyjOs16f2g3vDMfDLzK//zcfg785LcbjGs12SoNcj1mmf6g5lfueFVNs5J95wj9VR9Ga9/2jMHl9PS24FeX3DJ88x/sO 1X7vaJZKw1kkxSPN/xvIxX53ZdpDWzr+FTXtobO8/2SfyqyD2jyTsjBDy/vZIZ3+3Iwgjlo/2ozx+M2T+O/9Oeve02CkNRGF4+4LW37bp+/6cdvMOkkDFVlWhUVPW7gFw4In9swwWkg3EkJiYzP1v1Bfd2/bx9X/8S5/AffT2eXaH6ebv2vr8zu6V3xcXNbniTQSNLP2tva3vATljrG66tT0wezmLx5bQdqb8HHIT3nnBtX4mPfUs+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRMXEVEDn3L3OHu7EsguZBU7Oj 23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0WUGJ5GXio216pqDpPB6h0sUk DmgVUyK1F+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/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC 6g2TwEVbMJpQQ2ukJS2VTchmH3wEhiAaz4IeV/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+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRM XEVEDn3L3OHu7EsguZBU7Oj23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0W UGJ5GXio216pqDpPB6h0sUkDmgVUyK1F+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/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC 6g2TwEVbMJpQQ2ukJS2VTchmH3wEhiAaz4IeV/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+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRM XEVEDn3L3OHu7EsguZBU7Oj23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0W UGJ5GXio216pqDpPB6h0sUkDmgVUyK1F+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/MBF8fX391x6ePkGmvcFBeY1FMeJGDLtBvXEbDtEZrFGkwn1odhtkmRZPlhmiFB3pYsJQJjPuY2PnMRBp0BhGOd3z4NPkaRvuY77yUC 6g2TwEVbMJpQQ2ukJS2VTchmH3wEhiAaz4IeV/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+b0dJAQ9CKtjzJIPKtpsrTcVBaYAKPqjHPzxvPAAb64gZVzHsLvZEvHR7XrYo1v4sAaKqIDAAIAxxVBRM XEVEDn3L3OHu7EsguZBU7Oj23cEubeSJePY7wSvxMuJjBU7iTRSUAp/ts02bA07jcWsTxSMlEAjzQrx0kyQHvB6vMAvNgqMsGY4Meg/Iggf8C6ZZvMNBtOWwpNugRJOeiH+TJLG9wbwWn9OIrjgRUgZiCnberXvFI8J4KmjxxIEoWkZxIC5hm3kf7Eff+YcZ652rWi1gqmWLNxpL1BHv80N8JBCSclsqIXCF7yLB4pvHEAsmLNgBMeI8vsRt1+iI9yh5DPXYk+gryVi2+52ojiO+i2Y2p4IasEqJZhLPLb4GTNXDzANp8j+JQiz7IvGoWaCCkPAh4cg35EVv8cRcXw7x1MI0W UGJ5GXio216pqDpPB6h0sUkDmgVUyK1F+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">Personal Center</p> </div> </li> <li> <div class="asset"> <i></i> <p class="barname">My assets</p> </div> </li> <li> <div class="history"> <i></i> <p class="barname">Items I have seen</p> </div> </li> <li> <div class="goods"> <i></i> <p class="barname">My favorite products</p> </div> </li> <li class="showbar"> <div class="cart"> <i></i> <p class="bartxt"> shopping Car</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">User feedback</p> </div> </li> <li class="showbar"> <div class="backtop"> <i></i> <p class="barname">Back to top</p> </div> </li> </ul> </div> </div> </div>

See the right sidebar of this page →