How to implement a custom context menu for li elements using Right Click in HTML

I have a specific requirement to display a customized right-click menu on certain li items. I came across a js file at

The issue I am facing is that the right-click functionality in this js file works for the entire page, but I need it to only work for select li or a tags. I want the right-click menu to appear when users right-click on specific li or a tags, and disappear if they click anywhere else or open the normal right-click menu instead.

If anyone can help me with this...

For example, similar to sites like or .

javascriptjqueryhtmlcss

Answer №1

In considering the desired effect, it seems like you are aiming for a menu similar to that seen in skydrive when interacting with files and directories.

While there are numerous potential solutions for this, I will focus on the code you provided. Firstly, we need to decode it. Utilizing online beautifiers such as can assist with this task.

I extracted the content from the file contextmenu_o.js and obtained the following code:

var mouse_x = 0;
var mouse_y = 0;
var mouse_left = false;
var mouse_right = false;

// Additional functions and event listeners included...

This code is specific and may require modifications. I have made adjustments visible through jsfiddle, primarily focusing on assigning new event listeners to a designated div element.

Answer №2

Customized button with a dropdown menu created from a list of items.

Check out the code snippet on jsfiddle.net

Dropdown menu opens upon clicking the button.

var $menuButton = $("#menuButton");
var $menuElement = $("#menuElement");

$menuButton.button({
    icons: {
        secondary: "ui-icon-triangle-1-s"
    }
})
    .click(function (event) {
    $(document).one("click", function () {
        $menuElement.css("visibility", "hidden");
    });

    $menuElement.css("visibility", "visible");
    event.stopPropagation();
});

$menuElement
    .menu({
    select: function (event, ui) {
        $menuElement.css("visibility", "hidden");
    }
})
    .css("visibility", "hidden")
    .position({
    my: "left top",
    at: "left bottom",
    of: $buttonElement
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submit a form to transfer information to a different page, authenticate the data, and finally submit it

Within my form, After the user clicks on Submit, they will be redirected to another page displaying all the entered data for verification purposes. This allows the user to ensure the accuracy of their input before proceeding. Once verified, the user can ...

javascriptphpjqueryhtmlforms

Displaying cards horizontally on desktop and vertically on mobile using CSS

Context and Issue I am currently working on this specific page, with a focus on the "Top Artists" section. Desired Outcome: When viewed from a laptop, I aim for the cards to be displayed as vertical rectangles, where the ranking is at the top, followe ...

htmlcss

Custom Homepage with Integrated Google Web Search and Autocomplete Feature

Is there a way to incorporate the standard Google web search with autocomplete into my own webpage, without using a custom search engine like www.google.com? I have been unable to find any examples or guides on how to accomplish this. All the resources see ...

htmlajax

"Utilize Angular's functionality to include labels for checkboxes generated using *ngFor directive

I am currently working with Angular 5 My goal is to generate multiple checkboxes using the code below and provide them with labels <input type="checkbox" *ngFor = "let v of options[0].options" [value]="1" [name] = "1"> Typically, when working with ...

htmlangularangular5

Utilize typehead.js in Python Django to retrieve an updated data list directly from the database

file.js var source = new Bloodhound({ hint: false, datumTokenizer: Bloodhound.tokenizers.obj.whitespace("description"), queryTokenizer: Bloodhound.tokenizers.whitespace, // /a_c/p_s/?term=d&category=all remote: "/a ...

javascriptpythonjquerydjangotypehead

When using html-webpack-plugin with webpack 2, there is no need for a starting slash '/'

I am in the process of migrating my webpack 1 project to webpack 2. Most of it is working smoothly, except for the issue I am facing with html-webpack-plugin: When using it in webpack 2, the script tag that gets generated looks like this: <script typ ...

javascriptwebpackwebpack-2html-webpack-plugin

Remove item with style list action button

<ol> <li ng-repeat="name in itemArray"> {{ name }} <button id="deleteBtn" ng-click="deleteItem (item)">X</button> </li> </ol> Indeed, this code snippet contains AngularJS functionality to di ...

htmlcssangularjs

implementing toggle functionality for an array of items in ReactJS

I have an array and I am trying to create a show/hide feature for each item based on toggling. When I click on one item, it should expand while simultaneously hiding the previously expanded item. Here is the code snippet I have been working on: class App e ...

javascriptreactjsredux

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, bu ...

htmlcss

The dirtyVertices feature in Three.js seems to be malfunctioning

In my three.js project, I created a 12*12 plane and attempted to modify its vertices between two renderings without success. Despite adding the following code, no changes were observed: ground.geometry.dynamic = true; ground.geometry.__dirtyVertices = tr ...

javascriptwebglthree.js

Display a visual progress indicator during audio recording

I am currently using the MediaRecorder functionality to capture audio and I would like to display a progress bar showing the recording process. Here is the code snippet from my recorder template: <p id="countdowntimer">Current Status: Beginning in& ...

javascriptvue.jsprogress-barmediarecorder

Exploring the wonders of tokeninput with jQuery and JavaScript

After updating the code, the focus is now working. However, I'm facing a problem with getting the phone number that the user entered and placing it in front of the text in the input field called "id="some-text"? <input id="some-text" type="text" ...

javascriptjquery

Header Blocks that are Fixed While Scrolling in fullPage.js Sections Using the "scrollOverflow: true" Feature

I am experiencing an issue where a fixed header on my website prevents scrolling through sections when hovering, specifically when the setting scrollOverflow: true is enabled. However, everything works fine and scrolling through all sections is possible w ...

javascriptcssfullpage.js

Explication of syntax not functioning

Following the instructions provided here but encountering issues, any assistance? <script type="text/javascript" src="sh/src/shCore.js"></script> <script type="text/javascript" src="sh/scripts/shBrushJScript.js"></script> <lin ...

javascripthtmlcsssyntaxhighlighter

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

htmlcssless

Is there a way for me to send a URL request from my website to a different server using PHP?

I am looking to initiate a request from my website to my server using a specific IP address. From there, I need the server to send another request to a different server and then display the response on the webpage. Can anyone provide guidance on how to ...

javascriptphpjquery

Creating a step-by-step guide for designing a directive that can personalize labeled radio buttons

Check out these custom radio buttons: This is the Angular HTML code: <div ng-app="app"> <div ng-controller="ctrl" class="sm-box"> <p>Please select a mode: <sm-radio model="mode" value="MODE1" label="One" ng-click=&apos ...

javascriptjqueryangularjs

Having trouble getting Material-UI radio buttons to cooperate with react-final-form

After successfully implementing my material-ui radio button, I encountered issues when integrating it with react-final-form. The problem now is that the radio button is no longer clickable. However, upon removing the ...input inside inputProps, the radio b ...

javascriptreactjsmaterial-uireact-final-form

The alignment of grid items is slightly askew

I've been having an issue where when I maximize the browser window, everything on my website looks fine except for the cards in the packages section. They aren't centering properly. Any ideas on what might be causing this? Check out the website ...

htmlcssgridcss-grid

The issue with Jquery Tooltip not functioning after a postback

Hello everyone, I'm facing an issue with my tooltip. When I initially load the page, I am able to hover over the image linked to the tooltip. The image is the only one in the table named "mytable," so jQuery identifies it from there. However, the prob ...

jqueryasp.nettooltip