以下是 CSS3实现淘宝右侧固定导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/index-min.css" rel="stylesheet" type="text/css">
<title>CSS3实现淘宝右侧固定导航特效</title>
</head>
<body>
<div class="tb-toolbar">
<div class="tb-toolbar-space" style="height: 3%;"></div>
<ul class="tb-toolbar-list tb-toolbar-list-with-worthbuying tb-toolbar-list-with-cart tb-toolbar-list-with-history tb-toolbar-list-with-coupon">
<li class="tb-toolbar-item tb-toolbar-history"> <a href="#" class="tb-toolbar-item-hd">
<div class="tb-toolbar-item-icon">
</div>
<div class="tb-toolbar-item-tipsj">
<iframe id="popFrame" scrolling="no" frameborder="0" width="205" allowtransparency="true" height="205" src="#" target="_blank">-</iframe>
<div class="tb-toolbar-item-arrowsj">
◆
</div>
</div> </a>
<div class="tb-toolbar-item-bd tb-toolbar-loading">
</div>
</li>
<li class="tb-toolbar-item-split"></li>
<li class="tb-toolbar-item tb-toolbar-item-worthbuying" data-item="worthbuying"> <a href="#" class="tb-toolbar-item-hd">
<div class="tb-toolbar-item-icon">
</div>
<div class="tb-toolbar-item-tipa">
<iframe style="border:solid 1px #7ec8ea" name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=111" width="977" height="100" frameborder="no" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<div class="tb-toolbar-item-arrowa">
◆
</div>
</div> </a>
<div class="tb-toolbar-item-bd"></div>
</li>
<li class="tb-toolbar-item-split"></li>
<li class="tb-toolbar-item tb-toolbar-item-cart" data-item="cart"> <a href="#" class="tb-toolbar-item-hd tb-toolbar-item-hd-cart J_TBToolbarCart">
<div class="tb-toolbar-item-icon tb-toolbar-item-icon-cart">
</div>
<div class="tb-toolbar-item-label tb-toolbar-item-label-cart">
购物车
</div>
<div class="J_ToolbarCartNum tb-toolbar-item-badge-cart">
0
</div>
<div class="tb-toolbar-item-tip">
我的购物车
<div class="tb-toolbar-item-arrow">
◆
</div>
</div> </a>
<div class="tb-toolbar-item-bd tb-toolbar-mini-cart tb-toolbar-loading">
</div>
</li>
<li class="tb-toolbar-item-split"></li>
<li class="tb-toolbar-item tb-toolbar-history" data-item="history"> <a href="#" class="tb-toolbar-item-hd">
<div class="tb-toolbar-item-icon">
</div>
<div class="tb-toolbar-item-tip">
我的足迹
<div class="tb-toolbar-item-arrow">
◆
</div>
</div> </a>
<div class="tb-toolbar-item-bd tb-toolbar-loading">
</div>
</li>
<li class="tb-toolbar-item-split"></li>
<li class="tb-toolbar-item tb-toolbar-item-coupon" data-item="coupon"> <a href="#" class="tb-toolbar-item-hd tb-toolbar-item-hd-coupon">
<div class="tb-toolbar-item-icon">
</div>
<div class="tb-toolbar-item-tip tb-toolbar-item-tip-coupon">
店铺优惠
<div class="tb-toolbar-item-arrow">
◆
</div>
</div> </a>
<div class="tb-toolbar-item-hd-extra">
<div class="tb-toolbar-item-bubble tb-toolbar-item-bubble-coupon J_TBToolbarBubbleCoupon">
<span class="tb-toolbar-item-bubble-txt">该店铺可领优惠券</span>
<br />
<a href="#" class="tb-toolbar-item-bubble-btn J_TBToolbarBubbleOpenCouponTgr">立即领取</a>
<span class="tb-toolbar-item-arrow">◆</span>
<span class="tb-toolbar-item-bubble-saw"></span>
</div>
</div>
<div class="tb-toolbar-item-bd tb-toolbar-item-bd-coupon tb-toolbar-loading"></div>
</li>
</ul>
<div class="tb-toolbar-space" style="height: 7%;"></div>
<ul class="tb-toolbar-list tb-toolbar-list-with-feedback tb-toolbar-list-with-gotop">
<li class="tb-toolbar-item" data-item="feedback"> <a href="#" class="tb-toolbar-item-hd">
<div class="tb-toolbar-item-icon">
</div>
<div class="tb-toolbar-item-tip">
<span class="tb-toolbar-item-tip-text">反馈</span>
<div class="tb-toolbar-item-arrow">
◆
</div>
</div> </a>
</li>
<li class="tb-toolbar-item" data-item="gotop"> <a href="#" class="tb-toolbar-item-hd">
<div class="tb-toolbar-item-icon">
</div>
<div class="tb-toolbar-item-tip">
<span class="tb-toolbar-item-tip-text">顶部</span>
<div class="tb-toolbar-item-arrow">
◆
</div>
</div> </a>
</li>
</ul>
</div>
</body>
</html>
CSS代码(index-min.css):
.tb-toolbar{position:fixed;z-index:100000020;width:35px;border-left:1px solid #ddd;border-right:1px solid #ddd;right:0;top:0;bottom:0;background-color:#eee;-webkit-transform:translate3d(0,0,0);font-family:tahoma,arial,'Hiragino Sans GB',simsun,sans-serif;font-size:0}
.ks-ie6 .tb-toolbar{zoom:1;position:absolute;right:0;height:expression(eval(document.documentElement.clientHeight));top:expression(eval(document.documentElement.scrollTop));left:auto}
.ks-ie6 .tb-toolbar-space{line-height:0}
.tb-toolbar-list{margin:0;padding:0;list-style:none;min-height:46px}
.tb-toolbar-item{height:46px}
.tb-toolbar-item-hd{display:block;width:35px;height:46px;position:relative;color:#666;font-size:12px;text-decoration:none!important;cursor:pointer;outline:0;_overflow:hidden}
.tb-toolbar-item-hd:hover{_overflow:visible}
.tb-toolbar-item-hd:hover,.tb-toolbar-item-hd-active{color:#f40;background-color:#fff}
.tb-toolbar-item-bd{display:none;z-index:100000021;position:absolute;right:36px;top:0;bottom:0;width:245px;_height:expression(eval(document.documentElement.clientHeight));border-right:1px solid #f9f8f7;box-shadow:-2px 0 2px rgba(0,0,0,.15);background-color:#f1f1f1;font-size:12px}
.tb-toolbar-right .tb-toolbar-item-bd{left:36px;border-right:none;box-shadow:none}
.tb-toolbar-item-bd-left{right:36px!important;left:inherit!important}
.tb-toolbar-item-tipa{display:none;z-index:100000022;position:absolute;top:-18px;left:-980px;width:979px;height:100px;color:#fff;font-size:12px;line-height:30px;font-family:tahoma,arial,'Hiragino Sans GB',simsun,sans-serif;text-align:center;background:#E4F0F8;/* background:#f40;*/
-webkit-animation:leftFadeIn .3s ease-out;-moz-animation:leftFadeIn .3s ease-out;animation:leftFadeIn .3s ease-out}
.tb-toolbar-item-hd:hover .tb-toolbar-item-tipa{display:block}
.tb-toolbar-item-arrowa{position:absolute;right:-6px;top:30px;color:#E4F0F8}
.tb-toolbar-item-tipsj{display:none;z-index:100000022;position:absolute;top:-18px;left:-205px;width:205px;height:205px;color:#fff;font-size:12px;line-height:30px;font-family:tahoma,arial,'Hiragino Sans GB',simsun,sans-serif;text-align:center;/* background:#f40;*/
-webkit-animation:leftFadeIn .3s ease-out;-moz-animation:leftFadeIn .3s ease-out;animation:leftFadeIn .3s ease-out}
.tb-toolbar-item-hd:hover .tb-toolbar-item-tipsj{display:block}
.tb-toolbar-item-arrowsj{position:absolute;right:-6px;top:25px;color:#E4F0F8}
.tb-toolbar-item-tip{display:none;z-index:100000022;position:absolute;top:8px;left:-85px;width:85px;height:30px;color:#fff;font-size:12px;line-height:30px;font-family:tahoma,arial,'Hiragino Sans GB',simsun,sans-serif;text-align:center;background:#f40;-webkit-animation:leftFadeIn .3s ease-out;-moz-animation:leftFadeIn .3s ease-out;animation:leftFadeIn .3s ease-out}
.tb-toolbar-item-hd:hover .tb-toolbar-item-tip{display:block}
.tb-toolbar-item-arrow{position:absolute;right:-6px;top:0;color:#f40}
.tb-toolbar-item-label{text-align:center;font-size:12px;line-height:14px;margin:2px 0}
@font-face{font-family:tb-toolbar-iconfont;src:url(../images/font_1418875995_7687602.eot);src:url(../images/font_1418875995_7687602.eot?#iefix) format('embedded-opentype'),url(../images/font_1418875995_7687602.woff) format('woff'),url(../images/font_1418875995_7687602.ttf) format('truetype'),url(../images/font_1418875995_7687602.svg#iconfont) format('svg')}
.tb-toolbar-item-icon{text-align:center;width:35px;line-height:46px;font-family:tb-toolbar-iconfont;font-size:20px;font-style:normal;-webkit-font-smoothing:antialiased;webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
.tb-toolbar-relative{position:relative}
.tb-toolbar-loading{background-image:url(../images/TB1KTLrGVXXXXaeXFXXfLpBIVXX-144-100.gif);background-repeat:no-repeat;background-position:center}
.tb-toolbar-flyer{position:absolute;z-index:300000000;border:2px solid #FF5720;width:40px;padding:2px;height:40px}
.tb-toolbar-list-with-cart,.tb-toolbar:hover .tb-toolbar-list-with-cart{border-top:1px solid transparent;border-bottom:1px solid transparent;_border-color:#eee}
.tb-toolbar-list-with-gotop{position:absolute;bottom:20px}
.tb-toolbar-item-split{width:60%;margin:0 auto;border-bottom:1px dotted #bbb}
.tb-toolbar-price{font-family:arial}
@media screen and (max-width:1024px){.tb-toolbar-shrinked{top:25%;bottom:auto}
.tb-toolbar-shrinked .tb-toolbar-space,.tb-toolbar-shrinked .tb-toolbar-list{display:none}
.tb-toolbar-shrinked .tb-toolbar-list-with-cart{display:block;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.tb-toolbar-shrinked:hover{top:0;bottom:0}
.tb-toolbar-shrinked:hover .tb-toolbar-list,.tb-toolbar-shrinked:hover .tb-toolbar-space{display:block}
}
.tb-toolbar-mini.tb-toolbar-shrinked{top:25%;bottom:auto}
.tb-toolbar-mini.tb-toolbar-shrinked .tb-toolbar-space,.tb-toolbar-mini.tb-toolbar-shrinked .tb-toolbar-list{display:none}
.tb-toolbar-mini.tb-toolbar-shrinked .tb-toolbar-list-with-cart{display:block;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.tb-toolbar-mini.tb-toolbar-shrinked:hover{top:0;bottom:0}
.tb-toolbar-mini.tb-toolbar-shrinked:hover .tb-toolbar-list,.tb-toolbar-mini.tb-toolbar-shrinked:hover .tb-toolbar-space{display:block}
@-webkit-keyframes leftFadeIn{0%{opacity:0;-webkit-transform:translateX(-10px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes leftFadeIn{0%{opacity:0;-moz-transform:translateX(-10px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@keyframes leftFadeIn{0%{opacity:0;transform:translateX(-10px)}
100%{opacity:1;transform:translateX(0)}
}
.tb-toolbar-item-tip-coupon-x{width:86px!important;left:-86px!important}
.tb-toolbar-item-hd-extra{position:relative;width:100%;height:0;display:none;-webkit-animation:leftFadeIn .3s ease-out;-moz-animation:leftFadeIn .3s ease-out;animation:leftFadeIn .3s ease-out;font-size:12px}
.tb-toolbar-item-bubble{position:absolute;top:-46px;left:-108px;width:108px;height:66px;background:#3c3c3c;z-index:100000023}
.tb-toolbar-item-bubble .tb-toolbar-item-arrow{top:14px;color:#3c3c3c}
.tb-toolbar-item-bubble-txt{float:left;width:100%;height:20px;overflow:hidden;color:#fff;font-size:12px;line-height:20px;text-align:center;margin-top:9px}
.tb-toolbar-item-bubble-btn{float:right;width:65px;height:20px;color:#fff;font-size:12px;line-height:18px;text-align:center;text-decoration:none!important;background:#ea3f34;border-radius:2px;margin-top:5px;margin-right:20px}
.tb-toolbar-item-bubble-btn:hover{background:#db0026}
.tb-toolbar-item-bubble-saw{position:absolute;width:3px;height:100%;left:-3px;top:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAKBAMAAACDCflEAAAAFVBMVEU8PDwAAAA8PDw8PDw8PDw8PDw8PDx41p5nAAAAB3RSTlP9AO2Qdj8SxtIcHQAAAB5JREFUCNdjEExgEHRgEGVgMGBgUAAiEAPIBQoCpQAilwJPnhEv4AAAAABJRU5ErkJggg==) right -2px repeat-y}
.tb-toolbar-item-bd-coupon{position:absolute;right:35px;width:300px;top:0;bottom:0;border:0;background-color:#f1f1f1;z-index:100000023;overflow-x:hidden;overflow-y:auto}
.ks-ie8 .tb-toolbar-item-bubble-btn{line-height:20px}
.tb-toolbar-item-cart{height:auto;*height:110px}
.tb-toolbar-item-hd-cart{height:auto;*height:110px;padding-bottom:5px}
.tb-toolbar-item-icon-cart{line-height:32px}
.tb-toolbar-item-label-cart{width:20px;height:50px;line-height:16px;padding:0;margin:0 auto}
.tb-toolbar-item-label-cart{color:#666}
.tb-toolbar-item-badge-cart{border-radius:10px;background-color:#f40;color:#fff;width:18px;height:18px;line-height:18px;text-align:center;margin:0 auto}
.tb-toolbar-item-border-cart{position:absolute;top:0;left:8px;height:108px;width:20px;border:1px dotted #bbb;border-width:1px 0}
.tb-toolbar-item-cart .tb-toolbar-item-bd{width:330px;background-color:#f1f1f1}
.tb-toolbar-history .tb-toolbar-item-bd{width:330px;background-color:#f1f1f1;overflow-x:hidden;overflow-y:auto}
.tb-toolbar .J_WangWang,.tb-toolbar .ww-light{display:none!important}
.tb-toolbar-item-hd-ww.tb-toolbar-ww-offline,.tb-toolbar-item-hd-ww.tb-toolbar-ww-offline:hover{color:#999}
.tb-toolbar-item-hd-ww,.tb-toolbar-item-hd-ww:hover{color:#1c9eff}
.tb-toolbar-ww-groups{color:#7C8994;background-color:#f1f1f1;border:1px solid #d6dce0;border-right:none;margin:0 auto;padding:10px 15px;min-height:34px}
.tb-toolbar-ww-groups li{margin:5px 0;position:relative}
.tb-toolbar-ww-groups a{color:#7C8994;vertical-align:top;line-height:18px;white-space:nowrap;padding-left:20px}
.tb-toolbar-ww-groups a:hover{text-decoration:none}
.tb-toolbar-ww-groups-status{background-image:url(../images/T15AD7FFFaXXbJnvQ_-130-60.gif);background-image:-webkit-image-set(url(../images/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x,url(../images/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);background-image:-moz-image-set(url(../images/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x,url(../images/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);background-image:-o-image-set(url(../images/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x,url(../images/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);background-image:-ms-image-set(url(../images/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x,url(../images/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);background-position:-80px -20px;background-repeat:no-repeat;width:20px;height:20px;position:absolute;top:-4px;left:-4px}
.tb-toolbar-ww-groups-status-online{background-position:-80px 0}
.tb-toolbar-item-bd-worthbuying{width:330px;overflow:auto}
.tb-toolbar-item-worthbuying .tb-toolbar-item-bd{width:330px;overflow:auto}
@font-face{font-family:huabei-pro;src:url(../images/font_1426125221_0773435.eot);src:url(../images/font_1426125221_0773435.eot?#iefix) format('embedded-opentype'),url(../images/font_1426125221_0773435.woff) format('woff'),url(../images/font_1426125221_0773435.ttf) format('truetype'),url(../images/font_1426125221_0773435.svg#iconfont) format('svg')}
.tb-toolbar-item-huabei-bd{background-color:#393939;padding:10px;width:300px}
.tb-toolbar-item-huabei-bd .yen{font-family:arial,sans-serif;font-style:normal}
.tb-toolbar-item-huabei-bd .huabei-wrap{width:300px;text-align:center}
.tb-toolbar-item-huabei-bd .huabei-hd{background-color:#dec387;margin-top:10px}
.tb-toolbar-item-huabei-bd .huabei-hd .my-title{color:#0d1111;padding:12px 0 11px 0;font-family:"microsoft yahei";font-size:16px}
.tb-toolbar-item-huabei-bd .huabei-hd .my-title img{padding:0 8px;margin-bottom:-2px}
.tb-toolbar-item-huabei-bd .huabei-hd .my-cash{border-top:1px dashed #393939;color:#0d1111;padding-bottom:15px}
.tb-toolbar-item-huabei-bd .huabei-hd .my-cash .t{font-size:50px;font-family:impact}
.tb-toolbar-item-huabei-bd .huabei-hd .my-cash .t .yen{font-size:30px;padding-right:12px}
.tb-toolbar-item-huabei-bd .huabei-hd .my-cash .b{font-family:simsun}
.tb-toolbar-item-huabei-bd .huabei-hd .my-msg{padding:47px 0 45px 0}
.tb-toolbar-item-huabei-bd .huabei-hd .gotoBtn{text-align:center}
.tb-toolbar-item-huabei-bd .huabei-hd .gotoBtn .gotoHuabeiUrl{display:inline-block;margin:10px auto 0;background-color:#434343;color:#fff;font-size:14px;padding:0 10px;line-height:26px;height:26px}
.tb-toolbar-item-huabei-bd .my-box{background-color:#535353;display:block;text-align:center;text-decoration:none;color:#fff;font-size:14px;font-family:"microsoft yahei","heiti sc";line-height:40px;margin-top:6px}
.tb-toolbar-item-huabei-bd .no-bg{background-color:transparent}
.tb-toolbar-item-huabei-bd .text-box{font-family:simsun;font-size:12px;line-height:22px;color:#a0a0a0;text-align:left;text-align:center}
.tb-toolbar-item-huabei-bd .text-box a{color:#a0a0a0;text-decoration:none}
.tb-toolbar-list .tb-toolbar-huabei{height:64px}
.tb-toolbar-list .tb-toolbar-huabei .tb-toolbar-item-hd{height:60px}
.tb-toolbar-list .tb-toolbar-huabei .huabei-font,.tb-toolbar-list .tb-toolbar-huabei .tb-tollbar-icon-huabei{font-family:huabei-pro}
.tb-toolbar-list .tb-toolbar-huabei .tb-toolbar-item-hd-active .tb-tollbar-icon-huabei{color:#dec387}
.tb-toolbar-list .tb-toolbar-huabei .tb-toolbar-item-label-huabei{width:36px}
分享到QQ
分享到微博
微信扫一扫
