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

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

HTML 代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <meta name="keywords" content="programb" />
  6. <meta name="description" content="programb" />
  7. <title>网站左侧抽屉式分享浮动导航</title>
  8. <link href="css/share.css" rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="js/jquery.min.js"></script>
  10. </head>
  11. <body>
  12. <!-- 代码 开始 -->
  13. <div id="appgame-leftside-share">
  14.     <div class="appgame-leftside-share rwt_share" id="rwt_share">
  15.         <a class="appgame-leftside-weixin" data-cmd="weixin" title="分享到微信">微信</a>
  16.         <a class="appgame-leftside-qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
  17.         <a class="appgame-leftside-sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
  18.         <a class="appgame-leftside-tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
  19.         <a class="appgame-leftside-fbook" data-cmd="fbook" title="分享到Facebook">Facebook</a>
  20.         <a class="appgame-leftside-twi" data-cmd="twi" title="分享到Twitter">Twitter</a>
  21.     </div>
  22.         <a class="appgame-leftside-top" onclick=""></a>
  23. </div>
  24. <script type="text/javascript" src="js/lrtk.js"></script>
  25. <script type="text/javascript" src="js/share.min.js"></script>
  26. <!-- 代码 结束 -->
  27. <div style="text-align:center;margin:0 auto;padding:50px 0;background:#DDD;width:1180px;height:5000px;">
  28. <h1>向下滚动页面,查看效果</h1>
  29. <br /><br />
  30. <h1></h1>
  31. <br /><br />
  32. <h1> ↓↓</h1>
  33. <br /><br />
  34. <h1> ↓↓↓</h1>
  35. <br /><br /><br />
  36. <p>programb:<a href="http://www.yoursite.com" target="_blank" rel="noopener noreferrer">yoursite</a>yoursite<a href="http://www.yoursite.com/" target="_blank" rel="noopener noreferrer">yoursite</a> yoursite:<a href="http://yoursite.com/" target="_blank" rel="noopener noreferrer">yoursite</a></p>
  37. <p>yoursite</p>
  38. <p></p>
  39. <p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p><p>yoursite</p></p>
  40. <p style="margin:20px 0"></p>
  41. </div>
  42. </body>
  43. </html>

css 代码:

  1. 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; }
  2. body{ font-family: "Microsoft YaHei", "微软雅黑"; }
  3. a { text-decoration: none; }
  4. a:active, a:hover { text-decoration: none; }
  5. #appgame-leftside-share{width:44px; height:302px; position:fixed; left:50%; margin-left:-664px; top:50%; margin-top:-151px; z-index:9999; display:none;}
  6. .appgame-leftside-share{width:44px; height:259px;}
  7. #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;}
  8. #appgame-leftside-share a:hover{background-color:#bf1313; border:1px #bf1313 solid; z-index:2;}
  9. .appgame-leftside-weixin{top:0; background-position:-88px 0;}
  10. .appgame-leftside-weixin:hover{background-position:-44px 0;}
  11. .appgame-leftside-qzone{top:43px; background-position:-88px -44px;}
  12. .appgame-leftside-qzone:hover{background-position:-44px -44px;}
  13. .appgame-leftside-sqq{top:86px; background-position:-88px -88px;}
  14. .appgame-leftside-sqq:hover{background-position:-44px -88px;}
  15. .appgame-leftside-tsina{top:129px; background-position:-88px -132px;}
  16. .appgame-leftside-tsina:hover{background-position:-44px -132px;}
  17. .appgame-leftside-fbook{top:172px; background-position:-88px -176px;}
  18. .appgame-leftside-fbook:hover{background-position:-44px -176px;}
  19. .appgame-leftside-twi{top:215px; background-position:-88px -220px;}
  20. .appgame-leftside-twi:hover{background-position:-44px -220px;}
  21. #appgame-leftside-share .appgame-leftside-top{background-image:url(../images/leftnav-off.png); background-position:-1px -395px; top:258px; cursor:pointer;}
  22. .rwt_share {
  23.     overflow:hidden;
  24.     float:left;
  25.     position:relative;
  26. }
  27. .rwt_share a {
  28.     display:inline-block;
  29.     margin-right:10px;
  30.     text-indent:-9999px;
  31.     margin-bottom:10px;
  32.     width:24px;
  33.     height:24px;
  34.     overflow:hidden;
  35.     cursor:pointer;
  36.     float:left;
  37.     font-size:12px;
  38. }
  39. .rwts_weixin {
  40.     background-position:0 -1612px;
  41. }
  42. .rwts_tsina {
  43.     background-position:0 -104px;
  44. }
  45. .rwts_tqq {
  46.     background-position:0 -260px;
  47. }
  48. .rwts_qzone {
  49.     background-position:0 -52px;
  50. }
  51. .rwts_sqq {
  52.     background-position:0 -2652px;
  53. }
  54. .rwts_tieba {
  55.     background-position:0 -728px;
  56. }
  57. .rwts_renren {
  58.     background-position:0 -208px;
  59. }
  60. .rwts_kaixin001 {
  61.     background-position:0 -312px;
  62. }
  63. .rwts_tqf {
  64.     background-position:0 -364px;
  65. }
  66. .rwts_douban {
  67.     background-position:0 -468px;
  68. }
  69. .rwts_twi {
  70.     background-position:0 -1404px;
  71. }
  72. .rwts_fbook {
  73.     background-position:0 -1352px;
  74. }
  75. .rwts_ty {
  76.     background-position:0 -1196px;
  77. }
  78. .rwts_mogujie {
  79.     background-position:0 -1768px;
  80. }
  81. .rwts_meilishuo {
  82.     background-position:0 -1716px;
  83. }
  84. .rwts_huaban {
  85.     background-position:0 -1872px;
  86. }
  87. .rwts_hi {
  88.     background-position:0 -416px;
  89. }
  90. .rwts_tsohu {
  91.     background-position:0 -520px;
  92. }
  93. .rwts_more {
  94.     background-position:0 0;
  95. }
  96. .rwt_share_wxShow_code>img {
  97.     width:100%;
  98. }

 

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/80463

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买