<html>
<head>
<title>Four Exciting Ways to Use the Popup Object</title>
<script>
var oPopup = window.createPopup();function richDropDown(order)
{
oPopup.document.body.innerHTML = document.all("oContextHTML" + order).innerHTML;
switch(order)
{
case 1:
oPopup.show(0, 28, 100, 250, dropdowno);
break;
case 2:
oPopup.show(105, 28, 100, 250, dropdowno);
break;
case 3:
oPopup.show(210, 28, 100, 250, dropdowno);
break; }}
function hideMenu()
{
    oPopup.hide();
}</script>
</head>
<body>
<h2>Four Exciting Uses of the Popup Object</h2>
<BR>
<table width="100%">
<tr><td width="100" height="27" id="dropdowno" align="left" style="background:#3366CC;  border-bottom:1px solid #99CCFF;  border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:100px">
<span style="cursor:hand;" onmouseover="richDropDown(1)" >
Click here &nbsp; <img src="UI_droparrow.gif" align="absmiddle" style=""></span></td>
<td width="100" height="27" id="dropdowna" align="left" style="background:#3366CC; border-bottom:1px solid #99CCFF;  border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:100px" ><span style="cursor:hand;" onmouseover="richDropDown(2)" >The second &nbsp; <img src="UI_droparrow.gif" align="absmiddle" style=""></span>
</td>
<td width="100" height="27" id="dropdownb" align="left" style="background:#3366CC; border-bottom:1px solid #99CCFF;  border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:100px" ><span style="cursor:hand; " onmouseover="richDropDown(3)" >The third &nbsp; <img src="UI_droparrow.gif" align="absmiddle" style=""></span>
</td>
<td width="100" height="27" id="dropdownc" align="left" style="background:#3366CC; border-bottom:1px solid #99CCFF;  border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:100px" ><span style="cursor:hand; " onmouseover="richDropDown(4)" >The third &nbsp; <img src="UI_droparrow.gif" align="absmiddle" style=""></span>
</td>
<td width="100" height="27" id="dropdownd" align="left" style="background:#3366CC; border-bottom:1px solid #99CCFF;  border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:100px" ><span style="cursor:hand; " onmouseover="richDropDown(5)" >The third &nbsp; <img src="UI_droparrow.gif" align="absmiddle" style=""></span>
</td>
<td width="100" height="27" id="dropdowne" align="left" style="background:#3366CC; border-bottom:1px solid #99CCFF;  border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:100px" ><span style="cursor:hand; " onmouseover="richDropDown(6)" >The third &nbsp; <img src="UI_droparrow.gif" align="absmiddle" style=""></span>
</td>
<td width="100" height="27" id="dropdownf" align="left" style="background:#3366CC; border-bottom:1px solid #99CCFF;  border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:100px" ><span style="cursor:hand; " onmouseover="richDropDown(7)" >The third &nbsp; <img src="UI_droparrow.gif" align="absmiddle" style=""></span>
</td>
<td></td>
</tr>
</table>
<BR>

解决方案 »

  1.   

    接上面~~~
    <DIV ID="oContextHTML1" STYLE="display:none;" onmouseout="hideMenu()">
    <div style="position:absolute; top:0; left:0; overflow-x:hidden; width:200; height:100;scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;">
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';" 
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px;  cursor:hand; filter:;">
       <SPAN ONCLICK="top.mainFrame.location.href='register.jsp'">
        Custom Drop-Down Item 1</SPAN>
        </DIV>
       <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';"  
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
        <SPAN ONCLICK="parent.window.open('http://msdn.microsoft.com')">
        Custom New Blank Page</SPAN> 
        </DIV>
     <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';"  
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
        <SPAN ONCLICK="top.location.href='register.jsp'">
        Custom Drop-Down Item 3</SPAN> 
        </DIV>
    <DIV ID="oContextHTML2" STYLE="display:none;">
    <div style="position:absolute; top:0; left:0; overflow-x:hidden; width:200; height:100;scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;">
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';" 
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px;  cursor:hand; filter:;">
        <SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
        Anthoer Drop-Down Item 1</SPAN>
        </DIV>
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';"  
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
        <SPAN ONCLICK="parent.location.href='register.jsp'">
        Anthoer Drop-Down Item 2</SPAN> 
        </DIV>
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';"  
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
        <SPAN ONCLICK="parent.location.href='register.jsp'">
        Anthoer Drop-Down Item 3</SPAN> 
        </DIV>
    <DIV ID="oContextHTML3" STYLE="display:none;">
    <div style="position:absolute; top:0; left:0; overflow-x:hidden; width:200; height:100;scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;">
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';" 
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px;  cursor:hand; filter:;">
        <SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
        Third Drop-Down Item 1</SPAN>
        </DIV>
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';"  
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
        <SPAN ONCLICK="parent.location.href='register.jsp'">
        Third Drop-Down Item 2</SPAN> 
        </DIV>
        <DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';" 
             onmouseout="this.style.filter='';"  
             STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
        <SPAN ONCLICK="parent.location.href='register.jsp'">
        Third Drop-Down Item 3</SPAN> 
        </DIV>
    </div>
    </DIV>
    </body>
    </html>
      

  2.   

    怎么没人理我啊~!!非常紧急啊~~!大家帮帮我吧~!好不容易找到了opopup这种方法来实现不被框架遮挡住,但我的菜单是要三级的,而现在我只知道做二级的,求求各位大侠帮帮我吧~!!
      在这里谢谢了~!!!!!^_^
      

  3.   

    小丫:去这个地址下一个吧, 第一项的最后一个是个三级的,你可以看看,比你找的那个好多了.http://agetime.joo.cn/jsmenu/另:xiaoya317(小雅) 这个也是你么?
      

  4.   

    TO:Newrocky(罗罗) 我要的是导航菜单,不是联动菜单。而且我要的是不会被框架遮住的菜单啊~!
     TO:kisslan(郁忧的曼陀萝) 你一直都在帮我,非常感谢~!但你说的那个东西我放到我的框架里面就显示不出来啊~!!这是为什么?
      

  5.   

    我也曾碰上过这样的问题,
    好像在msdn上碰上过这样的解决方案,但由于我的框架页面里含有单间线动画,导致这样的跨框架菜单无法正常运作;你看你的框架结构能不能改成iframe的,这样的菜单脚本选择范围就大了
      

  6.   

    我给你一个四级的<title>菜单连动类的设计</title>
    <select name='company' size='1' onchange='changeformvalue(document.all.company.options[document.all.company.selectedIndex].value,1)'>
    </select>
    <br><select name='depart' size='1' onchange='changeformvalue(document.all.depart.options[document.all.depart.selectedIndex].value,2)'>
    </select>
    <br><select name='employee' size='1' onchange='changeformvalue(document.all.employee.options[document.all.employee.selectedIndex].value,3)'>
    </select>
    <br><select name='sex' size='1'>
    </select>
    <script language='javascript'>
    var company_array=new Array();
    var depart_array=new Array();
    var employee_array=new Array();
    var sex_array=new Array();
    company_array[0]=',1,北京振亮投资有限公司';
    company_array[1]=',3,幼儿园';
    company_array[2]=',4,21世纪学校';
    company_array[3]=',5,北京创联世纪科技有限公司';
    depart_array[0]='1,8,董事会';
    depart_array[1]='1,9,董事长';
    depart_array[2]='1,10,总经理';
    depart_array[3]='1,11,副总经理(总工程师)';
    depart_array[4]='4,12,总经理';
    depart_array[5]='4,13,总经理办公室';
    depart_array[6]='3,14,总经理';
    depart_array[7]='3,15,办公室';
    depart_array[8]='1,16,财务部';
    depart_array[9]='5,17,技术部';
    depart_array[10]='5,18,市场部';
    depart_array[11]='5,19,财务部';
    depart_array[12]='5,20,副总经理室';
    depart_array[13]='5,21,总经理室';
    employee_array[0]='8,10,ghl';
    employee_array[1]='16,11,fff';
    employee_array[2]='16,13,qyf';
    employee_array[3]='8,16,lm';
    employee_array[4]='9,17,test008';
    employee_array[5]='8,19,我是一个兵';
    employee_array[6]='8,20,我是女生';
    employee_array[7]='8,23,abc';
    employee_array[8]='8,24,test';
    employee_array[9]='8,25,郁闷ing';
    employee_array[10]='8,26,wang';
    sex_array[0]='10,1,男';
    sex_array[1]='11,1,男';
    sex_array[2]='13,1,男';
    sex_array[3]='16,0,女';
    sex_array[4]='17,1,男';
    sex_array[5]='19,1,男';
    sex_array[6]='20,1,男';
    sex_array[7]='23,1,男';
    sex_array[8]='24,1,男';
    sex_array[9]='25,1,男';
    sex_array[10]='26,1,男';
    </script>
    <script language='javascript'>
    var FormAndNoMapArray=new Array();
    FormAndNoMapArray[0]='1,company';
    FormAndNoMapArray[1]='2,depart';
    FormAndNoMapArray[2]='3,employee';
    FormAndNoMapArray[3]='4,sex';function changeformvalue(toplevelvalue,toplevel) {
      var toplevelformname;
      for (formandnomapno=0;formandnomapno<FormAndNoMapArray.length;formandnomapno++) {
        currentlevelno=FormAndNoMapArray[formandnomapno].split(',')[0];
        if (toplevel==0) {
          if (currentlevelno==1) {
            toplevelformname=FormAndNoMapArray[formandnomapno].split(',')[1];
          }
        } else {
          if (toplevel==currentlevelno-1) {
            toplevelformname=FormAndNoMapArray[formandnomapno].split(',')[1];
          }
        }
      }
      eval('document.all.'+toplevelformname+'.length=0;');
      var i,currentarraylen,temparrayvalue;
      eval('currentarraylen='+toplevelformname+'_array.length;');
      for (i=0;i<currentarraylen;i++) {
      if (toplevel==0) {
        eval('document.all.'+toplevelformname+'.options[document.all.'+toplevelformname+'.length]=new Option('+toplevelformname+'_array[i].split(",")[2],'+toplevelformname+'_array[i].split(",")[1]);');
      } else {
        eval('temparrayvalue='+toplevelformname+'_array[i].split(",")[0];');
        if (temparrayvalue==toplevelvalue) {
           eval('document.all.'+toplevelformname+'.options[document.all.'+toplevelformname+'.length]=new Option('+toplevelformname+'_array[i].split(",")[2],'+toplevelformname+'_array[i].split(",")[1]);');
        }
      }
      }
      currentlevelnoforchange=toplevel+1;
      currentlevelformname=FormAndNoMapArray[toplevel].split(',')[1];
      if (currentlevelnoforchange<FormAndNoMapArray.length) {
         eval('currentlevelformvalue='+currentlevelformname+'.value;');
         changeformvalue(currentlevelformvalue,currentlevelnoforchange);
      }
    }
    changeformvalue('',0);
    for (i=0;i<FormAndNoMapArray.length;i++) {
      if (FormAndNoMapArray[i].split(',')[0]!=1) {
        tempuplevelformname=FormAndNoMapArray[i-1].split(',')[1];
        eval('tempuplevelformvalue='+tempuplevelformname+'.value;');
        changeformvalue(tempuplevelformvalue,FormAndNoMapArray[i].split(',')[0]-1);
      }
    }
    </script>
      

  7.   

    TO: ghlfllz(风流浪子) 老兄~!我要的不是联动菜单啊~!没有看清我的问题~!但还是谢谢你的支持啊~!
    TO: csdntzg(木乃e) 换成iframe的啊?我网页的结构好象不允许啊~!   各位大侠,是不是opupop不能做出有三级子菜单的啊?