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

墨衍会员 · AI 创作全网分发码龄21年

关注

原创最新推荐文章于 2025-10-05 16:16:54 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

程序员通勤双肩包，下单送全年 CSDN 会员防泼水面料电脑包，保护笔记本电脑，背负轻便，下单再赠 Coding Plan，看技术干货、查文档、下载源码，一站式搞定学习需求阅读详情

显示效果如下：

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

收录于

(3)Web

标签

#工具 #web #div #menu #class

本内容遵循 CC 4.0 BY-SA 版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

uniapp富文本组件editor的使用文档https://uniapp.dcloud.io/api/media/editor-context?id=editorcontext 新建组件editor <template> <view class="container"> <view class="page-body"> <view class='wrapper'> <view class='toolbar' @tap="format" style="height: 130p 阅读详情

0

qghboy

博客等级

码龄21年 22粉丝 42原创

+ 关注专栏目录订阅专栏

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。