html实现右键弹出菜单

最新推荐文章于 2023-09-06 18:12:50 发布

yaoxiaoxu

最新推荐文章于 2023-09-06 18:12:50 发布

阅读量4.9k

点赞数 3

分类专栏： html&css

本文链接：https://blog.csdn.net/yao_1996/article/details/108772760

版权

html&css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文展示了如何使用HTML、CSS和JavaScript来创建一个自定义的右键弹出菜单。通过添加oncontextmenu事件监听器到body元素，结合CSS实现样式布局和阴影效果，以及JavaScript来定位和显示菜单，实现了鼠标右键点击时显示菜单的功能。菜单项包括详情、操作、剪切、下载和上传等选项，并在鼠标点击其他地方时自动关闭。

摘要由CSDN通过智能技术生成

html&css实现右键弹出菜单

html代码

<body oncontextmenu="showMenu(event)">
<div class="contextmenu" id="context">
    <ul>
        <li><a href="javascript:toDetail_();">详情</a></li>
        <li><a href="javascript:toTelecontrol_();">操作</a> </li>
		<li><a href="javascript:;">剪切</a></li>
		<li><a href="javascript:;">下载</a></li>
		<li><a href="javascript:;">上传</a></li>
    </ul>
</div>
</body>

css代码

  ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #333;
    }
    .contextmenu {
        width: 200px;
        border: 1px solid #999;
        box-shadow: 3px 3px 3px #ccc;
        background-color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        display: none;
        z-index:9999999
    }
    .contextmenu li {
        height: 40px;
        line-height: 40px;
    }
    .contextmenu li a {
        display: block;
        padding: 0 30px;
    }
    .contextmenu li a:hover {
        background-color: #ccc;
        font-weight: bold;
        color: #fff;
    }

js代码

	
	    function showMenu(env){
	    	env.preventDefault();	    	
	        //env 表示event事件
	        // 兼容event事件写法
	        var e = env || window.event;
	        
	        // 获取菜单，让菜单显示出来
	       var context = document.getElementById("context");
	       context.style.display = "block";
	
	       //  让菜单随着鼠标的移动而移动
	       //  获取鼠标的坐标
	       var x = e.clientX;
	       var y = e.clientY;
	
	       //  调整宽度和高度
	       context.style.left =x-200+"px" //Math.min(w-202,x)+"px";
	       context.style.top = y+"px" //Math.min(h-230,y)+"px";
	
	      // return false可以关闭系统默认菜单
	       return false;
	    };
	  // 当鼠标点击后关闭右键菜单
	  document.onclick = function(){
		  closeMenu()
	
	  };
	  function closeMenu(){
			var contextmenu = document.getElementById("context");
		      contextmenu.style.display = "none";
	}