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

原创 2007年09月28日 14:22:00



显示效果如下:



实现代码如下: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">
            
<href="#" onfocus="Pop_menu(filMenuList,120,125,MenuItem1)" accesskey="F">文件(<u>F</u>)</a></div>
        
<div id="MenuItem2" class="MenuItem">
            
<href="#" onfocus="Pop_menu(filMenuList,120,125,MenuItem2)" accesskey="E">编辑(<u>E</u>)</a></div>
        
<div id="MenuItem3" class="MenuItem">
            
<href="#" onfocus="Pop_menu(filMenuList,120,125,MenuItem3)" accesskey="V">视图(<u>V</u>)</a></div>
        
<div id="MenuItem4" class="MenuItem">
            
<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 () 弹出来的菜单实际上脱离了父页面,所以父页面上的样式表对 弹出来的菜单界面是不起作用的。

相关文章推荐

j2se菜单menu和工具条toolbar的简单使用例子

public class my_menu extends JFrame{ //定义组件 //定义菜单的bar JMenuBar jmb = new JMenuBar(); //定义一级菜单...

VB实现窗口的弹出式菜单...

  • 2009年10月08日 01:56
  • 2KB
  • 下载

Android心得体会 -- Activity改写成类似Dialog实现弹出式菜单

今天做了一个需要做一个弹出式的PopupWindow, 但是无意间找到了一种将Activity伪装成Dialog的方法,在这里记录一下~~ 首先,需要创建一个新的style           ...

js 实现 左键弹出式菜单

  • 2010年03月30日 15:20
  • 1KB
  • 下载

无图片实现圆角弹出式多级菜单

  • 2010年02月08日 10:18
  • 11KB
  • 下载

自定义PopupWindow实现底部弹出式菜单

现在很多应用都采用底部弹出式菜单,觉得挺好看的,先上图 底部弹出菜单通过自定义PopupWindow实现,很简单的一个自定义 1.自定义PopupWindow代码:public class M...

Java弹出式菜单的实现

  • 2012年12月09日 17:21
  • 1KB
  • 下载

CMFCToolBar工具条添加下拉菜单按钮

想在CMFCToolBar工具条上添加下拉菜单按钮,网上找了半天,都没有例程,研究了一天,终于把ComboBox,DropDownButton和menuButton控件加进去了,不过它们只有定义为CM...

c-free 5.0 菜单,工具条丢失解决

刚开始提起学习c语言的尽头,发现c-free挺好用,适合新手。谁知道今天早上一打开出现了一个窝心事:菜单和工具条全部不见了 用快捷键打开一个源代码,F5也能运行。想着程序没有被破坏,可能被隐藏了,点...
  • erhisme
  • erhisme
  • 2017年05月05日 11:28
  • 481

Qt学习之路(12): 菜单和工具条

在前面的QMainWindow的基础之上,我们开始着手建造我们的应用程序。虽然现在已经有一个框架,但是,确切地说我们还一行代码没有写呢!下面的工作就不那么简单了!在这一节里面,我们要为我们的框架添加菜...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[Web]最简单的方法实现工具条菜单上的弹出式菜单
举报原因:
原因补充:

(最多只允许输入30个字)