[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 () 弹出来的菜单实际上脱离了父页面,所以父页面上的样式表对 弹出来的菜单界面是不起作用的。

弹出式菜单的实现

弹出式菜单的实现    VB中在菜单设计窗口中设计的菜单是下拉式菜单。下拉式菜单是用户在任何时候都可以在顶端菜单条上选择后拉出的菜单,而弹出式菜单则是在程序界面的一定区域内点按鼠标键后出现的菜单。在某...
  • surro
  • surro
  • 2007年08月20日 18:48
  • 1188

【Servlet】最简单的Servlet JavaWeb程序

其实JSP最基础为JSP+Servlet+JDBC,Struts+Hibernate+Spring只是让这个最基本的东西更具有方便性与条理性。 基本没有人把代码全部写到一个JSP页面,完全用JSP实现...
  • yongh701
  • yongh701
  • 2014年10月16日 20:16
  • 5720

MFC中教你怎么编写弹出式菜单

在VS2008中,不能像VC++6.0那样通过Compnents and Controls来自动添加弹出式菜单,需要手动添加。可以采用两种方式创建弹出式菜单。 一、利用现有的菜单资源创建 (1)首...
  • jiadabin
  • jiadabin
  • 2014年03月31日 18:27
  • 2050

js实现弹出式菜单

 Posted on 2006-12-15 17:02 ddr888 阅读(182) 评论(0)  编辑 收藏 引用 网摘 所属分类: javascript代码 、css+xhtml ...
  • zhihua_1983
  • zhihua_1983
  • 2007年01月20日 13:51
  • 1413

利用XML的网页菜单/弹出式菜单/工具条

WebMenu V1.0WebToolbar V1.0菜单编辑器V1.0牧月天涯(WWWFIND)2005/01编制,欢迎交流……QQ:9043403Email:wwwfind@sina.comBlo...
  • WWWFIND
  • WWWFIND
  • 2005年02月17日 10:19
  • 2932

MATLAB GUI设计之弹出式菜单的使用

弹出式菜单在MATLAB GUI设计中常常出现。比如串口助手、绘制图形等经常见到弹出式菜单如下图所示: 使用方法: 一、准备工作1、从MATLAB GUIDE中拖出一个弹出式菜单 2...
  • kabuto_hui
  • kabuto_hui
  • 2016年03月12日 17:07
  • 11784

创建网页Video上的悬浮工具条(Create toolbar overflow video on webpage)

创建网页Video上的悬浮工具条Create toolbar overflow video on webpage 前些天研究使用javascript脚本操作网页上的视频控件.因为设计的需要,想要在视频...
  • guanzhongs
  • guanzhongs
  • 2006年06月19日 20:29
  • 1959

javascript超级简单的写出轮播图

本人小白一枚,刚刚学习JavaScript,发表也是为了督促自己学习,大家共勉。
  • xiaoLong2345
  • xiaoLong2345
  • 2016年11月04日 20:20
  • 636

汇编程序:简单的菜单

【任务】编制一个菜单程序,在屏幕上显示如下信息: MENU 1. FILE 2. EDIT' 3. COMPILE'...
  • sxhelijian
  • sxhelijian
  • 2017年05月13日 21:49
  • 920

Linux下面的终端编程 做一个简单的菜单

纯爷们,纯干货。代码拿来: #include #include char *menu[] = { "a - add new record", "d - delete record", "...
  • u011046042
  • u011046042
  • 2015年09月23日 21:38
  • 3522
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[Web]最简单的方法实现工具条菜单上的弹出式菜单
举报原因:
原因补充:

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