免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
返回列表 發帖

Rank: 7Rank: 7Rank: 7

積分
5071 
威望
5071  
金錢
2845  
最後登錄
2025-4-20 

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老
1# 跳轉到 » 倒序看帖
打印
tT
无界發表於 2013-5-21 21:02 | 只看該作者

[分享] 左下角超酷导航&回到顶部二合一

先看效果：
daohang.gif

1、工具-数据调用-新建自定义模块，名称为“自定义_我的导航”。把下边代码放进去。
  1. <style type="text/css">
  2. ul,li{ margin:0px; padding:0px; list-style:none;}
  3. .navbox{ width:95px; height:auto;z-index:99; left:2px; bottom:5px;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); font-family: "微软雅黑";}
  4. .mj_nav{ width:93px; height:auto; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; padding-bottom:15px;}
  5. .mj_nav_bt{ width:93px; height:30px; background-color:#806f5f; font-size:14px; font-weight:bold; line-height:30px; text-align:center; color:#fde399; margin-bottom:10px;}
  6. .mj_nav_list{ width:83px; height:auto; padding:0px 5px;}
  7. .nav_span{ display:block; width:68px; padding-left:15px; height:24px; line-height:24px; background-image:url(http://fc06.deviantart.net/fs71/f/2013/141/b/1/2012821381792487_by_bjwujie-d66175k.gif); background-repeat:no-repeat; background-position:5px 8px; color:#594d42; font-size:14px; cursor: pointer;}
  8. .mj_sn{ background-position:5px -12px;}
  9. .mj_nav_list ul{ width:68px; height:auto; padding:0px 0px 15px 15px; display:none;}
  10. .mj_nav_list li{ width:68px; height:24px; line-height:24px; font-size:14px; overflow:hidden;}
  11. .mj_nav_list li a{ color:#0a57b7; text-decoration: underline;}
  12. .mj_nav_list li a:hover{ color: #FF6600;}
  13. .guanbi,.gotop{ width:93px; height:30px; line-height:30px; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; text-align:center; font-size:14px; color:#594d42; margin-top:3px; cursor: pointer;}
  14. .gotop{ display:none;}
  15. .zhangkai{ width:20px; height:auto; padding:10px 5px; line-height:20px; font-size:14px; text-align:center;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px; border:1px solid #806f5f; background-color:#f3f3f3; POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); z-index:100; left:0px; bottom:150px; display:none; cursor: pointer; color:#594d42;}
  16. .xx{ height:1000px;}
  17. </style>

  19. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
  20. <script type="text/javascript">
  21.    $(document).ready(function(){
  22.    $(".mj_nav_list span").click(function(){
  23.        $(".mj_nav_list span").not($(this)).removeClass("mj_sn");
  24.     $(this).toggleClass("mj_sn");
  25.     $(".mj_nav_list ul").not($(this).next()).slideUp();
  26.     $(this).next().slideToggle(500);
  27.     //$(this).next().toggle();
  28.    });
  29.    $(window).scroll(function(){
  30.       if ( $(window).scrollTop() > 50 ){
  31.                                 $(".gotop").fadeIn(800);
  32.                         } else {
  33.                                 $(".gotop").fadeOut(500);
  34.                         };
  35.    });
  36.    $(".gotop").click(function(){
  37.        $(window).scrollTop(0);
  38.    });
  39.    $(".guanbi").click(function(){
  40.        $(".navbox").hide();
  41.     $(".zhangkai").show();
  42.    });
  43.    $(".zhangkai").click(function(){
  44.        $(this).hide();
  45.     $(".navbox").show(500);
  46.    });
  47.    });
  48.     </script>

  50. <div class="navbox">
  51. <div class="mj_nav">
  52. <div class="mj_nav_bt">论坛导航</div>
  53. <div class="mj_nav_list">
  54. <span class="nav_span">TLB认知</span>
  55. <ul>
  56. <li><a href="/forumdisplay.php?fid=21">安装与插件</a></li>
  57. <li><a href="/forumdisplay.php?fid=20">官方文档</a></li>
  58. <li><a href="/forumdisplay.php?fid=19">中文教程</a></li>
  59. <li><a href="http://tlb.258club.com">俱乐部交友</a></li>
  60. <li><a href="http://tlb.258club.com">电影院</a></li>
  61. <li><a href="http://tlb.258club.com">宠物论坛</a></li>
  62. <li><a href="http://tlb.258club.com">开心论坛</a></li>
  63. <li><a href="http://tlb.258club.com">心理测试</a></li>
  64. <li><a href="http://tlb.258club.com">笑话吧</a></li>
  65. <li><a href="http://tlb.258club.com" >彩票论坛</a></li>
  66. <li><a href="http://tlb.258club.com">股票论坛</a></li>
  67. <li><a href="http://tlb.258club.com">电脑论坛</a></li>
  68. <li><a href="http://tlb.258club.com">公交线路</a></li>
  69. </ul>
  70. </div>

  72. <div class="mj_nav_list">
  73. <span class="nav_span">分类信息</span>
  74. <ul>
  75. <li><a href="http://tlb.258club.com">房屋出租</a></li>
  76. <li><a href="http://tlb.258club.com">招聘求职</a></li>
  77. <li><a href="http://tlb.258club.com">二手交易市场</a></li>
  78. <li><a href="http://tlb.258club.com" >商家优惠促销信息</a></li>
  79. <li><a href="http://tlb.258club.com">快捷订餐</a></li>
  80. <li><a href="http://tlb.258club.com">团购活动</a></li>
  81. <li><a href="http://tlb.258club.com">综合服务</a></li>
  82. <li><a href="http://tlb.258club.com">拼车信息</a></li>
  83. <li><a href="http://tlb.258club.com">商家通讯录</a></li>
  84. </ul>
  85. </div>

  87. <div class="mj_nav_list">
  88. <span class="nav_span">友情论坛</span>
  89. <ul>
  90. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  91. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  92. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  93. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  94. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  95. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  96. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  97. <li><a href="http://tlb.258club.com">XX论坛</a></li>
  98. </ul>
  99. </div>
  100. </div>

  102. <div class="gotop">返回顶部</div>
  103. <div class="guanbi">点击关闭</div>
  104. </div>

  106. <div class="zhangkai">论坛栏目导航</div>
複製代碼

板块名称和链接自行修改就OK。


2、打开discuz.htm模版找到
  1. $pluginhooks[index_header]
複製代碼

在下边加上

  2. {eval request('自定义_我的导航');}
複製代碼

即可
2

評分人數

收藏 分享
爱秀代码

Rank: 6Rank: 6

積分
1666 
威望
1666  
金錢
1127  
最後登錄
2014-11-16 
2#
xuan發表於 2013-5-21 23:20 | 只看該作者
你好強，謝謝分享
   請各位多多支持，謝謝ww

TOP

Rank: 8Rank: 8

積分
5886 
威望
5886  
金錢
5644  
最後登錄
2016-9-13 

論壇元老金牌會員高級會員中級會員
3#
达人小G發表於 2013-5-22 05:17 | 只看該作者
谢谢分享！
欢迎来我Q群玩耍，群号159218504，群号没有错哦

TOP

Rank: 2

積分
119 
威望
119  
金錢
102  
最後登錄
2016-8-26 
4#
mikumkiku發表於 2013-5-22 12:35 | 只看該作者
楼主好人！不像某些回复可见还要去他论坛又要回复可见

TOP

Rank: 7Rank: 7Rank: 7

積分
8671 
威望
8671  
金錢
10089  
最後登錄
2025-4-18 

中級會員高級會員金牌會員論壇元老正式版主資深版主熱心會員
5#
4rphotoclub發表於 2013-5-23 10:35 | 只看該作者
這真是很棒的東西啊

努力加油
歡迎大家齊來加入4R網上攝影會

TOP

Rank: 3Rank: 3

積分
380 
威望
380  
金錢
178  
最後登錄
2015-4-10 
6#
葱葱發表於 2015-2-15 04:37 | 只看該作者
回復 1# 无界


    这个有效果哦 不错 但是怎么好像只在首页显示？求指教

TOP

返回列表