HTML5系列代码：网站侧边抽屉式分享浮动导航

滑动继续阅读⇓

<!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=gb2312" />
<meta name="keywords" content="programb" />
<meta name="description" content="programb" />
<title>网站左侧抽屉式分享浮动导航</title>
<link href="css/share.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="appgame-leftside-share">
    <div class="appgame-leftside-share rwt_share" id="rwt_share">
        <a class="appgame-leftside-weixin" data-cmd="weixin" title="分享到微信">微信</a>
        <a class="appgame-leftside-qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
        <a class="appgame-leftside-sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
        <a class="appgame-leftside-tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
        <a class="appgame-leftside-fbook" data-cmd="fbook" title="分享到Facebook">Facebook</a>
        <a class="appgame-leftside-twi" data-cmd="twi" title="分享到Twitter">Twitter</a>
    </div>
        <a class="appgame-leftside-top" onclick=""></a>
</div>
<script type="text/javascript" src="js/lrtk.js"></script>
<script type="text/javascript" src="js/share.min.js"></script>
<!-- 代码 结束 -->

<div style="text-align:center;margin:0 auto;padding:50px 0;background:#DDD;width:1180px;height:5000px;">
<h1>向下滚动页面，查看效果</h1>
<br /><br />
<h1> ↓</h1>
<br /><br />
<h1> ↓↓</h1>
<br /><br />
<h1> ↓↓↓</h1>
<br /><br /><br />
<p>programb：<a href="http://www.yoursite.com" target="_blank">yoursite</a>yoursite<a href="http://www.yoursite.com/" target="_blank">yoursite</a>　yoursite：<a href="http://yoursite.com/" target="_blank">yoursite</a></p>
<p>yoursite</p>
<p></p>
<p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p></p>
<p style="margin:20px 0"></p>
</div>
</body>
</html>

css代码：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0; }
body{ font-family: "Microsoft YaHei", "微软雅黑"; }
a { text-decoration: none; }
a:active, a:hover { text-decoration: none; }

#appgame-leftside-share{width:44px; height:302px; position:fixed; left:50%; margin-left:-664px; top:50%; margin-top:-151px; z-index:9999; display:none;}
.appgame-leftside-share{width:44px; height:259px;}
#appgame-leftside-share a{display:block; width:44px; height:44px; background-color:#fff; z-index:1; position:absolute; left:0; box-sizing:border-box; -moz-box-sizing:border-box; border:1px #cccccc solid; background-image:url(../images/share-icons.png); background-repeat:no-repeat; margin:0;  transition:0.4s; -webkit-transition:0.4s; -moz-transition:0.4s;}
#appgame-leftside-share a:hover{background-color:#bf1313; border:1px #bf1313 solid; z-index:2;}
.appgame-leftside-weixin{top:0; background-position:-88px 0;}
.appgame-leftside-weixin:hover{background-position:-44px 0;}
.appgame-leftside-qzone{top:43px; background-position:-88px -44px;}
.appgame-leftside-qzone:hover{background-position:-44px -44px;}
.appgame-leftside-sqq{top:86px; background-position:-88px -88px;}
.appgame-leftside-sqq:hover{background-position:-44px -88px;}
.appgame-leftside-tsina{top:129px; background-position:-88px -132px;}
.appgame-leftside-tsina:hover{background-position:-44px -132px;}
.appgame-leftside-fbook{top:172px; background-position:-88px -176px;}
.appgame-leftside-fbook:hover{background-position:-44px -176px;}
.appgame-leftside-twi{top:215px; background-position:-88px -220px;}
.appgame-leftside-twi:hover{background-position:-44px -220px;}
#appgame-leftside-share .appgame-leftside-top{background-image:url(../images/leftnav-off.png); background-position:-1px -395px; top:258px; cursor:pointer;}

.rwt_share {
    overflow:hidden;
    float:left;
    position:relative;
}
.rwt_share a {
    display:inline-block;
    margin-right:10px;
    text-indent:-9999px;
    margin-bottom:10px;
    width:24px;
    height:24px;
    overflow:hidden;
    cursor:pointer;
    float:left;
    font-size:12px;
}
.rwts_weixin {
    background-position:0 -1612px;
}
.rwts_tsina {
    background-position:0 -104px;
}
.rwts_tqq {
    background-position:0 -260px;
}
.rwts_qzone {
    background-position:0 -52px;
}
.rwts_sqq {
    background-position:0 -2652px;
}
.rwts_tieba {
    background-position:0 -728px;
}
.rwts_renren {
    background-position:0 -208px;
}
.rwts_kaixin001 {
    background-position:0 -312px;
}
.rwts_tqf {
    background-position:0 -364px;
}
.rwts_douban {
    background-position:0 -468px;
}
.rwts_twi {
    background-position:0 -1404px;
}
.rwts_fbook {
    background-position:0 -1352px;
}
.rwts_ty {
    background-position:0 -1196px;
}
.rwts_mogujie {
    background-position:0 -1768px;
}
.rwts_meilishuo {
    background-position:0 -1716px;
}
.rwts_huaban {
    background-position:0 -1872px;
}
.rwts_hi {
    background-position:0 -416px;
}
.rwts_tsohu {
    background-position:0 -520px;
}
.rwts_more {
    background-position:0 0;
}
.rwt_share_wxShow_code>img {
    width:100%;
}

示例：

HTML5系列代码：网站侧边抽屉式分享浮动导航