手动添加popup弹出式菜单

本文介绍如何在Windows应用程序中实现右键弹出菜单的功能。具体步骤包括:在ResourceView窗口中的Menu文件下添加菜单IDR_MENU1;在View类中通过WM_RBUTTONDOWN消息触发加载并显示菜单。
摘要由CSDN通过智能技术生成

1.在ResourceView窗口中的Menu文件下添加一个菜单IDR_MENU1

2.在View类中添加消息处理函数WM_RBUTTONDOWN,在该函数体中输入以下代码:

CMenu menu;

menu.LoadMenu(IDR_MENU1);//将IDR_MENU1保存到menu中

CMenu* pPopup=menu.GetSubMenu(0);//获取menu中保存的菜单中的第一个子菜单,并用pPopup指向menu对象

ClientToScreen(&point);//将客户区坐标转换为屏幕坐标

pPopup->TrackPopupMenu(TPM_LEFTALIGN | TPM_RIGHTBUTTON,point.x,point.y,this);

你可以使用 HTML、CSS 和 JavaScript 来实现这个功能。首先,你需要创建一个 HTML 结构来表示菜单。例如: ```html <ul class="menu"> <li> <a href="#">菜单项 1</a> <ul class="sub-menu"> <li><a href="#">子菜单项 1</a></li> <li><a href="#">子菜单项 2</a></li> <li><a href="#">子菜单项 3</a></li> </ul> </li> <li><a href="#">菜单项 2</a></li> <li> <a href="#">菜单项 3</a> <ul class="sub-menu"> <li><a href="#">子菜单项 1</a></li> <li><a href="#">子菜单项 2</a></li> <li><a href="#">子菜单项 3</a></li> </ul> </li> </ul> ``` 然后,你可以使用 CSS 来控制菜单的样式,包括菜单项和子菜单的显示与隐藏。例如: ```css .menu { list-style: none; margin: 0; padding: 0; } .menu > li { position: relative; } .menu > li > a { display: block; padding: 10px; background-color: #eee; color: #333; text-decoration: none; } .menu > li > .sub-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 10px; background-color: #eee; border: 1px solid #ccc; } .menu > li:hover > .sub-menu { display: block; } .menu > li > a::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-top: 5px solid #333; border-right: 5px solid transparent; border-bottom: 0 solid transparent; border-left: 5px solid transparent; } .menu > li.open > a::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-top: 0 solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #333; border-left: 5px solid transparent; } ``` 上面的 CSS 代码控制了菜单的一些基本样式,例如菜单项的背景色、字体颜色和鼠标悬浮时子菜单的显示。同时,它还使用了伪元素 `::after` 来添加向下的箭头。 接下来,你需要使用 JavaScript 来添加事件处理程序,使得菜单项可以手动展开和折叠。例如: ```js const menuItems = document.querySelectorAll(".menu > li"); menuItems.forEach((menuItem) => { const subMenu = menuItem.querySelector(".sub-menu"); if (subMenu) { menuItem.addEventListener("click", () => { menuItem.classList.toggle("open"); }); } }); ``` 上面的 JavaScript 代码首先获取所有菜单项,并遍历每个菜单项。如果菜单项包含子菜单,就给它添加一个点击事件处理程序。点击时,它会切换菜单项的 `open` 类来控制子菜单的显示与隐藏。同时,你还需要修改 CSS,添加 `.menu > li.open > .sub-menu` 类的样式来控制向上的箭头的显示。 ```css .menu > li.open > .sub-menu { display: block; } .menu > li.open > a::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-top: 0 solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #333; border-left: 5px solid transparent; } ``` 这样,你就可以实现一个具有手动展开和折叠功能,带有向上和向下箭头的菜单了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值