电商网站右侧栏

web前端452404年前 (2016-02-15)

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

  • 用户反馈

  • 返回顶部

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。