仿X2 ➟板块浏览页面的板块导航

需要安装JQ库➟➟JQuery安装，已经安装可以忽略。

进入后台 ➟工具 ➟数据调用 ➟新建自由代码，名称：

1. 自由代码_板块导航

复制代码

内容：

1. <style>/*---------------------板块导航----------------------------------------*/
   
2. #forumdisplay .with_side .main{margin-left: -140px!important;}
   
3. #forumdisplay .with_side .content{margin-left: 140px!important;}
   
4. #forumdisplay .with_side .side{width: 140px!important;}
   
5. .a dd{display:none}
   
6. .bdl{float:left;overflow:hidden;border:1px solid #ffcc66;background-color:#F5F9FB;}
   
7. .ie6 .bdl{position:relative;}
   
8. .bdl_h{height:32px;line-height:22px;}
   
9. .bdl .tbn{margin:10px;}
   
10. .bdl dl{margin:-1px -10px 0;}
    
11. .bdl dt{overflow:hidden;height:27px;line-height:27px;border:solid #ffcc66;border-width:1px 0;background:#F5F9FB url(https://kuchingshare.my/other/p/zypic.png) repeat-x 100% 0;}
    
12. .bdl dt a{display:block;padding:0 15px 0 10px;font-weight:bold;color:#000000!important;}
    
13. .bdl dt a:hover,.bdl_a a:hover{text-decoration:none;}
    
14. .bdl dd{display:none;}
    
15. .bdl dd a{display:block;margin:0 3px;padding:0 7px;height:26px;line-height:26px;overflow:hidden;}
    
16. .bdl dl.a{padding-bottom:4px;background-color:#FFF;}
    
17. .bdl dl.a dt{margin-bottom:3px;background-position:100% -27px;}
    
18. .bdl dl.a dd,.bdl_fav dd{display:block;overflow:hidden;zoom:1;}
    
19. .bdl dd.bdl_a a{font-weight:700;}
    
20. .bdl dd.bdl_a,.bdl dd:hover{background:#ffcc66;}
    
21. .bdl dd{border-bottom:#ffcc66 1px dashed;}
    
22. </style>
    
23. <div id="sd_bdl" class="bdl" style="width:130px;">
    
24. <div class="tbn" id="forumleftside"><h2 class="bdl_h">版块导航</h2>
    
25. <dl class="" id="lf_49">
    
26. <dt><a href="javascript:;" hidefocus="true" onclick="leftside('lf_49')" title="章鱼博客">章鱼博客</a></dt>
    
27. <dd>
    
28. <a href="/forum-50-1.html" title="章鱼博客">章鱼博客</a>
    
29. </dd>
    
30. </dl>
    
31. <dl class="" id="lf_16">
    
32. <dt><a href="javascript:;" hidefocus="true" onclick="leftside('lf_16')" title="Discuz!专区">Discuz!专区</a></dt><dd>
    
33. <a href="/forum-17-1.html" title="SCLUB代码">SCLUB代码</a>
    
34. </dd>
    
35. <dd>
    
36. <a href="/forum-8-1.html" title="5d6d代码">5d6d代码</a>
    
37. </dd>
    
38. <dd>
    
39. <a href="/forum-75-1.html" title="申请代整">申请代整</a>
    
40. </dd>
    
41. <dd>
    
42. <a href="/forum-19-1.html" title="疑问解答">疑问解答</a>
    
43. </dd>
    
44. <dd>
    
45. <a href="/forum-55-1.html" title="SCLUB插件">SCLUB插件</a>
    
46. </dd>
    
47. <dd>
    
48. <a href="/forum-20-1.html" title="插件资讯">插件资讯</a>
    
49. </dd>
    
50. <dd>
    
51. <a href="/forum-58-1.html" title="内测插件">内测插件</a>
    
52. </dd>
    
53. </dl>
    
54. <dl class="" id="lf_999">
    
55. <dt><a href="javascript:;" hidefocus="true" onclick="leftside('lf_999')" title="SCLUB插件">SCLUB插件</a></dt>
    
56. <dd>
    
57. <a href="/forum-47-1.html" title="宠物中心">宠物中心</a>
    
58. </dd>
    
59. <dd>
    
60. <a href="/forum-53-1.html" title="许愿墙">许愿墙</a>
    
61. </dd>
    
62. <dd>
    
63. <a href="/forum-56-1.html" title="积分进度条">积分进度条</a>
    
64. </dd>
    
65. <dd>
    
66. <a href="/forum-57-1.html" title="7钻点亮">7钻点亮</a>
    
67. </dd>
    
68. <dd>
    
69. <a href="/forum-59-1.html" title="首页7格帖子调用">首页7格帖子调用</a>
    
70. </dd>
    
71. <dd>
    
72. <a href="/forum-67-1.html" title="论坛际遇">论坛际遇</a>
    
73. </dd>
    
74. <dd>
    
75. <a href="/forum-71-1.html" title="章鱼音乐播放器">章鱼音乐播放器</a>
    
76. </dd>
    
77. <dd>
    
78. <a href="/forum-72-1.html" title="@呼我插件">@呼我插件</a>
    
79. </dd>
    
80. <dd>
    
81. <a href="/forum-74-1.html" title="名人堂">名人堂</a>
    
82. </dd>
    
83. </dl>
    
84. <dl class="" id="lf_5">
    
85. <dt><a href="javascript:;" hidefocus="true" onclick="leftside('lf_5')" title="章鱼之家">章鱼之家</a></dt>
    
86. <dd>
    
87. <a href="/forum-6-1.html" title="LF2专区">LF2专区</a>
    
88. </dd>
    
89. <dd>
    
90. <a href="/forum-7-1.html" title="QQT专区">QQT专区</a>
    
91. </dd>
    
92. </dl>
    
93. <dl class="" id="lf_10">
    
94. <dt><a href="javascript:;" hidefocus="true" onclick="leftside('lf_10')" title="杂类版块">杂类版块</a></dt>
    
95. <dd>
    
96. <a href="/forum-11-1.html" title="新手报到">新手报到</a>
    
97. </dd>
    
98. <dd>
    
99. <a href="/forum-13-1.html" title="站务管理">站务管理</a>
    
100. </dd>
     
101. <dd>
     
102. <a href="/forum-26-1.html" title="聊天灌水">聊天灌水</a>
     
103. </dd>
     
104. <dd>
     
105. <a href="/forum-48-1.html" title="笑话专区">笑话专区</a>
     
106. </dd>
     
107. <dd>
     
108. <a href="/forum-14-1.html" title="每日签到">每日签到</a>
     
109. </dd>
     
110. </dl>
     
111. <dl class="" id="lf_3">
     
112. <dt><a href="javascript:;" hidefocus="true" onclick="leftside('lf_3')" title="管理员专区">管理员专区</a></dt>
     
113. <dd>
     
114. <a href="/forum-4-1.html" title="管理员会议室">管理员会议室</a>
     
115. </dd>
     
116. <dd>
     
117. <a href="/forum-24-1.html" title="数据记录">数据记录</a>
     
118. </dd>
     
119. <dd>
     
120. <a href="/forum-25-1.html" title="附件储存">附件储存</a>
     
121. </dd>
     
122. </dl>
     
123. </div>
     
124. </div>
     
125. <script>
     
126. function leftside(id) {
     
127. aa=$("umenu").innerHTML
     
128. //$jq("#"+id+" dd").toggle(300)
     
129. $(id).className = $(id).className == 'a' ? '' : 'a';
     
130. if(id == 'lf_fav'){
     
131. setcookie('leftsidefav', $(id).className == 'a' ? 0 : 1, 2592000);
     
132. }
     
133. }
     
134. $jq("#sd_bdl a[href='/forum-"+fid+"-1.html']").parent().parent()[0].className="a"
     
135. $jq("#sd_bdl a[href='/forum-"+fid+"-1.html']").parent()[0].className="bdl_a"
     
136. </script>

复制代码

然后把他加入主题的边栏即可。


文章来源：zyhome.66rt.com