JavaScript Program to Create Context Menu
Write a JavaScript program to create context menu.
Source Code
<html>
<head>
<title>Context Menu Example</title>
<style>
.menu {
width: 150px;
border-style: solid;
border-width: 1px;
border-color: grey;
position: fixed;
display: none;
}
.menu-item {
height: 20px;
}
.menu-item:hover {
background-color: #6CB5FF;
cursor: pointer;
}
</style>
<script>
var menuDisplayed = false
var menuBox = null
window.addEventListener("contextmenu", showMenu, false)
window.addEventListener("click", hideMenu, false)
function showMenu()
{
var left = arguments[0].clientX
var top = arguments[0].clientY
menuBox = window.document.querySelector('.menu')
menuBox.style.left = left + 'px'
menuBox.style.top = top + 'px'
menuBox.style.display = 'block'
arguments[0].preventDefault()
menuDisplayed = true
}
function hideMenu()
{
if(menuDisplayed == true)
{
menuBox.style.display = 'none'
}
}
</script>
</head>
<body>
</h2>Right click mouse to view Context Menu</h2>
<div class="menu">
<div class="menu-item">Google</div>
<div class="menu-item">Facebook</div>
<hr>
<div class="menu-item">MSN</div>
<div class="menu-item">Bing</div>
</div>
</body>
</html>
Output
