原生 HTML/CSS/JS 实现右键菜单和二级菜单

最新推荐文章于 2025-02-06 00:36:10 发布

@胡海龙

最新推荐文章于 2025-02-06 00:36:10 发布

阅读量2.5k

点赞数 13

文章标签： html css javascript

本文链接：https://blog.csdn.net/hhl18730252820/article/details/137012567

版权

本文介绍了一种JavaScript实现的右键菜单，通过监测窗口大小和用户点击位置动态调整菜单的位置，确保在用户点击边界时不会遮挡菜单。代码展示了如何处理右键点击事件、菜单显示和二级菜单的隐藏与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章来源：www.huhailong.vip 站点
文章源地址：https://www.huhailong.vip/article/1764653112011841538

Demo效果演示地址
先看效果图
{ { {width=“auto” height=“auto”}}}

需要注意的就是边界检测处理，到极端点击底部和右侧时如果不做处理会遮挡菜单，影响使用，我的解决方案是动态监测窗口的宽高，根据右击时的横纵坐标判断菜单的最终位置，如果右击的纵坐标+菜单高度 >= 窗口高度则将菜单显示的高度坐标定位菜单高度，防止下方遮挡，如果右击的横坐标+菜单宽度 >= 窗口的宽度则菜单横坐标为窗口宽度减去两倍的窗口宽度，避免菜单遮挡。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右键菜单</title>
    <!-- 阿里图标 -->
    <!-- <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/c/font_4453355_yizetjv4jeo.css" /> -->
    <style>
        html,
        body {
     
            margin: 0;
            overflow: hidden;
            width: 100%;
        }

        #test-area {
     
            border: 1px solid black;
            width: 100%;
            height: 100vh;
            background-color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .menu {
     
            width: 200px;
            display: flex;
            flex-direction: column;
            position: absolute;
            border: 1px solid gray;
            background-color: #333333;
            color: white;
            border-radius: 4px;
            font-size: 14px;
        }

        .menu>ul {
     
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu>ul>li {
     
            padding: 10px;
            cursor: pointer;
        }

        .menu>ul>li:hover {
     
            background-color: #1A6CE7;
        }

        hr {
     
            margin: 0;
            border: 1px solid gray;
        }

        .submenu {
     
            padding: 0;
            left: 200px;
            margin-top: -32px;
            position: absolute;
            display: none;
        }

        .link {