Context Menus

This JavaScript program shows how to create a context menu in JavaScript.

ContextMenus.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's CSS</title>
		<style>
			.context-menu {
				position: absolute;
				text-align: center;
				background: lightgray;
				border: 1px solid black;
			}
			.context-menu ul {
				padding: 0px;
				margin: 0px;
				min-width: 150px;
				list-style: none; /* Display no bullet points on the list items */
			}
			.context-menu ul li {
				padding-bottom: 2px;
				padding-top: 2px;
				border: 1px solid black;
			}
			.context-menu ul li a {
				text-decoration: none;
				color: black;
				min-width: 150px;
			}
			.context-menu ul li:hover {
				background: darkgray;
			}
		</style>
		<script>
			document.onclick = HideMenu;
			document.oncontextmenu = RightClick;
			
			function HideMenu() {
				document.getElementById("contextMenu").style.display = "none";
			}
			
			function GoToLink(e) {
				window.location.href = e.srcElement.firstChild.href;
			}
			
			function RightClick(e) {
				e.preventDefault();
				if (document.getElementById("contextMenu").style.display == "block")
					hideMenu();
				else {
					let menu = document.getElementById("contextMenu")
					menu.style.display = 'block';
					menu.style.left = e.pageX + "px";
					menu.style.top = e.pageY + "px";
				}
			}
		</script>
	</head>
	<body>
		<h1 id="idPart1" style="text-align: center;color: red; background-color: #FFC0C0; border: 2px red solid; height: 100px;">Part 1</h1>
		<h1 id="idPart2" style="text-align: center;color: lime; background-color: #C0FFC0; border: 2px lime solid; height:100px;">Part 2</h1>
		<h1 id="idPart3" style="text-align: center;color: blue; background-color: #C0C0FF; border: 2px blue solid; height:100px;">Part 3</h1>
		<h1 id="idPart4" style="text-align: center;color: teal; background-color: #C0FFFF; border: 2px teal solid; height:100px;">Part 4</h1>
		<h1 id="idPart5" style="text-align: center;color: purple; background-color: #FFC0FF; border: 2px purple solid; height:100px;">Part 5</h1>
		<h1 id="idPart6" style="text-align: center;color: olive; background-color: #FFFFC0; border: 2px olive solid; height:100px;">Part 6</h1>
		<div style="height:1000px;"></div>

		<div id="contextMenu" class="context-menu" style="display:none">
			<ul>
				<!-- Use style="pointer-events: none;" to prevent the default link -->
				<li onclick="GoToLink(event)"><a href="#idPart1" style="pointer-events: none;">Part 1</a></li>
				<li onclick="GoToLink(event)"><a href="#idPart2" style="pointer-events: none;">Part 2</a></li>
				<li onclick="GoToLink(event)"><a href="#idPart3" style="pointer-events: none;">Part 3</a></li>
				<li onclick="GoToLink(event)"><a href="#idPart4" style="pointer-events: none;">Part 4</a></li>
				<li onclick="GoToLink(event)"><a href="#idPart5" style="pointer-events: none;">Part 5</a></li>
				<li onclick="GoToLink(event)"><a href="#idPart6" style="pointer-events: none;">Part 6</a></li>
			</ul>
		</div>
	</body>
</html>

Core JavaScript

Context Menus

ContextMenus.html

Output