[原创/美化]下拉菜单 For [D4]

//------------------------------------------------------------------------
//名称：下拉菜单
//版本：D4
//整理：Freddy
//修改文件：common.js
//修改模板：所有风格的header.htm、css.htm
//技术支持：无
//功能：把其它一些非后台插件的链接型HACK和控制面板集到一起。如果以后再有新的东东再会更新的：）
//修改难易：这个比D25简单多了！！！
//演示：http://www.51happy365.com/bbs
//------------------------------------------------------------------------

1. 修改 include/common.js

在最后插入：

1. 
   
2. <!--
   
3. 
   
4. var menuOffX=0        //菜单距连接文字最左端距离
   
5. var menuOffY=18        //菜单距连接文字顶端距离
   
6. 
   
7. var fo_shadows=new Array()
   
8. var linkset=new Array()
   
9. 
   
10. 
    
11. var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
    
12. var ns6=document.getElementById&&!document.all
    
13. var ns4=document.layers
    
14. function openScript(url, width, height){
    
15.         var Win = window.open(url,"openScript",'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=no' );
    
16. }
    
17. 
    
18. function showmenu(e,vmenu,mod){
    
19.         if (!document.all&&!document.getElementById&&!document.layers)
    
20.                 return
    
21.         which=vmenu
    
22.         clearhidemenu()
    
23.         ie_clearshadow()
    
24.         menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
    
25.         menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
    
26.         
    
27.         if (ie4||ns6)
    
28.                 menuobj.innerHTML=which
    
29.         else{
    
30.                 menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
    
31.                 menuobj.document.close()
    
32.         }
    
33.         menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
    
34.         menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
    
35.         
    
36.         eventX=ie4? event.clientX : ns6? e.clientX : e.x
    
37.         eventY=ie4? event.clientY : ns6? e.clientY : e.y
    
38.         
    
39.         var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
    
40.         var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
    
41.                 if (rightedge<menuobj.contentwidth)
    
42.                         menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
    
43.                 else
    
44.                         menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
    
45.                
    
46.                 if (bottomedge<menuobj.contentheight&&mod!=0)
    
47.                         menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
    
48.                 else
    
49.                         menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
    
50.         menuobj.thestyle.visibility="visible"
    
51.         ie_dropshadow(menuobj,"#999999",3)
    
52.         return false
    
53. }
    
54. 
    
55. function ie_y(e){  
    
56.         var t=e.offsetTop;  
    
57.         while(e=e.offsetParent){  
    
58.                 t+=e.offsetTop;  
    
59.         }  
    
60.         return t;  
    
61. }  
    
62. function ie_x(e){  
    
63.         var l=e.offsetLeft;  
    
64.         while(e=e.offsetParent){  
    
65.                 l+=e.offsetLeft;  
    
66.         }  
    
67.         return l;  
    
68. }  
    
69. function ie_dropshadow(el, color, size)
    
70. {
    
71.         var i;
    
72.         for (i=size; i>0; i--)
    
73.         {
    
74.                 var rect = document.createElement('div');
    
75.                 var rs = rect.style
    
76.                 rs.position = 'absolute';
    
77.                 rs.left = (el.style.posLeft + i) + 'px';
    
78.                 rs.top = (el.style.posTop + i) + 'px';
    
79.                 rs.width = el.offsetWidth + 'px';
    
80.                 rs.height = el.offsetHeight + 'px';
    
81.                 rs.zIndex = el.style.zIndex - i;
    
82.                 rs.backgroundColor = color;
    
83.                 var opacity = 1 - i / (i + 1);
    
84.                 rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
    
85.                 //el.insertAdjacentElement('afterEnd', rect);
    
86.                 fo_shadows[fo_shadows.length] = rect;
    
87.         }
    
88. }
    
89. function ie_clearshadow()
    
90. {
    
91.         for(var i=0;i<fo_shadows.length;i++)
    
92.         {
    
93.                 if (fo_shadows[i])
    
94.                         fo_shadows[i].style.display="none"
    
95.         }
    
96.         fo_shadows=new Array();
    
97. }
    
98. 
    
99. 
    
100. function contains_ns6(a, b) {
     
101.         while (b.parentNode)
     
102.                 if ((b = b.parentNode) == a)
     
103.                         return true;
     
104.         return false;
     
105. }
     
106. 
     
107. function hidemenu(){
     
108.         if (window.menuobj)
     
109.                 menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
     
110.         ie_clearshadow()
     
111. }
     
112. 
     
113. function dynamichide(e){
     
114.         if (ie4&&!menuobj.contains(e.toElement))
     
115.                 hidemenu()
     
116.         else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
     
117.                 hidemenu()
     
118. }
     
119. 
     
120. function delayhidemenu(){
     
121.         if (ie4||ns6||ns4)
     
122.                 delayhide=setTimeout("hidemenu()",500)
     
123. }
     
124. 
     
125. function clearhidemenu(){
     
126.         if (window.delayhide)
     
127.                 clearTimeout(delayhide)
     
128. }
     
129. 
     
130. function highlightmenu(e,state){
     
131.         if (document.all)
     
132.                 source_el=event.srcElement
     
133.         else if (document.getElementById)
     
134.                 source_el=e.target
     
135.         if (source_el.className=="menuitems"){
     
136.                 source_el.id=(state=="on")? "mouseoverstyle" : ""
     
137.         }
     
138.         else{
     
139.                 while(source_el.id!="popmenu"){
     
140.                         source_el=document.getElementById? source_el.parentNode : source_el.parentElement
     
141.                         if (source_el.className=="menuitems"){
     
142.                                 source_el.id=(state=="on")? "mouseoverstyle" : ""
     
143.                         }
     
144.                 }
     
145.         }
     
146. }
     
147. 
     
148. 
     
149. 
     
150. 
     
151. 
     
152. //-->

复制代码

2. 修改css.htm

在--></style>前插入：

1. 
   
2. .menuskin {
   
3.         filter: Alpha(Opacity=80);
   
4.         BORDER: #666666 1px solid; VISIBILITY: hidden; FONT: 12px Verdana;
   
5.         POSITION: absolute;
   
6.         BACKGROUND-COLOR:#FFFFFF;
   
7.         background-repeat : repeat-y;
   
8.         }
   
9. .menuskin A {
   
10.         PADDING-RIGHT: 9px; PADDING-LEFT: 7px; COLOR: black; TEXT-DECORATION: none; behavior:url(inc/noline.htc);
    
11.         }
    
12. #mouseoverstyle {
    
13.         BACKGROUND-COLOR: #F2F5FB; margin:2px; padding:0px; border:#8396C3 1px solid;
    
14.         }
    
15. #mouseoverstyle A {
    
16.         COLOR: black
    
17. }
    
18. .menuitems{
    
19.         margin:2px;padding:1px;word-break:keep-all;
    
20. }
    

复制代码

3. 修改header.htm

查找

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

复制代码

在下面插入

1. <div class=menuskin id=popmenu
   
2.       onmouseover="clearhidemenu();highlightmenu(event,'on')"
   
3.       onmouseout="highlightmenu(event,'off');dynamichide(event)" style="Z-index:100"></div>

复制代码

查找

1. <!--{if $discuz_uid}-->
   
2.         <span class="bold">$discuz_userss: </span> <a href="$link_logout">{lang logout}</a>
   
3.         <!--{if $maxpmnum}-->| <a href="pm.php" target="_blank">{lang pm}</a> <!--{/if}-->
   
4.         |  <a href="memcp.php">{lang memcp}</a>
   
5.         <!--{if in_array($adminid, array(1,2,3))}-->| <a href="admincp.php" target="_blank">{lang admincp}</a> <!--{/if}-->
   
6. <!--{else}-->
   
7.         <span class="bold">{lang guest}: &nbsp;</span><a href="$link_register">{lang register}</a>
   
8.         | <a href="$link_login">{lang login}</a>
   
9. <!--{/if}-->
   
10. 
    
11. <!--{if $memliststatus}-->| <a href="member.php?action=list">{lang memberlist}</a> <!--{/if}-->
    
12. <!--{if $allowsearch || $qihoostatus}-->| <a href="search.php">{lang search}</a> <!--{/if}-->
    
13. <!--{if $allowviewstats}-->| <a href="stats.php">{lang statistics}</a> <!--{/if}-->
    
14. <!--{loop $plugins['links'] $plugin}-->
    
15.         <!--{loop $plugin $module}-->
    
16.              <!--{if !$module['adminid'] || ($module['adminid'] && $adminid > 0 && $module['adminid'] >= $adminid)}-->| $module[url] <!--{/if}-->
    
17.         <!--{/loop}-->
    
18. <!--{/loop}-->
    
19. | <a href="faq.php">{lang faq}</a>

复制代码

替换:

1. 
   
2. <!--{if $discuz_uid}-->
   
3.         <span class="bold">$discuz_userss: </span> <a href="$link_logout">{lang logout}</a>
   
4.         <!--{if $maxpmnum}-->| <a href="pm.php" target="_blank">{lang pm}</a> <!--{/if}-->
   
5.         | <a href="memcp.php " OnMouseOut=delayhidemenu() onMouseOver="showmenu(event,'<div class=menuitems><a style=font-size:9pt;line-height:14pt; href=memcp.php> 控制面板首页</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=memcp.php?action=profile> 编辑资料</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=memcp.php?action=credits> 积分交易</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=memcp.php?action=usergroups> 公众用户组</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=memcp.php?action=buddylist> 好友列表</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=memcp.php?action=subscriptions> 订阅列表</a></div><div class=menuitems><a href=memcp.php?action=favorites> 收藏夹</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=pm.php>短消息</a></div>')" style="CURSOR:hand" >控制面板</a>
   
6.         <!--{if in_array($adminid, array(1,2,3))}-->| <a href="admincp.php" target="_blank">{lang admincp}</a> <!--{/if}-->
   
7. <!--{else}-->
   
8.         <span class="bold">{lang guest}: &nbsp;</span><a href="$link_register">{lang register}</a>
   
9.         | <a href="$link_login">{lang login}</a>
   
10. <!--{/if}-->
    
11. 
    
12. <!--{if $memliststatus}-->| <a href="member.php?action=list">{lang memberlist}</a> <!--{/if}-->
    
13. <!--{if $allowsearch || $qihoostatus}-->| <a href="search.php">{lang search}</a> <!--{/if}-->
    
14. <!--{if $allowviewstats}-->
    
15. | <a href="stats.php" OnMouseOut=delayhidemenu() onMouseOver="showmenu(event,'<div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php >基本概况</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=views >流量统计</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=agent >客户软件</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=posts >发贴量记录</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=forumsrank >论坛排行</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=threadsrank >主题排行</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=postsrank >发贴排行</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=creditsrank >积分排行</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=onlinetime >在线时间</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=stats.php?type=team >管理团队</a></div>')">{lang statistics}</a>
    
16. <!--{/if}-->
    
17. | <a href="###" OnMouseOut=delayhidemenu() onMouseOver="showmenu(event,'<div class=menuitems><a href=plugin.php?identifier=bank&module=bank>社区银行</a></div><div class=menuitems><a href=plugin.php?identifier=jail&module=jail>社区监狱</a></div><div class=menuitems><a href=plugin.php?identifier=mission&module=mission>任务精灵</a></div><div class=menuitems><a href=plugin.php?identifier=fingerguess&module=fingerguess>猜拳游戏</a></div>')" style="CURSOR:hand">娱乐设施</a>
    
18. | <a href="###" OnMouseOut=delayhidemenu() onMouseOver="showmenu(event,'<div class=menuitems><a href=freddy.php>万年历</a></div><div class=menuitems><a href=star.php>星座缘</a></div><div class=menuitems><a href=anquan.php>女性安全期测试</a></div>')" style="CURSOR:hand">其它</a>
    
19. | <a href="###" OnMouseOut=delayhidemenu() onMouseOver="showmenu(event,'<div class=menuitems><a style=font-size:9pt;line-height:14pt; href=music/index.php target=_parent>播放</a></div><div class=menuitems><a style=font-size:9pt;line-height:14pt; href=index.php target=_parent>关闭</a></div>')"><font class="blod">音乐</font></a>
    
20. | <a href="faq.php">{lang faq}</a>
    

复制代码

以上代码可以根据自己所装插件自己更换！！！

后台刷新缓存！

[ 本帖最后由 freddy 于 2005-12-13 15:49 编辑 ]

更新用的。。。

顶兄弟

马上安装 期待越来越多的插件支持 3.0

厉害~~~~！！！！

3.0开始来了哦!!

新时代已经来了！从现在起作好准备。

收藏，顶起，感谢，88

好象有问题

先支持下。

好强的英文水平啊!!下次可不可以用中文呢?!