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

2021-05-22 0 1,363 百度已收录

设想你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的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. }

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 HTML5代码实现网站侧边抽屉式分享浮动导航 https://zhutizhen.com/14841.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章