主页
问答

当点击按钮选单时，会出现下拉式选单的js

yeshucheng 个体技术总监/研发总监 2006-10-09 03:38:01

RT,这里要强调的是并不是把鼠标放上去直接弹出，而是要点中后才弹出下拉明细

...全文

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

yeshucheng 2006-10-10

先谢谢楼上的朋友，真的很感谢：）

回复赞

梅雪香 2006-10-10

<html>
<head>
<title>下拉菜单示例</title>

<style type="text/css">

</style>
<script language="JavaScript">

</script>

</head>

<body>
<input type="button" value="Click" onclick="ShowOrHideMenu(this)">
</body>
</html>

回复赞

yeshucheng 2006-10-10

自己顶下

回复赞

yeshucheng 2006-10-10

lantersen(蓝水仁--过生日了，呵！~) ,先谢谢你，你给的代码就是我要的。
因为我对js确实不大熟悉，你的代码是否可以再简化点，而且我也不需要你的那个弹出效果，只要能出来就行。我昨天找到一个类似的这个，但是有一个问题：

<html>
<head>
<title>下拉菜单示例</title>
<script language="javascript">
function clickmenu(menu_title,menu_name)
{
var i=0;
var menutitle,menuname;
for(i=1;i<=3;i++)
{
menutitle="menutitle"+i;
menuname="menu"+i;
if(menutitle!=menu_title.id)
{
document.getElementById(menuname).style.display = "none"
document.getElementById(menuname).style.backgroundColor = "red"
}
else
{
if(menu_name.style.display=="block")
{
menu_name.style.display = "none";
menu_name.style.backgroundColor = "#ff0000";
}
else
{
menu_name.style.display = "block"
menu_name.style.backgroundColor = "red"
}
}
}
}
</script>

<style type="text/css">

</style>
</head>

<body>
<table border="0">
<tr>
<td><span id="menutitle1" class="menutitle" onclick="clickmenu(menutitle1,menu1);">计算所</span></td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>
<div id="menu1" class="menu">
<div id="menu1_1"><a href="http://www.sina.com.cn">A</a></div>
<div id="menu1_2"><a href="http://www.csdn.net">B</a></div>
<div id="menu1_3"><a href="http://www.javaworld.com">C</a></div>
</div>
</td>
</tr>
</table>

</body>
</html>
我在中间加了一个“<td>test</td>”所以整个弹出框就会向下移，我现在想要的效果是：即使加了“<td>test</td>”不想让它移动，覆盖都行

回复赞

碧海情天-赵亮 2006-10-09

楼上这些应该都可以了

回复赞

郭大侠_ 2006-10-09

<html>
<head>
<title>QQ菜单</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<script language='JavaScript'>
var headHeight = 22;var bodyHeight = 222;var objcount = 6;var step = 25;var moving = false;
function showme(obj1, obj2)
{
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags('td').length;i++)
if (document.all.tags('td')[i].className.indexOf('headtd') == 0)
document.all.tags('td')[i].className = 'headtd1';
obj2.className = 'headtd2';
moveme(obj1);
}
function moveme(obj)
{
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
currenttop = parseInt(obj.style.top);
if (currenttop >= objbuttom)
{
countid = 1;
for(i=0;i<document.all.tags('div').length;i++)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objtop = headHeight * (countid - 1);
if (countid == idnumber)
{
moveup(obj,objtop,false);
break;
}
else
moveup(obj,objtop,true);
countid++;
}
}
else if ((currenttop <= objtop) && (idnumber < objcount))
{
idnumber++;
countid = objcount;
for(i=document.all.tags('div').length-1;i>=0;i--)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
break;
}
else
movedown(obj,objbuttom,true);
countid--;
}
}
}
function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
return;
}
moving = ismove;
}
function movedown(obj,objbuttom,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop < objbuttom)
{
obj.style.top = currenttop + step;
setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)
return;
}
moving = ismove;
}
</script>
</script>
<style type='text/css'>
.headtd1 { background: #00A4E1; border: 2px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}.headtd2 { background: #20C1FF; border: 2px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}.bodytd { background: #99CCFF; border: 2px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt}
</style>
</head>
<body bgcolor='#FFFFFF' text='#000000'>
<div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:332px; z-index:1; overflow: hidden; background: #99CCFF;'> <div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:222px; z-index:2; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item1head' height='20' class='headtd2' onclick='showme(item1body,this)' align='center'>菜单1</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item2body' style='position:absolute; left:0; top:222; width:120px; height:222px; z-index:3; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item2head' height='20' class='headtd1' onclick='showme(item2body,this)' align='center'>菜单2</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item3body' style='position:absolute; left:0; top:244; width:120px; height:222px; z-index:4; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item3head' height='20' class='headtd1' onclick='showme(item3body,this)' align='center'>菜单3</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item4body' style='position:absolute; left:0; top:266; width:120px; height:222px; z-index:5; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item4head' height='20' class='headtd1' onclick='showme(item4body,this)' align='center'>菜单4</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item5body' style='position:absolute; left:0; top:288; width:120px; height:222px; z-index:6; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item5head' height='20' class='headtd1' onclick='showme(item5body,this)' align='center'>菜单5</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item6body' style='position:absolute; left:0; top:310; width:120px; height:222px; z-index:7; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item6head' height='20' class='headtd1' onclick='showme(item6body,this)' align='center'>菜单6</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div></div></body></html>

回复赞

lantersen 2006-10-09

说具体你的需求，下面是个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>下拉式菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<STYLE>#iewrap {
POSITION: relative; HEIGHT: 30px
}
#iewrap2 {
POSITION: absolute
}
#dropmenu03 {
FILTER: revealTrans(Duration=1.5,Transition=12)
visibility:hide
}
BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
A {
FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.pt9 {
FONT-SIZE: 9pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
</STYLE>

<META content="下拉式菜单导航" name=keywords>
<META content=一个下拉式菜单导航脚本 name=description>
<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff><ILAYER id=dropmenu01 height="35px"><LAYER id=dropmenu02
visibility="show"><SPAN id=iewrap><SPAN id=iewrap2
onclick="dropit2();event.cancelBubble=true;return false"><FONT face=宋体><A
href="http://vip.5d.cn/flood/myjs/htm/menu/dmenu.htm#">点这里看本站栏目</A></FONT>
</SPAN></SPAN></LAYER></ILAYER>
<SCRIPT language=JavaScript1.2>

//如果想关闭 "fade"（消隐）效果，将如下参数设置成false，适用于IE用户。
var enableeffect=true

//将如下数组修改成你自己的。
var selection=new Array()
selection[0]='<font face="宋体"><a href="www.ue100.com/~lionwind">本站首页</a></font><br>'
selection[1]='<font face="宋体"><a href="#">一个连接</a></font><br>'
selection[2]='<font face="宋体"><a href="../../navigation/applet/appletindex.htm">JavaApplet</a></font><br>'
selection[3]='<font face="宋体"><a href="#">一个连接</a></font><br>'
selection[4]='<font face="宋体"><a href="#">一个连接</a></font><br>'
selection[5]='<font face="宋体"><a href="#">一个连接</a></font><br>'
selection[6]='<font face="宋体"><a href="#">一个连接</a></font><br>'
selection[7]='<font face="宋体"><a href="#">一个连接</a></font>'

if (document.layers)
document.dropmenu01.document.dropmenu02.visibility='show'

function dropit2(){
if (document.all){
dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (dropmenu03.style.visibility=="hidden"){
if (enableeffect)
dropmenu03.filters.revealTrans.apply()
dropmenu03.style.visibility="visible"
if (enableeffect)
dropmenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}

function dropit(e){
if (document.dropmenu03.visibility=="hide")
document.dropmenu03.visibility="show"
else
document.dropmenu03.visibility="hide"
document.dropmenu03.left=e.pageX-e.layerX
document.dropmenu03.top=e.pageY-e.layerY+19
return false
}

function hidemenu(){
if (enableeffect)
dropmenu03.filters.revealTrans.stop()
dropmenu03.style.visibility="hidden"
}

function hidemenu2(){
document.dropmenu03.visibility="hide"
}

if (document.layers){
document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)
document.dropmenu01.document.dropmenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu

</SCRIPT>

<DIV id=dropmenu03
style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: black 1px solid; PADDING-LEFT: 0px; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: black 1px solid; WIDTH: 100px; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: seashell; layer-background-color: seashell">
<SCRIPT language=JavaScript1.2>
if (document.all)
dropmenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</SCRIPT>
</DIV>
<SCRIPT language=JavaScript1.2>
if (document.layers){
document.dropmenu03.captureEvents(Event.CLICK)
document.dropmenu03.onclick=hidemenu2
}
</SCRIPT>

<P> </P></BODY></HTML>

回复赞