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

yeshucheng 个体 技术总监/研发总监  2006-10-09 03:38:01
RT,这里要强调的是并不是把鼠标放上去直接弹出,而是要点中后才弹出下拉明细
...全文
275 点赞 收藏 14
写回复
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
yeshucheng 2006-10-10
先谢谢楼上的朋友,真的很感谢:)
回复
梅雪香 2006-10-10
<html>
<head>
<title>下拉菜单示例</title>

<style type="text/css">
<!--
#divMenu{
position:absolute;
width:150px;
border:2px solid #CC9900;
font-size:12pt;
display:none;
background-color:#FFCCFF
}
#divMenu div{
width:100%;
border:1px solid #CC9999;
font-size:12pt;
}
-->
</style>
<script language="JavaScript">
<!--
var menu = null;
function getPosition(obj) {
var top=0;
var left=0;
var width=obj.offsetWidth;
var height=obj.offsetHeight;
while (obj.offsetParent) {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
return {"top":top,"left":left,"width":width,"height":height};
}
function ShowOrHideMenu(src){
if(menu){
if(menu.style.display=="block") menu.style.display="none";
else menu.style.display="block";
return;
}
var pos = getPosition(src);
var content ={
//显示文本:对应链接
"sina":"http://www.sina.com.cn",
"csdn":"http://www.csdn.net",
"javaworld":"http://www.javaworld.com"
}
menu = document.createElement("<div id=divMenu></div>");
menu.style.left=pos.left;
menu.style.top=pos.top + pos.height;
for(var t in content){
var div = document.createElement("div");
div.innerHTML = "<a href='" + content[t] + "'>" + t + "</a>";
menu.appendChild(div);
}
document.body.appendChild(menu);
menu.style.display="block"
}
//-->
</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">
<!--
.menutitle{
background-color:#00ff7f;
font-size:20pt;
}
.menu{
background-color:#ffff00;
font-size:15pt;
display:none;
}
-->
</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
<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">
<!-- saved from url=(0046)http://vip.5d.cn/flood/myjs/htm/menu/dmenu.htm -->
<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>
<!-- base code--><!-- 你可以改变菜单出现的绝对位置和外观风格-->
<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>
回复
lyfer 2006-10-09
呵呵
oClick="事件"

回复
郭大侠_ 2006-10-09
楼主说的是不是像qq那样的?
回复
fosjos 2006-10-09
楼主的意思是不是把onmouseover改成onclick就可以了?
回复
zzd8310 2006-10-09
帮顶
回复
yeshucheng 2006-10-09
如果不能使用JS那使用什么呢?
目前我想使用Tapestry做,但是这些还是不能脱离脚本语言吧

大家使用过googlebar吧,上面有很多按钮。现在很多菜单是使用鼠标放上去,然后就自然触发事件,相应的下拉列表就出现了。我的要求是按钮要使用点的方式才能出现下拉的显示!
不知道我说清楚没有
回复
飘零雾雨 2006-10-09
LZ能详细点么!
回复
liufei8463 2006-10-09
这个东西据我所知不能用js实现吧,select没那个属性啊!
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告