RIGHT CLICK CONTEXT MENU CREATION
This is most important and very interesting web development project . We have created a program that will show a menu bar as you right click on any part of program result. As you open your laptop or a computer you first press right click of your mouse and try to refresh your device and you see many option in that menu bar ; similar working of right click context menu bar we have shown by our code. We hope you will love this project.
PROGRAM CODE :)
1) HTML CODE :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>On Right Click Menu Creation</title>
<link rel="stylesheet" href="RightClickMenuCreation.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li><a href="#">View</a><span>></span></li>
<li><a href="#">Sort by</a><span>></span></li>
<li><a href="#">Refersh</a></li>
<hr>
<li><a href="#">Paste</a></li>
<li><a href="#">Paste Shortcut</a></li>
<li>
<img src="vsicon.png">
<a href="#">Open With Visual Studio</a>
</li>
<hr>
<li>
<img src="intelP.jfif">
<a href="#">Graphics Properties...</a>
</li>
<li>
<img src="intelP.jfif">
<a href="#">Graphics Option</a>
</li>
<hr>
<li>
<a href="#">New</a><span>></span>
</li>
<hr>
<li>
<img src="display.png">
<a href="#">Display Setting</a>
</li>
<li>
<img src="personalize.jfif">
<a href="#">Personalize</a>
</li>
</ul>
</div>
<script src="RightClickMenuCreation.js"></script>
</body>
</html>
CSS CODE :-
*{
margin: 0;
padding: 0;box-sizing: border-box;
list-style: none;
}
html{
font-size: 62.5%;
}
.menu-bar{
width: 30rem;
background-color:gainsboro;
position: relative;
border:.2rem solid rgba(0,0,0,0.4);
box-shadow: .3rem .3rem 0.3rem rgba(0,0,0,0.8);
transform: scale(0);
transform-origin: top left;
z-index: 1000;
font-family: Arial, Helvetica, sans-serif;
}
.show{
transform: scale(1);
}
.menu-bar ul{
width: 100%;
}
.menu-bar ul li{
padding: .7rem 3.8rem;
cursor:default;
}
.menu-bar ul li:hover{
background-color: beige;
}
.menu-bar ul li a{
text-decoration: none;
color: #000;
font-size: 1.5rem;
cursor:default;
}
span{
position: absolute;
right: 5%;
color: #000;
font-size:2rem;
font-weight: bolder;
}
.menu-bar ul li img{
width: 2rem;
height: 2rem;
position: absolute;
left:2%;
}
JAVASCRIPT CODE :-
window.addEventListener("contextmenu",function(event){
event.preventDefault();
var c = document.querySelector(".menu-bar");
c.style.top = event.offsetY + "px";
c.style.left = event.offsetX + "px";
c.classList.add("show");
});
window.addEventListener("click",function(event){
event.preventDefault();
var c = document.querySelector(".menu-bar")
c.classList.remove("show");
});
OUTPUT:)
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )
