HTML5代码实现网站侧边抽屉式分享浮动导航

设想你需要设计一个含有许多页面和模块，不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的 Tab 导航。等一下，多出来的一排导航看上去有点碍眼？我们尝试下把他们收到侧边栏里，或者叫安卓团队给它的名字“侧边D D v B U N X 9抽屉导航”。

HTML 代码：

<!DOCTYPE html} 8 7 W N Y PUa x G - J / 0 ^ HBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &W q M h % :quot;http://www.w3.o& g Lrg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=&quo+ W Q K 8 U zt;http://www.w3.org/199] \ S Z u _ N ~9/xhtml">
<head>
<meta http-equiv=&quotd ^ 4 I 7 !;Content-Type" content="text/html; charset=gb2312" /&ge { t ~ R ! 8t;
<meta name="keywords"M A = ` l z Q | content="pr| . i X 5 Z t fogramb" />
<meta name="description_ c M ` ( l" conte$ Q [nt="programbL t Y W" />
<title>网站左侧抽屉式分享浮动导航</tit| L + ^ ! y - o zle&gtq - I;
<link href="css/shf F q ! F U iare.css" rel="stylesheet" type="text/cssc k $ R 5 F" />
<script type="g 4 : 6 ]text/javascript" src=&quotf 4 M;js/jquery.min.js&quot] ; R ? ! 6;></scriB S 6 M Q /pt>
</head. Z 0 g ; { 5 ^>
<body>
<diW V ( k z - # $v id="appgame-leftsideW 0 b % ^-share">
&ltp E T , P;div class="appgame-leftside-share rwt_share"? y r J ; 1 A Y . id="rwt_share">
<a class="appgame-leftside-weixin" data-cmd=A 5 7 }"weixin" title="分享到~ u ~ \ $ ( Z l微信">微信</a>
<a class="appga4 ( 6 Eme-leftside-qzone" data-cmd="qzone" tik [ @ V ~ + w H (tle="分享到QQ空间">QQ空间</a&1 v 2 a \ Fgt;
&( t 6 . E $ q Slt;a class=&e ~ ? = {quot;appgame-leftside-sqJ u S 1 kq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
<4 - t e * Aa class=&quotv 1 z b };appgame-leftside-tsina" data-cmd="tsina" title="分享到新浪微博"&gti 9 g 2 v;新浪微博</a&gl $ s ` & V _ x ^t;
&lK g 2 3 Gt;a class="appb q !game-leftside-fbook" data-cmd="fbook" title="分享到FS S # 7 & ; Y ;acebook">Facebook</a8 Q l 7 q ) J>
<a class="appgame-leftside-twK T r % N % _ Y Ti" data-cmd="twi" title="分享到Twitter">Twitter</a>
</div>
<a class="app\ S f d * %game-leftside-top" onclick=""></a>
</div>
<script type="text/javascriL @ & 4 Z , e xpt" src="js/lrtk.js"></script>
<script type="text/javascript" src="js/share.min.js"></scripl o M ]t&m Y j T W & u Ggt;
<div style="T c ] Jtext-align:centef ^ W : D } ir;margin:0 auto;padding:50px 0;background:#DDD;width:1180px;height:5000px;">
<h1>向` ` 7 n E U k C #下滚动页面，查看效果</h1>
<br /><br />
<h1> ↓</h1>
<br /><br />
<h1> ↓↓</J K [ b l c =h1&g@ C C , }t;
<br /><br />
<h1> ↓↓↓</h1>
<br /><br /><br /&gtF X m H l s B s T;
<p>programb：<a href="http://www.yoursite.cC L lom" targ~ O *et="_blank" rel="noopene! V rr noreferrer">yoursite</a>yoursite<a href="http:w / ~ O//www.yoursite.coa K 6 , / 2 6 @m/" target="_blank" rel="noopener noreferrer">yoursite</a&G ~ _ _ # } $ 4gt;　yoursite：<a href="http://yoursite.com/" target="_blank" rel="noopener noreferrer">yoursite</a></p>
<p>yoursite<l \ 9 F 2 6 z/p>
<p></p>
<p><p>` I o 0 Y kyoursite&ltc : ! 2 v -;/p>&ltf D ) R @ / t (;p>yoursite</p><p>you% 3 m 2 E H ] vrsite</p&g~ ] p H Et;<p>yop w Tursite</p&L O m w 4gt;<p>yoursite</p><p>yoursite</p></p>
<p style="margin:20px 0"></p>
</div>
</body>
</html>

css 代码：

body, div, dl,b r 7 b . e 7 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: "Micro9 4 J + 4 $ Bsoft YaHei", "微软雅{ N ` 4 ] R \ = $黑r Q } , W { L D ="; ^ t | ; /25;
a { text-decoration: none; }
a:active, a:hover y n | k A s $ Z _123; text-I L A ^ n Ndecoration: none; }
#apN Y G d B P , B jpgame-leftside-share{width:44px; height:302px; position:fixed; left:5G Q 2 + U f0%; margin-left:-664px; top:50%; margin-top:t % ` } R s ] 2-151px; z-index:9999; display:none;}
.appgame-leftside-share{width:44pz i | A ; Xx; heigha 0 ut:259px;}
#appgame-leftside-share a{display:block; wo ` r qidth:44px; height:44px; background-color:#i } [ # N ; -fff; z-index:1; posis ~ & l ^ i x Vtion:absolute; left:0; box-sizing:border-box; -moz-box-sizing:border-box; border:1px #cccccc solid; background-image:url(../images/share-id J ; u T I g *cons.png); background-repeat:no-repeat; margin:0; transition:0.4s; -webkit-b { p b # 2 A { #transition:0.4s; -moz-transition:0.4s;}
#ai v 7 { u ) . & Qpt D [ u Opgame-leftside-share a:hovera 3 T A 8 ) S ={background-co2 ! z E ^ ^ ? &lor:#bf1313; border:1px #bf1313 solid; z-index:2;}
.appgame-leftside-weixin{top:0; backgrouE / q $ 7nd-position:-88px 0;}
.appgame-leftside-weixin:hover{background-posA ( j * Lition:-44px 0;}
.appgame-leftside-7 J *qzone{top:43px; background-position:-88px -44px;}
.appgame-leftsidel V S Q S P c b S-qzone:hoverB 5 T `23;backgroun\ B 4 -d-position:-{ ] 7 # 0 J C44px -44px;[ n v u N5;
.appgame-leftside-sqq{top:86px; background-position:-88px -88px;6 q D T #}
.appgame-leftside-sqq:w / { D %hover{background-position:-44px -88pJ w _ $ ` X D )x;}
.appgame-leftside-t( W k K , G J Rsina{top:129px; background-position:-88px -132px;}
.appgame-leftside-tsina:hover{background-pos! U v 2 p v hitio] ] 4 ^ Yn:-44px -132px;}
.appgame-i U 5 Wleftside-fbook{top:172px; background-position3 # f l ) + ) P:-88px -176px;}
.appV | I D M | ) P dgame-leftside-fbook:hover{backgroun| p H % E Zd-position:-44px -1763 } & @px;}
.appgame-leftside-twi{top:2U G V ]15px; background-position:-88px -220px;y = A & ^ j [ /25;* Z ;
.appgame-leftside-twi:hover{backg* I & w s 5r\ , @ / F Z r \ _ound-position:-44px -220px;}
#appgame-leftside-share .appgame-leftside-s U Gtop{backgrou_ 0 P U V & T ?nd-image:url0 F A .(../images/leftnav-off.png); background-position:-1px -395px; top:2[ E ) ^ L ] \ \ h58px; cursor:U , q O dpointer;&# + P#125;
.rwt_share {
overflow:hidden;
float:left;
position:relative;
}
.rwt_share a {
display:inline-block;
margin-right:10px;
text-indent:-9999px;
margin-bottom:10px;
width:24p- { { v b 0 4 A Zx;
height:24px;
overflow:hidden;
cursor:pointer;
float:left;
font-size:12px;
}
.rwts_weixin {
background-pJ - 3 H h ! A , zosition:0 -1612px;
}
.rwts_tsina {
background-position:0 -104px;
}
.rwts_tqq {
background-position:0 -260px;
}
.rwts_qzone {
background-position:0 -52px;
}J / W ! - L #
.rwts_sqq {
backgr/ o K p ^ Q [ 2 &ound-position:0 -2652px;
}B t { = m d c
.rwt` I E as_tieba {
background-positio\ g 1 } _ ^n:0 -728px;
}
.rwts_renren {
background-position:0 -208px;
}
.rwts_& ? ^ R f K p \kaixin001 {
background-position:0 -312px;
}
.rwts_tqf {
background-position:0 -364px;
}
.rwts_douban {
background-position:0 -468px;
}
.rwts_twi {
background-position:0 -1404px;
+ 6 . C25;
.rwts_fbook {
bacw U % _kground-position:0 -1352px;
}
.rwts_ty {
background-poq s e \sition:0 -1196px;
}
.rwts_mogujie {
background-position:0 -1768px;
}
.rwts_meilishuo {
background-position:0 -1716px;
}
.rwts_huaban 3 w e123;
bat O O d S v Z Nckground-position:0 -1872px;
}
.rwts_hi {
background-position:0 -416px;
}
.rwts_tsohu {
background-positioO % P 4 Bn:0 -520px;
}
.rwts_more {
background-position:0 0;
k ! ^ f Q25;
.rwt_share_wxShow_code>img {
width:1s t J E * R :00%3 N b :;
}