[hack]另一种下拉菜单.

打开CSS.htm加入:

1. <style type="text/css">
   
2. .anylinkcss{
   
3. position:absolute;
   
4. visibility: hidden;
   
5. border:1px solid black;
   
6. border-bottom-width: 0;
   
7. font:normal 12px Verdana;
   
8. line-height: 18px;
   
9. z-index: 100;
   
10. background-color: #E9FECB;
    
11. width: 205px;
    
12. }
    
13. 
    
14. .anylinkcss a{
    
15. width: 100%;
    
16. display: block;
    
17. text-indent: 3px;
    
18. border-bottom: 1px solid black;
    
19. padding: 1px 0;
    
20. text-decoration: none;
    
21. font-weight: bold;
    
22. text-indent: 5px;
    
23. }
    
24. 
    
25. .anylinkcss a:hover{ /*hover background color*/
    
26. background-color: black;
    
27. color: white;
    
28. }
    
29. 
    
30. </style>
    
31. <script language="javascript">
    
32. //more javascript from http://www.smallrain.net
    
33. var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    
34. var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
    
35. var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)
    
36. 
    
37. /////No further editting needed
    
38. 
    
39. var ie5=document.all
    
40. var ns6=document.getElementById&&!document.all
    
41. 
    
42. function getposOffset(what, offsettype){
    
43. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    
44. var parentEl=what.offsetParent;
    
45. while (parentEl!=null){
    
46. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    
47. parentEl=parentEl.offsetParent;
    
48. }
    
49. return totaloffset;
    
50. }
    
51. 
    
52. function showhide(obj, e, visible, hidden){
    
53. if (ie5||ns6)
    
54. dropmenuobj.style.left=dropmenuobj.style.top=-500
    
55. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    
56. obj.visibility=visible
    
57. else if (e.type=="click")
    
58. obj.visibility=hidden
    
59. }
    
60. 
    
61. function iecompattest(){
    
62. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    
63. }
    
64. 
    
65. function clearbrowseredge(obj, whichedge){
    
66. var edgeoffset=0
    
67. if (whichedge=="rightedge"){
    
68. var windowedge=ie5 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    
69. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    
70. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    
71. edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    
72. }
    
73. else{
    
74. var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    
75. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    
76. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    
77. edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    
78. }
    
79. return edgeoffset
    
80. }
    
81. 
    
82. function dropdownmenu(obj, e, dropmenuID){
    
83. if (window.event) event.cancelBubble=true
    
84. else if (e.stopPropagation) e.stopPropagation()
    
85. if (typeof dropmenuobj!="undefined") //hide previous menu
    
86. dropmenuobj.style.visibility="hidden"
    
87. clearhidemenu()
    
88. if (ie5||ns6){
    
89. obj.onmouseout=delayhidemenu
    
90. dropmenuobj=document.getElementById(dropmenuID)
    
91. if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
    
92. dropmenuobj.onmouseover=clearhidemenu
    
93. dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
    
94. showhide(dropmenuobj.style, e, "visible", "hidden")
    
95. dropmenuobj.x=getposOffset(obj, "left")
    
96. dropmenuobj.y=getposOffset(obj, "top")
    
97. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    
98. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    
99. }
    
100. return clickreturnvalue()
     
101. }
     
102. 
     
103. function clickreturnvalue(){
     
104. if ((ie5||ns6) && !enableanchorlink) return false
     
105. else return true
     
106. }
     
107. 
     
108. function contains_ns6(a, b) {
     
109. while (b.parentNode)
     
110. if ((b = b.parentNode) == a)
     
111. return true;
     
112. return false;
     
113. }
     
114. 
     
115. function dynamichide(e){
     
116. if (ie5&&!dropmenuobj.contains(e.toElement))
     
117. delayhidemenu()
     
118. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
     
119. delayhidemenu()
     
120. }
     
121. 
     
122. function delayhidemenu(){
     
123. delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
     
124. }
     
125. 
     
126. function clearhidemenu(){
     
127. if (typeof delayhide!="undefined")
     
128. clearTimeout(delayhide)
     
129. }
     
130. </script>

复制代码

在header.htm合适的地方加:

1. <!--第一个链接和菜单 -->
   
2. <a href="https://discuz.dismall.com/javascript" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">下拉显示</a>   
   
3.                                                    
   
4. <div id="anylinkmenu1" class="anylinkcss">
   
5. 
   
6. <a href="地址一">名称一</a>
   
7. <a href="地址二">名称二</a>
   
8. <a href="地址三">名称三</a>
   
9. 
   
10. </div>

复制代码

表格的颜色的宽度可以自己调节.

演示:
http://free3.e-168.cn/tongxue79/index.php

[ 本帖最后由 hufanyun 于 2005-9-5 00:51 编辑 ]

沙发！

爽！！！

这个连下拉显示都可以有连接,简单吧

不知道有没有人喜欢DZ官方www.discuz.com那种象图片一样的渐显下拉菜单

看不到呀?

演示有下拉？

演示删除了.因为我正在制作DZ官方的下拉菜单

原帖由 hufanyun 于 2005-9-5 01:00 发表
不知道有没有人喜欢DZ官方www.discuz.com那种象图片一样的渐显下拉菜单

我喜欢的，我要的！期待兄弟的作品！

支持,,,,顶一下, 快出来.