这个底部悬浮层菜单是仿照京东商品详情的http://item.m.jd.com/product/1451400.html，菜单按钮有关注、加入购物车、购物车和立即购买。#carNum里面可加入购物车数量，为空表示购物车里面没有商品。
查看演示
下载资源：
165
次 下载资源
下载积分：
25
积分
底部菜单html
底部悬浮导航样式 .cart-concern-btm-fixed {
bottom: 0;
height: 50px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: 10;
}
.four-column .concern-cart {
width: 42%;
}
.concern-cart {
background-color: rgba(0, 0, 0, 0.8);
}
.concern-cart, .action-list {
float: left;
}
.concern-cart a {
color: #d4d4d4;
font-size: 10px;
}
.concern-cart a, .action-list a {
width: 50%;
}
.concern-cart a, .action-list a {
display: inline-block;
float: left;
height: 50px;
line-height: 50px;
}
.focus-container {
display: inline-block;
text-align: center;
width: 40px;
}
.focus-container .focus-icon {
margin-bottom: -18px;
text-align: center;
}
.focus-out {
background-position: 0 0;
display: inline-block;
height: 19px;
width: 21px;
}
.concern-cart a span {
display: block;
height: 18px;
line-height: 13px;
text-align: center;
}
.focus-info {
color: #d4d4d4;
font-size: 10px;
}
em.btm-act-icn {
background: url("../images/sprits_btm_new.png") no-repeat scroll 0 0;
display: block;
height: 24px;
margin: 8px auto 0;
position: relative;
width: 25px;
}
.cart-car-icn .btm-act-icn {
background-position: 0 -23px;
background-size: 50px 50px;
}
.order-numbers {
background-color: white;
border-radius: 8px;
color: #f15353;
display: inline-block;
font-size: 8px;
font-style: normal;
line-height: 12px;
padding: 0 5px;
position: absolute;
right: -10px;
top: -5px;
}
.four-column .action-list {
width: 58%;
}
.action-list a {
color: #fff;
font-size: 15px;
}
.yellow-color {
background-color: #ffb03f;
}
.red-color {
background-color: #f15353;
}
em.btm-act-attention {
background: url("../images/focus-icon.png") no-repeat scroll 0 0 / 100px 100px;
display: inline-block;
height: 19px;
width: 21px;
background-position: 0 0;
margin:10.6px 0 2px
}
3589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
