这个东西据我所知不能用js实现吧,select没那个属性啊!
解决方案 »
- 关于一个JQ的问题?
- 一个极其简单的JavaScript问题!
- 复选框产生列表的问题??
- jQuery取相同ID DIV的不同高度
- 请问如何防止输入\斜杠键
- 如何在textarea文本域中显示HTML代码?
- 如何让一页面中播放音乐?
- 在线给分,急急急!!如何从数据库中读取数据,然后显示在两极相关联选择框中的问题!
- 如何在一个函数中调用另一个函数??????急!!!!!!!!!谢谢了
- 分类导航菜单代码---上这个网站的左边全部需求分类导航中鼠标停在主分类时子分类右边显示怎么改把子分类显示在左边??谢谢!
- 一个奇怪的问题,困扰了我很长时间,解答100分送上
- 循环过程中,响应其他事件操作的函数是什么?
目前我想使用Tapestry做,但是这些还是不能脱离脚本语言吧大家使用过googlebar吧,上面有很多按钮。现在很多菜单是使用鼠标放上去,然后就自然触发事件,相应的下拉列表就出现了。我的要求是按钮要使用点的方式才能出现下拉的显示!
不知道我说清楚没有
<!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>
<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>
因为我对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>”不想让它移动,覆盖都行
<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>