[原创]【下拉＋横排】下拉菜单横排显示 FOR D4.0（12.19更新）

思路：
1，纯的下拉用的多了，没有新意了，换个模式显示。
2，借鉴来自vb论坛的菜单模式。
3，也同样实现了插件自动加到菜单（嘿嘿，实际那个插件循环没有改变，简单易用）


演示：http://www.52kaka.com/bbs


问题解答：2楼


安装步骤：

1，上传2个js文件到include文件夹里面
2，修改header.htm
查找：

1. <script language="JavaScript" src="include/common.js"></script>

复制代码

下面加入：

1. 
   
2. <script language="JavaScript" type="text/JavaScript" src="include/xs_menu.js"></script>
   
3. <SCRIPT language="JavaScript" type="text/JavaScript"  src="include/xs.js"></script>
   

复制代码

查找：

1. 
   
2. <!--{loop $plugins['links'] $plugin}-->
   
3.         <!--{loop $plugin $module}-->
   
4.              <!--{if !$module['adminid'] || ($module['adminid'] && $adminid > 0 && $module['adminid'] >= $adminid)}-->| $module[url] <!--{/if}-->
   
5.         <!--{/loop}-->
   
6. <!--{/loop}-->
   

复制代码

替换成：

1. 
   
2. <!-- //插件菜单横排显示 By 笑申 Modify 2005.12.17 -->
   
3. | <A id="navbar_search" href="http://www.realmadrid.cc/bbs/index.php" rel=nofollow>娱乐插件</A>
   
4. <SCRIPT type=text/javascript> vbmenu_register("navbar_search"); </SCRIPT>
   
5. 
   
6. <STYLE id="vbulletin_css" type="text/css">
   
7. .thead {
   
8.         BACKGROUND: url({IMGDIR}/topbg.gif) #5c7099 repeat-x left top; FONT: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; COLOR: #ffffff
   
9. }
   
10. .thead A:link {
    
11.         COLOR: #ffffff
    
12. }
    
13. .thead A:visited {
    
14.         COLOR: #ffffff
    
15. }
    
16. .thead A:hover {
    
17.         COLOR: #ffff00
    
18. }
    
19. .thead A:active {
    
20.         COLOR: #ffff00
    
21. }
    
22. .vbmenu_option {
    
23.         BACKGROUND: #bbc7ce; FONT: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; COLOR: #22229c; WHITE-SPACE: nowrap
    
24. }
    
25. .vbmenu_option A:link {
    
26.         COLOR: #22229c; TEXT-DECORATION: none
    
27. }
    
28. .vbmenu_option A:visited {
    
29.         COLOR: #22229c; TEXT-DECORATION: none
    
30. }
    
31. .vbmenu_option A:hover {
    
32.         COLOR: #ffffff; TEXT-DECORATION: none
    
33. }
    
34. .vbmenu_option A:active {
    
35.         COLOR: #ffffff; TEXT-DECORATION: none
    
36. }
    
37. </style>
    
38. <DIV class="vbmenu_popup" id="navbar_search_menu" style="DISPLAY: none">
    
39.       <TABLE cellSpacing="1" cellPadding="4" border="0">
    
40.         <TBODY>
    
41.         <TR>
    
42.           <TD class="thead">
    
43. <!--{loop $plugins['links'] $plugin}-->
    
44.         <!--{loop $plugin $module}-->
    
45.              <!--{if !$module['adminid'] || ($module['adminid'] && $adminid > 0 && $module['adminid'] >= $adminid)}-->| $module[url] <!--{/if}-->
    
46.         <!--{/loop}-->
    
47. <!--{/loop}-->
    
48. 
    
49. <!-- //这里加入那些直接写链接的插件的名字-->
    
50. | <a href="freddy.php">万年历</a>
    
51. | <a href="wish.php">许愿池</a>
    
52. | <a href="z_cup.php">足球博彩</a>
    
53. <!-- //这里加入那些直接写链接的插件的名字-->
    
54. 
    
55. </TD></TR>
    
56. </TBODY></TABLE>
    
57. </DIV>
    
58. <SCRIPT type="text/javascript">
    
59. <!--
    
60.         // Main vBulletin Javascript Initialization
    
61.         vBulletin_init();
    
62. //-->
    
63. </SCRIPT>
    
64. <!-- //插件菜单横排显示 By 笑申 Modify 2005.12.17 -->
    

复制代码

[ 本帖最后由 笑申 于 2005-12-19 22:19 编辑 ]

问题集中解答：
1，用官网的模板的问题，请修改：

1. <td rowspan="2" valign="top"><a href="index.php">{BOARDLOGO}</a></td>

复制代码

去掉

1. rowspan="2"

复制代码

就是因为这个rowspan的问题，我也很迷糊

2，去掉小图片

请下载附件2

3，链接自行修改

1. | <A id="navbar_search" href="http://www.52kaka.com/bbs" rel=nofollow>娱乐插件</A>

复制代码

这个链接可以自己修改，其实这个href并没有实际意义的，写成#也可。

4，这是把没有自动加入plugins的链接加上。自己修改里面的链接吧：）

1. 
   
2. <!-- //这里加入那些直接写链接的插件的名字-->
   
3. | <a href="freddy.php">万年历</a>
   
4. | <a href="wish.php">许愿池</a>
   
5. | <a href="z_cup.php">足球博彩</a>
   
6. <!-- //这里加入那些直接写链接的插件的名字-->
   

复制代码

关于竖行下拉菜单的，有人问我，我也贴个小教程

下拉菜单

1，修改common.js

最后加上

1. //-->
   
2. 
   
3. 
   
4. <!--
   
5. 
   
6. var h;
   
7. 
   
8. var l;
   
9. 
   
10. var t;
    
11. 
    
12. var isvisible;
    
13. 
    
14. function HideMenu()
    
15. 
    
16. {
    
17. 
    
18. var mX;
    
19. 
    
20. var mY;
    
21. 
    
22. var vDiv;
    
23. 
    
24.     if (isvisible == true)
    
25. 
    
26. {
    
27.         vDiv = document.all("menuDiv");
    
28. 
    
29.         mX = window.event.clientX + document.body.scrollLeft;
    
30. 
    
31.         mY = window.event.clientY + document.body.scrollTop;
    
32. 
    
33.         if ((mX < parseInt(vDiv.style.left)) || (mX > parseInt(vDiv.style.left)+vDiv.offsetWidth) || (mY < parseInt(vDiv.style.top)-h) || (mY > parseInt(vDiv.style.top)+vDiv.offsetHeight)){
    
34. 
    
35.             vDiv.style.visibility = "hidden";
    
36. 
    
37.             isvisible = false;
    
38. 
    
39.         }
    
40. 
    
41.     }
    
42. 
    
43. }
    
44. 
    
45. function ShowMenu(vMnuCode) {
    
46. 
    
47.     vSrc = window.event.srcElement;
    
48. 
    
49.     vMnuCode = "<DIV style='PADDING-RIGHT: 6px; FILTER: shadow(color=#CCCCCC,direction=120); PADDING-BOTTOM: 6px;width:68px'><table border=0 cellspacing=1 cellpadding=4 bgcolor=#002C57 style='line-height:18px' width='68' align='left'><tr bgcolor='#ffffff'><td>" + vMnuCode + "</td></tr></table></div>";
    
50. 
    
51.     h = vSrc.offsetHeight + 0;
    
52. 
    
53.     l = vSrc.offsetLeft + 0;
    
54. 
    
55.     t = vSrc.offsetTop + h;
    
56. 
    
57.     vParent = vSrc.offsetParent;
    
58. 
    
59.     while (vParent.tagName.toUpperCase() != "BODY")
    
60. 
    
61.     {
    
62. 
    
63.         l += vParent.offsetLeft;
    
64. 
    
65.         t += vParent.offsetTop;
    
66. 
    
67.         vParent = vParent.offsetParent;
    
68. 
    
69.     }
    
70. 
    
71.     menuDiv.innerHTML = vMnuCode;
    
72. 
    
73.     menuDiv.style.top = t;
    
74. 
    
75.     menuDiv.style.left = l;
    
76. 
    
77.     menuDiv.style.visibility = "visible";
    
78. 
    
79.     isvisible = true;   
    
80. 
    
81. }
    
82. 
    
83. //-->

复制代码

2，修改header.htm

查找：

1. <body leftmargin="0" rightmargin="0" topmargin="0" onkeydown="if(event.keyCode==27) return false;">

复制代码

替换：

1. <body leftmargin="0" rightmargin="0" topmargin="0" onkeydown="if(event.keyCode==27) return false;" onmousemove=HideMenu();>

复制代码

然后后面加上

1. <div id=menuDiv style="VISIBILITY: hidden; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px"></div>
   

复制代码

3，在需要的地方加入

1. <a onmouseover="ShowMenu('<a href=wnl.php>万 年 历</a><br><a href=wish.php>祈 愿 池</a><br><a href=plugin.php?mod=dubo>通 吃 岛</a><br><a href=star.php>星 座 缘</a><br><a href=plugin.php?mod=painter>涂 鸦 板</a><br><a href=../zhongqiu target=_blank><font color=red>中秋祝愿</font></a><br>')" href="index.php" class="whitelink"><font class="navtd">社区功能</font></a>

复制代码

其中ShowMenu中的请自行修改。

[ 本帖最后由 笑申 于 2006-7-27 20:55 编辑 ]

thanks.very nice

太棒了

不错的说

不错啊，看你的论坛

帅呆了！

太帅了，回来再顶下！！

<!-- //这里加入那些直接写链接的插件的名字-->
| <a href="freddy.php">万年历</a>
| <a href="wish.php">许愿池</a>
| <a href="z_cup.php">足球博彩</a>
<!-- //这里加入那些直接写链接的插件的名字-->

这里超过3个就会出问题啊！

晕，居然其他风格都正常！