JS-右键菜单

最新推荐文章于 2022-04-15 16:18:50 发布

魑.魅.魍.魉

最新推荐文章于 2022-04-15 16:18:50 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_41998682/article/details/92053005

js 专栏收录该内容

17 篇文章

订阅专栏

本文展示了一个使用CSS和JavaScript创建的上下文菜单实例。通过隐藏的div元素和鼠标右键事件监听，实现了自定义的浏览器右键菜单，菜单项包括多个链接选项。

    <style>
        #menu {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        ul{
            /*去点*/
            list-style-type: none;
            margin: 0px;
            padding: 5px;
            border: 1px solid #272822;
        }
        /*去下划线*/
          ul a{
            text-decoration: none;
            color: #000;
        }

    </style>

 <div id="menu">
        <ul>
            <li><a href="www.baidu.com" target="_blank">百度</a></li>
            <li><a href="www.baidu.com" target="_blank">百度1</a></li>
            <li><a href="www.baidu.com" target="_blank">百度2</a></li>
        </ul>
    </div>

<script>
    document.oncontextmenu = function (event) {
        x = event.clientX;
        y = event.clientY;
        menu.style.left = x + 15 +'px';
        menu.style.top = y + 15+ 'px';
        menu.style.display = 'inline';
        return false;
    }
</script>

在这里插入图片描述