搜索
编程论坛 → WEB开发 → 『 JavaScript论坛 』 → [求助}如何建立下拉菜单
标题：[求助}如何建立下拉菜单
只看楼主
kingcat_1985
Rank: 1
等　级：新手上路
帖　子：207
专家分：0
注　册：2004-11-7
楼主
 问题点数：0 回复次数：11 
[求助}如何建立下拉菜单
就好像我们这个论坛，当鼠标指向“论坛设施”，就会出现一个下拉菜单。我正在搞网站，可是不知道怎么搞出来~~~
搜索更多相关主题的帖子: 菜单　鼠标　设施　
2005-01-18 20:53
bingxue2332
Rank: 3Rank: 3
等　级：新手上路
威　望：6
帖　子：446
专家分：0
注　册：2004-11-6
第 2 楼
 得分:0 

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>下拉菜单实例以个</title> <script language="JavaScript" type="text/JavaScript"> <!-- var munu_top = 34; function popmunu(m){ m.style.visibility = "visible" ; m.style.top = munu_top ; m.style.left = ie_x(event.srcElement)-6 ; } function ie_x(e){ var l=e.offsetLeft; while(e=e.offsetParent) { l+=e.offsetLeft; } return l; } function showpop(m){ m.style.visibility = "visible"; } function hidemunu(e){ e.style.visibility = "hidden"; } //--> </script> <style type="text/css"> <!-- body,td,th { font-size: 12px; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: none; } --> </style></head> <body> <table width="750" border="1" align="center"> <tr> <td ><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> <td><div align="center"><a href="#" onMouseOver="popmunu(Layer1)" onMouseOut="hidemunu(Layer1)">例子一个</a></div></td> </tr> </table> <div id="Layer1" onMouseOver="showpop(Layer1)" onMouseOut="hidemunu(Layer1)" style="position:absolute; width:56px; height:115px; z-index:1; visibility: hidden; background-color: #99FF99; layer-background-color: #99FF99; border: 1px none #000000;"> <table width="100%" border="1" bordercolor="#FFCC00"> <tr> <td bordercolor="#CCCCCC" onMouseOver="this.bgColor='#FFFFFF';" onMouseOut="this.bgColor='';">&nbsp;</td> </tr> <tr> <td bordercolor="#CCCCCC" onMouseOver="this.bgColor='#FFFFFF';" onMouseOut="this.bgColor='';">&nbsp;</td> </tr> <tr> <td bordercolor="#CCCCCC" onMouseOver="this.bgColor='#FFFFFF';" onMouseOut="this.bgColor='';">&nbsp;</td> </tr> <tr> <td bordercolor="#CCCCCC" onMouseOver="this.bgColor='#FFFFFF';" onMouseOut="this.bgColor='';">&nbsp;</td> </tr> <tr> <td bordercolor="#CCCCCC" onMouseOver="this.bgColor='#FFFFFF';" onMouseOut="this.bgColor='';">&nbsp;</td> </tr> <tr> <td bordercolor="#CCCCCC" onMouseOver="this.bgColor='#FFFFFF';" onMouseOut="this.bgColor='';">&nbsp;</td> </tr> </table> </div> </body> </html>[/CODE]


2005-01-19 12:04
bingxue2332
Rank: 3Rank: 3
等　级：新手上路
威　望：6
帖　子：446
专家分：0
注　册：2004-11-6
第 3 楼
 得分:0 
晕

发表后全部走了样了

效果复制到自己的电脑上看好了

2005-01-19 12:05
godblod
Rank: 1
等　级：新手上路
帖　子：17
专家分：0
注　册：2005-1-19
第 4 楼
 得分:0 
[CODE]&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
A {TEXT-DECORATION: none}
A:hover {COLOR: #ff9900; TEXT-DECORATION: underline}
TD{font-size: 9pt; color: #0080C0}
.out{font-size: 9pt; color: #0080C0;border-width:1px;border-style:solid;border-color:0090c0 0070b0 0070b0 0090c0;cursor:hand; background:#A6C4BC; text-align: center}
.out2 {text-align: center}
.out2{font-size: 9pt; color: #0080C0;border-width:1px;border-style:solid;border-color:0070b0 0090c0 0090c0 0070b0;background:#A6C4BC;cursor:default}
&lt;/style&gt;
&lt;script language="javascript"&gt;
var text1,text2,text3,text4;
text1=new Array();
 text1[0]="Girl";
 text1[1]="Sence";
 text1[2]="Classmate";
 text1[3]="MM";
 text1[4]="Age";
 text1[5]="Love";
text2=new Array();
 text2[0]="痴心绝对";
text3=new Array();
 text3[0]="Cngame download";
text4=new Array();
 text4[0]="Aministrator";
 text4[1]="Freind";
document.write("&lt;div id='showMenu_1' style='position: absolute;visibility: hidden;background-color: orange;filter: revealTrans(Duration=1.5,Transition=12) alpha(opacity=60);z-index: 1;'&gt;");
document.write("&lt;table border=0 width=100%&gt;");
for (j=0;j&lt;text1.length;j++){
 document.write("&lt;tr&gt;&lt;td align='center' class='out'&gt;"+text1[j]+"&lt;/td&gt;&lt;/tr&gt;");
}
document.write("&lt;/table&gt;&lt;/div&gt;");
document.write("&lt;div id='showMenu_2' style='position: absolute;visibility: hidden;background-color: orange;filter: revealTrans(Duration=1.5,Transition=12) alpha(opacity=60);z-index: 1;'&gt;");
document.write("&lt;table border=0 width=100%&gt;");
for (j=0;j&lt;text2.length;j++){
 document.write("&lt;tr&gt;&lt;td align='center' class='out'&gt;"+text2[j]+"&lt;/td&gt;&lt;/tr&gt;");
}
document.write("&lt;/table&gt;&lt;/div&gt;");
document.write("&lt;div id='showMenu_3' style='position: absolute;visibility: hidden;background-color: orange;filter: revealTrans(Duration=1.5,Transition=12) alpha(opacity=60);z-index: 1;'&gt;");
document.write("&lt;table border=0 width=100%&gt;");
for (j=0;j&lt;text3.length;j++){
 document.write("&lt;tr&gt;&lt;td align='center' class='out'&gt;"+text3[j]+"&lt;/td&gt;&lt;/tr&gt;");
}
document.write("&lt;/table&gt;&lt;/div&gt;");
document.write("&lt;div id='showMenu_4' style='position: absolute;visibility: hidden;background-color: orange;filter: revealTrans(Duration=1.5,Transition=12) alpha(opacity=60);z-index: 1;'&gt;");
document.write("&lt;table border=0 width=100%&gt;");
for (j=0;j&lt;text4.length;j++){
 document.write("&lt;tr&gt;&lt;td align='center' class='out'&gt;"+text4[j]+"&lt;/td&gt;&lt;/tr&gt;");
}
document.write("&lt;/table&gt;&lt;/div&gt;");
function long_div(){
var the_div=window.document.getElementById("menu_0");
var if_long=the_div.style.pixelWidth-6;
 if (if_long&gt;100){
  the_div.style.pixelWidth=if_long;
 }else{
  the_div.style.pixelWidth=100;
 }
}
function short_div(){
var the_div=window.document.getElementById("menu_0");
 var if_short=the_div.style.pixelWidth+6;
 if (if_short&lt;500){
  the_div.style.pixelWidth=if_short;
 }else{
  the_div.style.pixelWidth=500;
 }
}
function ok_div(){
var the_div=window.document.getElementById("menu_0");
if (the_div.style.pixelWidth==100){
 window.document.getElementById("menu2").style.display="block";
 window.document.getElementById("menu3").style.display="block";
 window.document.getElementById("menu4").style.display="block";
 window.document.getElementById("menu5").style.display="block";
 clearInterval(the_div.doing);
 the_div.doing=setInterval("short_div();",10);
}else{
 if (the_div.style.pixelWidth==500){
  window.document.getElementById("menu2").style.display="none";
  window.document.getElementById("menu3").style.display="none";
  window.document.getElementById("menu4").style.display="none";
  window.document.getElementById("menu5").style.display="none";
  clearInterval(the_div.doing);
  the_div.doing=setInterval("long_div();",10);
 }else{
  return false;
 }
}
}
function show_menu(num){
for(var i=1;i&lt;5;i++){
 var theMenu="showMenu_"+i
 theMenu=window.document.getElementById(theMenu);
 theMenu.filters.revealTrans.stop();
 theMenu.style.visibility="hidden";
}
var the_div,the_menu,menu_left,menu_top,menu_width;
the_div=window.document.getElementById("menu_0");
the_menu="showMenu_"+num;
the_menu=window.document.getElementById(the_menu);
the_menu.style.pixelLeft=the_div.style.pixelLeft+100*num;
the_menu.style.pixelTop=the_div.style.pixelTop+20;
the_menu.style.pixelWidth=100;
the_menu.filters.revealTrans.apply();
the_menu.style.visibility="visible";
the_menu.filters.revealTrans.play();
}
function hide_menu(){
for(var i=1;i&lt;5;i++){
 var theMenu="showMenu_"+i
 var the_menu=window.document.getElementById(theMenu);
 the_menu.filters.revealTrans.stop();
 the_menu.style.visibility="hidden";
}
}
function showMenu(num){
var theMenu,the_div,the_menu,menu_left,menu_top,menu_width;
the_div=window.document.getElementById("menu_0");
if (the_div.style.pixelWidth==500){
the_menu=window.document.getElementById("menu_2");
the_menu.style.pixelLeft=the_div.style.pixelLeft+100*num-1;
the_menu.style.pixelTop=the_div.style.pixelTop;
the_menu.style.pixelWidth=100;
the_menu.style.display="block";
}else{
return false;
}
}
function hideMenu(){
var the_div=window.document.getElementById("menu_0");
if (the_div.style.pixelWidth==500){
var the_menu=window.document.getElementById("menu_2");
the_menu.style.display="none";
}else{
return false;
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="menu_0" style="position: absolute;top: 100;left: 100;width: 100;height: 20;background-color: orange;filter:alpha(opacity=60);z-index: 1;"&gt;
&lt;table border=0 width="100%"&gt;
&lt;tr&gt;
 &lt;td id="menu1" class="out" onClick="ok_div();hide_menu();" width="100"&gt;Wind&lt;/td&gt;
 &lt;td id="menu2" class="out" style="display: none;" width="100" onClick="show_menu(1);" onMouseOver="showMenu(1);" onMouseOut="hideMenu();"&gt;Photo&lt;/td&gt;
 &lt;td id="menu3" class="out" style="display: none;" width="100" onClick="show_menu(2);" onMouseOver="showMenu(2);" onMouseOut="hideMenu();"&gt;Music&lt;/td&gt;
 &lt;td id="menu4" class="out" style="display: none;" width="100" onClick="show_menu(3);" onMouseOver="showMenu(3);" onMouseOut="hideMenu();"&gt;Soft&lt;/td&gt;
 &lt;td id="menu5" class="out" style="display: none;" width="100" onClick="show_menu(4);" onMouseOver="showMenu(4);" onMouseOut="hideMenu();"&gt;Contact&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;div id="menu_2" style="position: absolute;left: 100;display: none;background-color: yellow;filter:alpha(opacity=60);z-index: 0;"&gt;
&lt;table width="100" height="5"&gt;
&lt;tr&gt;
&amp;nbsp;
&lt;/td&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;[/CODE]
2005-01-19 18:43
godblod
Rank: 1
等　级：新手上路
帖　子：17
专家分：0
注　册：2005-1-19
第 5 楼
 得分:0 

为什么用运行代码后，会产生未知的代码？
有这个功能有bug吗？
2005-01-19 18:47
静夜思
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来　自：济南的冬天
等　级：管理员
威　望：11
帖　子：8842
专家分：2567
注　册：2004-3-25
第 6 楼
 得分:0 
４楼的运行起来没错误啊
２楼的是代码的ＣＳＳ受到了论坛ＣＳＳ的影响

畅所欲言
2005-01-20 10:51
godblod
Rank: 1
等　级：新手上路
帖　子：17
专家分：0
注　册：2005-1-19
第 7 楼
 得分:0 
我想讲当我运行代码时，在产生网页时，所显示的代码中有"????"，不明的编码
2005-01-21 14:56
kingcat_1985
Rank: 1
等　级：新手上路
帖　子：207
专家分：0
注　册：2004-11-7
第 8 楼
 得分:0 
好汗~~~看不明白~~~~

我是菜鸟~~~ 　　各位大哥要照住小弟我啊~~~
2005-01-21 20:12
bingxue2332
Rank: 3Rank: 3
等　级：新手上路
威　望：6
帖　子：446
专家分：0
注　册：2004-11-6
第 9 楼
 得分:0 
晕
不就是一个show() 和 hide() 函数嘛
怎么不明白啊

2005-01-21 23:54
bingxue2332
Rank: 3Rank: 3
等　级：新手上路
威　望：6
帖　子：446
专家分：0
注　册：2004-11-6
第 10 楼
 得分:0 
可能是你的编码方式那行代码丢了 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

2005-01-23 10:14



参与讨论请移步原网站贴子：https://bbs.bccn.net/thread-11481-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有，并保留所有权利。
Powered by Discuz, Processed in 0.818278 second(s), 7 queries.
Copyright©2004-2025, BCCN.NET, All Rights Reserved