Context menu using javascript

10 Best Context Menus In jQuery And Pure JavaScript (2023 Update)

A context menu is a list of commands that appear when the user right-clicks on an object or selection inside a web page. You’re probably already familiar with it, since it appears when you right-click on most of the things on the page, like links, images and text-boxes.

The Best Context Menu Plugin

One of the most frequent and favorite JavaScript plugins used by developers is the context menu. Using it you can give your users access to an easy way to include in your web application, any kind of information or action, just right clicking an object.

Nowadays with pure JavaScript we have a wide variety of open source plugins that can be used independently or along side with jQuery to obtain a single tool or even a highly complex one in order to build a custom Context Menu.

In this post you will find the 10 best context menu plugins built with jQuery and/or vanilla JavaScript that are easy to integrate with your existing web project. Enjoy!

Originally Published May 29 2019, updated Jan 29 2023

Table of contents:

jQuery Context Menu Plugins:

Feature-rich Custom jQuery Context Menu Plugin — contextMenu

contextMenu is a feature-rich and high performance jQuery plugin for replacing the default browser’s right-click menu with a custom one.

Windows Like Right Click Context Menu with jQuery

A lightweight jQuery context menu plugin that displays a Windows like popup menu with icons as you right click on a given container.

Versatile & Customizable jQuery Context Menu Plugin — Jeegoocontext

A jQuery menu plugin that turns an unordered list into a versatile, customizable, skinnable and multi-level context menu with custom fade-in animations.

Tiny jQuery Plugin For Chrome Style Context Menus — chromeContext

A lightweight (~1kb minified) jQuery plugin for creating google chrome browser style context menus when right clicking html elements.

Dynamic Multi-level Context Menu With JavaScript

A jQuery plugin that creates an animated, Android (Material Design) inspired popup menu to replace the native browser context (right-click) menu on any element within the document.

Vanilla JS Context Menu Libraries:

context-menu.js

A JavaScript/LESS plugin that helps you create custom, dynamic, native-looking context menus inside any container element you specify.

Skinnable Right-click Context Menu In JavaScript – context-js

A skinnable, customizable, multi-level context menu library to replace the browser’s right-click menu.

Contextual.js

A vanilla JS plugin that attaches a dynamic, customizable, multi-level context/pop-up menu to your element. Without any dependencies.

Custom Right-click Menu (Context Menu) In Vanilla JavaScript – CtxMenu

A dynamic, customizable context menu plugin to replace the native browser right-click menu.

Dynamic Multi-level Context Menu With JavaScript

A simple, plain, multi-level context menu component implemented in vanilla JavaScript.

Conclusion:

There are many different ways to customize the context menu and this is a list of the top 10 that I came up with. Each one is unique and very powerful in their own right. There are other plugins available, but these are the ones I highly recommend any developer to try out.

Looking more jQuery plugins or JavaScript libraries to create awesome context menus on the web & mobile? See jQuery Context Menu and JavaScript Context Menu sections for more details.

Источник

Context Menus in Web Application using JavaScript

There are many instances in web development where we have the technology to do something — but we willingly chose not to do it. Context Menus in a web page is one such technology. Implementing a context menu(also known as the right click menu) is relatively simple — but very few apps use it. This is because the users don’t expect a right click menu. At least, not yet. I want to re-evaluate our stand on this issue — I want to ask the question — «Are we ready for the Context Menu in Web Apps?«

There are a few apps that use right click menus — off the top of my head, I can think of the following.

I am sure that there are many more apps out there that use right click. But most(if not all) web usability experts will have a seizure if they hear ‘context menu’ and ‘web application’ in the same sentence. And they have good reason to hate the idea — most people don’t expect a right click menu in a web application.

But, in my opinion, this is changing. The gap between web apps and desktop apps are closing — and people are expecting the features of a desktop application in a web application. Have you ever right clicked on an element in a web page instinctively expecting a context menu(ie. a non-browser menu)? I have — plenty of times.

This is the point where I stop — I am not a UI expert. I don’t have the resources to do a usability study on this issue. But there is one thing I can do — create a library that will implement a context menu. So, without further ado, my latest library.

ContextMenu

This library lets you create context menus(or right click menu as some call them) in your web pages. This menus shows up when a user right clicks on the page. You can specify any list as the menu. You can also set a context for the menu — or use the document for a global menu. This library supports multiple context menus for different contexts.

Before going any further, a word of warning. Just because you can don’t mean that you should. Think long and hard before using this in any of your projects. This is kinda unexplored territory — and pioneering is risky. If your are using the context menu in a web app, make sure there is another way to access the operations specified in the context menu.

Code/Download

Demo

Works In

Anyone have an idea on how to implement this in Opera? I can’t seem to get it working no matter what I try.

Источник

Custom Right Click Context Menu in JavaScript

This is a JavaScript tutorial where I showed you how to create Custom Right Click. If you know basic JavaScript you can create this Custom Right Click Context Menu. We use more left click of the mouse. However, from the use of right click in most large websites or applications. This type of Custom Right Click Menu is used even in Windows and all other operating systems. Watch its live demo to learn how it works. Here I will create a simple JavaScript Right Click Context Menu. And I will share complete information on how I made it.

JavaScript Custom Right Click Menu

This type of Custom Context Menu appears when you right-click anywhere on the webpage. Left click again to hide the Custom Menu bar. As you can see, with the right click of the mouse, a small box appears. There are some menu items in that box. Although you can use something else instead of this menu. Below I have given all the code and how it was created.

HTML Code

First I have added the menu items using a few lines of simple html. Here are 5 menu items used. You can increase the amount of this menu.

 id="context-menu">  class="item">View  class="item">Refresh  class="item">Copy  class="item">Customize  class="item">Save As  

CSS Code

• First I designed the webpage using some code.
• Then the basic design of context-menu has been done.
• Here the menu bar’s ‘visibility: hidden’ has been done. This means that the menu bar cannot be seen under normal conditions.
• At the end I have designed the menu item and added the hover effect .

*  padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; > body  background-color: #dfe8f1; > #context-menu  background-color: #ffffff; box-shadow: 0 0 20px rgba(37, 40, 42, 0.22); color: #1f194c; width: 10em; padding: 0.8em 0.6em; font-size: 1.3rem; position: fixed; visibility: hidden; > .item  padding: 0.3em 1.2em; > .item:hover  background-color: rgba(44, 141, 247, 0.2); cursor: pointer; > 

JavaScript

Now it’s time to activate the Right Click Context Menu using JavaScript. In this case, every line of JavaScript has the necessary explanation.

Even if you are a beginner, you will not have any difficulty in understanding.

 //Events for desktop and touch let events = ["contextmenu", "touchstart"]; //initial declaration var timeout; //for double tap var lastTap = 0; //refer menu div let contextMenu = document.getElementById("context-menu"); //same function for both events //event type is a data structure that defines the data contained in an event events.forEach((eventType) =>  document.addEventListener( eventType, (e) =>  //preventDefault() method stops the default action of a selected element from happening by a user e.preventDefault(); //x and y position of mouse or touch //mouseX represents the x-coordinate of the mouse let mouseX = e.clientX || e.touches[0].clientX; //mouseY represents the y-coordinate of the mouse. let mouseY = e.clientY || e.touches[0].clientY; //height and width of menu //getBoundingClientRect() method returns the size of an element and its position relative to the viewport let menuHeight = contextMenu.getBoundingClientRect().height; let menuWidth = contextMenu.getBoundingClientRect().width; //width and height of screen //innerWidth returns the interior width of the window in pixels let width = window.innerWidth; let height = window.innerHeight; //If user clicks/touches near right corner if (width - mouseX  200)  contextMenu.style.borderRadius = "5px 0 5px 5px"; contextMenu.style.left = width - menuWidth + "px"; contextMenu.style.top = mouseY + "px"; //right bottom if (height - mouseY  200)  contextMenu.style.top = mouseY - menuHeight + "px"; contextMenu.style.borderRadius = "5px 5px 0 5px"; > > //left else  contextMenu.style.borderRadius = "0 5px 5px 5px"; contextMenu.style.left = mouseX + "px"; contextMenu.style.top = mouseY + "px"; //left bottom if (height - mouseY  200)  contextMenu.style.top = mouseY - menuHeight + "px"; contextMenu.style.borderRadius = "5px 5px 5px 0"; > > //display the menu contextMenu.style.visibility = "visible"; >,  passive: false > ); >); //for double tap(works on touch devices) document.addEventListener("touchend", function (e)  //current time var currentTime = new Date().getTime(); //gap between two gaps var tapLength = currentTime - lastTap; //clear previous timeouts(if any) //The clearTimeout() method clears a timer set with the setTimeout() method. clearTimeout(timeout); //if user taps twice in 500ms if (tapLength  500 && tapLength > 0)  //hide menu contextMenu.style.visibility = "hidden"; e.preventDefault(); > else  //timeout if user doesn't tap after 500ms timeout = setTimeout(function ()  clearTimeout(timeout); >, 500); > //lastTap set to current time lastTap = currentTime; >); //click outside the menu to close it (for click devices) document.addEventListener("click", function (e)  if (!contextMenu.contains(e.target))  contextMenu.style.visibility = "hidden"; > >); 

If you want you can watch the video above to know better how this Custom Right Click (Context Menu) works.

Here I have tried to explain as much as possible. Even then, if you have any problem, you can let us know by commenting.

Источник