html`css`js 右键菜单

最新推荐文章于 2024-03-25 14:12:31 发布

扬的字节

最新推荐文章于 2024-03-25 14:12:31 发布

阅读量454

点赞数 7

文章标签： html css javascript

本文链接：https://blog.csdn.net/2302_77163393/article/details/136092255

版权

在HTML、CSS和JavaScript中创建一个自定义的右键菜单可以通过以下几个步骤实现：

HTML结构：首先，需要为右键菜单创建一个HTML结构。这通常是一个隐藏的div元素，其中包含你想要在右键点击时显示的菜单项。
CSS样式：接下来，需要为右键菜单添加一些CSS样式。你可以使用CSS来定义菜单的外观、位置和行为。
JavaScript逻辑：最后，需要使用JavaScript来添加右键点击事件监听器，并在用户右键点击时显示菜单。当用户选择菜单项时，可以执行相应的操作。

以上为效果，以下为源码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bata</title>
	<style>
		#customMenu {
			display: none;
			width: 160px;
			position: absolute;
			background-color: rgb(45, 45, 45);
			border: 1px solid rgb(45, 45, 45);
			border-radius: 5px;
			padding: 5px;
			z-index: 1000;
		}

		#customMenu li {
			list-style: none;
			padding: 3px 0;
			cursor: pointer;
		}

		#customMenu li:hover {
			background-color: rgb(0, 110, 225);
			border-radius: 5px;
		}

		a {
			font-family: "鸿蒙体";
			width: 150px;
			color: #fff;
			padding: 8px;
			text-decoration: none;
			font-size: 13px;
		}

		li {
			font-family: "鸿蒙体";
			color: #fff;
			padding: 8px;
			text-decoration: none;
			font-size: 13px;
		}
	</style>
</head>

<body>

	<div id="content" style="width: 100%; height: 100%; background-color: #ddd; position: relative;">
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
		<p>网页内容</p>
	</div>

	<ul id="customMenu">
		<li><a href="" onclick="alert('复制')">❏ 复制</a>Ctrl+C</li>
		<li><a href="index.html">⇙ 主页</a></li>
		<li><a href="" onclick="alert('Ctrl+D')">★ 添加到收藏夹</a>Ctrl+D</li>
		<li><a href="" onclick="alert('暂时不支持此操作')">&lsaquo;/&rsaquo; 开源</a></li>
		<li><a href="">&#8635; 刷新</a>Ctrl+R</li>
		<li><a href="">''' 属性</a>关于网站</li>
	</ul>

	<script>
		document.getElementById('content').addEventListener('contextmenu', function(e) {  
        e.preventDefault(); // 阻止默认上下文菜单  
  
        var customMenu = document.getElementById('customMenu');  
        customMenu.style.display = 'block';  
        customMenu.style.left = e.pageX + 'px';  
        customMenu.style.top = e.pageY + 'px';  
  
        // 当点击其他地方时，隐藏自定义菜单  
        document.addEventListener('click', function() {  
            customMenu.style.display = 'none';  
        }, { once: true });  
    }); 

	    // 阻止点击菜单外的区域时，二级菜单不消失的问题  
		document.querySelector('#customMenu').addEventListener('mouseleave', function(e) {  
        var relatedTarget = e.relatedTarget;  
        if (!customMenu.contains(relatedTarget)) {  
            customMenu.style.display = 'none';  
        }  
    }); 
	</script>

</body>

</html>

如果大家觉得还好的话，给我点击一个关注吧，谢谢大家

扬的字节

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
html`css`js 右键菜单

最后，需要使用JavaScript来添加右键点击事件监听器，并在用户右键点击时显示菜单。当用户选择菜单项时，可以执行相应的操作。：接下来，需要为右键菜单添加一些CSS样式。你可以使用CSS来定义菜单的外观、位置和行为。：首先，需要为右键菜单创建一个HTML结构。元素，其中包含你想要在右键点击时显示的菜单项。以上为效果，以下为源码。
复制链接

扫一扫