This tutorial explains how to custom a create context menu in html, css and javascript. A context menu is a menu in a GUI that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application. Usually the available choices are actions related to the selected object.
On your computer, right-clicking on the desktop launches your OS’s native context menu. From here, you can probably create a new folder, get some information, as well as other actions. When using a web browser, right-clicking on the page would launch that browser’s default context menu. You’ll be able to get page information, or view the source. Right-clicking on an image presents its own set of options too — you can save an image, open it in a new tab, copy it and many other option you can add in web browser based application.
Lets see the below complete source code, which display the context menu when user perform right click on browser window.
Output:
Demo Link :
https://skptricks.github.io/learncoding/context-menu/
This is all about context menu in html, css and javascript. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
On your computer, right-clicking on the desktop launches your OS’s native context menu. From here, you can probably create a new folder, get some information, as well as other actions. When using a web browser, right-clicking on the page would launch that browser’s default context menu. You’ll be able to get page information, or view the source. Right-clicking on an image presents its own set of options too — you can save an image, open it in a new tab, copy it and many other option you can add in web browser based application.
Lets see the below complete source code, which display the context menu when user perform right click on browser window.
context-menu.html
<html> <head> <title> How to create context menu in html, css and javascript </title> </head> <body> <div class="menu"> <ul class="menu-options"> <li class="menu-option">Back</li> <li class="menu-option">Reload</li> <li class="menu-option">Save</li> <li class="menu-option">Save As</li> <li class="menu-option">Delete</li> <li class="menu-option">Spy</li> </ul> </div> <h3 class="center">Right click to view custom context menu</h3> <style> body { font-family: "Roboto", san-serif; } .center { text-align: center; } .menu { width: 120px; z-index: 1; box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2); position: fixed; display: none; transition: 0.2s display ease-in; } .menu .menu-options { list-style: none; padding: 10px 0; z-index: 1; } .menu .menu-options .menu-option { font-weight: 500; z-index: 1; font-size: 14px; padding: 10px 40px 10px 20px; cursor: pointer; } .menu .menu-options .menu-option:hover { background: rgba(0, 0, 0, 0.2); } button { background: grey; border: none; } button .next { color: green; } button[disabled="false"]:hover .next { color: red; animation: move 0.5s; animation-iteration-count: 2; } @keyframes move { from { transform: translate(0%); } 50% { transform: translate(-40%); } to { transform: transform(0%); } } </style> <script> const menu = document.querySelector(".menu"); let menuVisible = false; const toggleMenu = command => { menu.style.display = command === "show" ? "block" : "none"; menuVisible = !menuVisible; }; const setPosition = ({ top, left }) => { menu.style.left = `${left}px`; menu.style.top = `${top}px`; toggleMenu("show"); }; window.addEventListener("click", e => { if(menuVisible)toggleMenu("hide"); }); window.addEventListener("contextmenu", e => { e.preventDefault(); const origin = { left: e.pageX, top: e.pageY }; setPosition(origin); return false; }); </script> </body> </html>
Output:
https://skptricks.github.io/learncoding/context-menu/
This is all about context menu in html, css and javascript. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
I thank you so much!!! Works absolutely fine!
ReplyDelete