[Web]最简单的方法实现工具条菜单上的弹出式菜单

显示效果如下：



实现代码如下：PopupMenu.htm

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 工具条上的弹出式菜单 </ title >
     < style  type ="text/css" > ...
a:link
{...}{
    color: #000;
    text-decoration: none;
    font-weight: normal;
    padding: 0px 0px 2px 0px;
    font-size: 12px;
    display: block;
}
a:visited
{...}{
    color: #000;
    text-decoration: none;
    font-weight: normal;
    padding: 2px 0px 0px 0px;
    font-size: 12px;
    display: block;
}
a:hover
{...}{
        color: #000;
        text-decoration: none;
        padding: 0px 0px 2px 0px;
        font-size: 12px;
        display: block;
}
a:active
{...}{
    color: #000;
    text-decoration: none;
    padding: 2px 0px 0px 0px;
    font-size: 12px;
    display: block;
    display: block;
}

.MenuItem
{...}{
    display:block;
    width:60px;
    height:20px;
    font-size: 12px;
    float:left;
    text-align:center;
    padding:2px 0px 0px 0px;
}
        
</ style >

     < script  type ="text/javascript" > ...

    var popup = window.createPopup();
    var width;
    var height;
    
    function Pop_menu(divMenuList,width,height,toolbarMenuItem)
    ...{
        popup.document.body.innerHTML = divMenuList.innerHTML;
        
        popup.show(0,24,width,height,toolbarMenuItem);  
        
        // 0 和 23 是相对于toolbarMenuItem元素左上角的坐标点(x,y)
        // width 显示菜单的宽度
        // height 显示菜单的高度
        // toolbarMenuItem 要弹出菜单的对象
    }

     </ script >

</ head >
< body >


     <!-- 菜单条 -->
     < div  id ="toolbar_menu"  style ="width: 100%; height: 20px; background-color: #ece9d8;
        border: darkgray 1px solid;" >
         <!-- 菜单元素 -->
         < div  id ="MenuItem1"  class ="MenuItem" >
             < a  href ="#"  onfocus ="Pop_menu(filMenuList,120,125,MenuItem1)"  accesskey ="F" > 文件( < u > F </ u > ) </ a ></ div >
         < div  id ="MenuItem2"  class ="MenuItem" >
             < a  href ="#"  onfocus ="Pop_menu(filMenuList,120,125,MenuItem2)"  accesskey ="E" > 编辑( < u > E </ u > ) </ a ></ div >
         < div  id ="MenuItem3"  class ="MenuItem" >
             < a  href ="#"  onfocus ="Pop_menu(filMenuList,120,125,MenuItem3)"  accesskey ="V" > 视图( < u > V </ u > ) </ a ></ div >
         < div  id ="MenuItem4"  class ="MenuItem" >
             < a  href ="#"  onfocus ="Pop_menu(filMenuList,120,125,MenuItem4)"  accesskey ="S" > 网站( < u > S </ u > ) </ a ></ div >
         < div  style ="clear: both;" >
         </ div >
     </ div >
    
    
    
     <!-- 文件菜单 -->
     < div  id ="filMenuList"  style ="display: none;" >
         <!-- 菜单列表元素 -->
         < div  style =" width: 120px; height:auto; background-color: #eee; border: darkgray 1px solid;" >
        
             < div  onmousemove ="this.style.color='white'; this.style.background='#4169e1';"  onmouseout ="this.style.color='black';this.style.background='#eee'" >
                 < span  onclick ="parent.location.href='http://blog.csdn.net/qghboy'"  style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
             </ div >
             < div  onmousemove ="this.style.color='white'; this.style.background='#4169e1';"  onmouseout ="this.style.color='black';this.style.background='#eee'" >
                 < span  onclick ="parent.location.href='http://blog.csdn.net/qghboy'"  style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
             </ div >
             < div  onmousemove ="this.style.color='white'; this.style.background='#4169e1';"  onmouseout ="this.style.color='black';this.style.background='#eee'" >
                 < span  onclick ="parent.location.href='http://blog.csdn.net/qghboy'"  style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
             </ div >
             < div  onmousemove ="this.style.color='white'; this.style.background='#4169e1';"  onmouseout ="this.style.color='black';this.style.background='#eee'" >
                 < span  onclick ="parent.location.href='http://blog.csdn.net/qghboy'"  style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
             </ div >
             < div  onmousemove ="this.style.color='white'; this.style.background='#4169e1';"  onmouseout ="this.style.color='black';this.style.background='#eee'" >
                 < span  onclick ="parent.location.href='http://blog.csdn.net/qghboy'"  style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
             </ div >
            
         </ div >
     </ div >
</ body >
</ html >

提示：最为重要的就是

<script type="text/javascript">

 var popup = window.createPopup();
 var width;
 var height;
 
 function Pop_menu(divMenuList,width,height,toolbarMenuItem)
 {
  popup.document.body.innerHTML = divMenuList.innerHTML;
  
  popup.show(0,24,width,height,toolbarMenuItem); 
  
  // 0 和 23 是相对于toolbarMenuItem元素左上角的坐标点(x,y)
  // width 显示菜单的宽度
  // height 显示菜单的高度
  // toolbarMenuItem 要弹出菜单的对象
 }

    </script>
++++++++++++++++++++++++++++++++++

还有就是：通过 window.createPopup().show () 弹出来的菜单实际上脱离了父页面,所以父页面上的样式表对 弹出来的菜单界面是不起作用的。