</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/4909167/how-to-add-a-custom-right-click-menu-to-a-webpage" dir="ltr">How to add a custom right-click menu to a webpage?</a>
<span class="question-originals-answer-count">
(18 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2014-04-19 08:27:22Z" class="relativetime">6 years ago</span>.</div>
</div>
</aside>
Tutorial on designing own menu when you right-click your mouse.
Hello.
I've discovered on a website, that you can right-click your mouse, & several NEW options come up (rather than / instead of the usual defaults.)
Doing a quick Google search, I found that you can use Ajax and/or Javascript to achieve this & they give you some code you can use.
HOWEVER, the website code provided, is not a tutorial on how to do these things & I'm wondering if anyone knows a good tutorial to explain things.
The coding they provide does not advise HOW the process 'ticks' a check-box. Or HOW to display certain menu options. & how to activate those options once a person selects it.
Does anyone know a good tutorial to explain the why / where-fores (is that a word) of each section of code. with a practical demonstration on how to add 1-2 menu options (text), & how to activate the option(s) once clicked.
My native language is PHP. I have done some ajax in the past, but only a novice.
EDIT: The coding the demo sites providse also do not show you where to put your text. IE, I want a menu option to "delete" - the coding doesn't show you were to put the word "delete", or what it does once you click that box/option.
EDIT2: thanks, but i saw that link yesterday.
How to add a custom right-click menu to a webpage?
as one reply says:- "You have just explained how to disable the right-click menu. How to create our own menu??". also BOTH answers do the same thing - "alert("You've tried to open context menu"); ". does not help.
How do we add 1 option ? adding a 2nd option - do this (blah blah blah..) . Tutorial on 3+ options.. - gives you step by step guide.
The coding is (apparently) a menu of 2 options. but both are the same. (possibly some actual code examples too of each option ?). from the looks of it, they use Javascript to process the option.
</div>
There is no intrinsic link to AJAX in generating your own context menu; whether AJAX is involved will depend on whether you need to make AJAX requests to fetch content.
The broad workflow is this, which should give you some idea of what to look into:
ul
with the options as li
s. Hide this element.oncontextmenu
eventevt.preventDefault()
ul
relative to the element that was right-clicked and make it appear