Html 如何在单击div时在electron js中打开菜单

我做了一个自定义标题栏应用程序，然后我给了它一个

文件
菜单

现在我想点击这个菜单打开一个菜单。我想要一个弹出窗口，但是弹出窗口不应该是菜单的标准窗口弹出窗口，我也想定制它……但是如果需要花费太多时间，创建一个新窗口可能会变得非常乏味

很可能我想实例化一个部分，但我不知道如何做

当前形势

我有一个窗口，有一个容器div，有一个按钮div，有3个最小化、最大化、关闭的窗口

#按钮还有两个div.menu1和.menu2。我希望这些菜单的行为与windows中的普通菜单类似，如文件和编辑菜单

    <div id="container">
        <nav>
        <div id="buttons">
          <div id="file">
            <span class = "menu1">file</span>  
          </div>
          <div id="about_us">
            <span class = "menu2">about..us</span>
          </div>
          <div id="minimize" onclick="min()">
            <span>-</span>
          </div>
          <div id="maximize" onclick="max()">
            <span>+</span>
          </div>
          <div id="close" onclick="uff()">
            <span>&times;</span>
          </div>
        </div>
      </nav>
    </div>


文件
关于我们
-
+
&时代；

结果是

所有菜单和按钮都是可点击的，并具有悬停颜色
在这里，您需要执行以下操作：

用html和css创建弹出窗口。使用位置：绝对位置；和z-index，使其覆盖应用程序的其余部分


然后使用css类隐藏弹出窗口，例如
。隐藏将弹出窗口设置为
显示：无


现在需要一小段javascript来切换该.hide类。类似这样的函数：
consttogglepopup=（）=>document.querySelector（'.popup'）.classList.toggle（'hide'）


通过单击其中一个元素触发togglePopup脚本：

常量触发器=document.querySelector（“#idOrClassOfTriggerElement”）

trigger.addEventListener（'click'，（）=>togglePopup（）


使用相同类型的技术添加关闭弹出窗口的方法–将eventlistener添加到触发器元素（例如X图标）并调用与#3中相同的切换函数


希望这是你想要实现的

编辑：弹出式覆盖的示例代码：


const popup=document.querySelector（“.popup”）
const closeBtn=document.querySelector（“.popup close”）
const openBtn=document.querySelector（'.open'）
const body=document.querySelector（'body'）
常量showPopup=（）=>{
popup.classList.add（'fade-in'）
body.classList.add（'scroll-stop'）
}
常量hidePopup=（）=>{
popup.classList.remove（'fade-in'）
popup.classList.add（'fade-out'）
body.classList.remove（'scroll-stop'）
设置超时（（）=>{
popup.classList.remove（'fade-out'）
}, 500)
body.focus（）；
}
openBtn.addEventListener（'单击'，显示弹出窗口）
closeBtn.addEventListener（'click'，hidePopup）
.popup{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景：#fefefe；
z指数：9；
不透明度：0；
指针事件：无；
溢出：滚动；
}
.弹出式内部{
宽度：100%；
位置：相对位置；
填充：6%16%0；
}
.弹出关闭{
位置：相对位置；
z指数：10；
文本对齐：居中；
颜色：#aaa；
字号：4rem；
光标：指针；
位置：固定；
右：3%；
最高：3%；
}
.popup close:：before{
内容：“\00d7”；
}
.弹出关闭：悬停：：之前{
颜色：#000；
过渡期：0.6秒，全部放松；
}
.打开{
文本对齐：居中；
光标：指针；
背景：透明；
填充：1rem2rem；
边框：2倍实心；
边界半径：6px；
颜色：#000；
字体大小：粗体；
位置：绝对位置；
最高：25%；
左：44%；
}
.打开：悬停{
背景：#FFFFFF 18；
}
.淡入{
不透明度：1；
指针事件：未设置；
过渡期：0.3秒全部缓解；
}
.淡出{
不透明度：0；
指针事件：无；
过渡期：0.3秒全部缓解；
}
.背景{
高度：100vh；
宽度：100vw；
背景：橄榄；
保证金：0；
填充：0；
}

打开弹出窗口
这是一个弹出标题
弹出内容

你好，Shaurya，你能告诉我们你尝试了什么吗？展示一些代码，我们可以更好地理解你想要实现的目标。@anatolhiman ya将编辑这个问题，这很有帮助，但有一个疑问，我如何在html和css中创建
弹出窗口
，它应该是一个div吗？还是其他更好的东西？因此，请继续来自你的坚定（因为事实证明我在创建任何严肃项目方面没有那么丰富的经验）弹出窗口将一直存在，但只在单击文件div时显示？是的，这是正确的。除非您在React、Vue或其他有助于延迟加载组件的前端框架中创建页面，否则您需要在从服务器发送到客户端（浏览器）的代码中包含所有内容这样它就可以随时显示，因为当你想显示弹出窗口时，你不能重新加载页面并从服务器请求更多的html。这意味着html应该包含一开始的弹出窗口，但用CSS隐藏在视图中。你用div创建它是的，我可以在我的答案中添加一些示例代码。哦…这是基本的，但我不是那次经历，我下次会做得更好，顺便说一句，我最终实现了同样的东西，但有了更基本的功能