Finley
New Member
- Sep 23, 2011
- 11
- 1
Hi there,
I am going to explain to you how to make your custom right-click contextmenu. I am going to explain every part.
It is very simple. We will be using jQuery so include the library in your <head> tag.
I am asuming you have the [very, very] basic knowledge of HTML, CSS and JavaScript
Step 1
We begin with creating an simple eventlistener.
Step 2
In this step we will be creating the 'pop-up' of our own context menu. We are using the jQuery .css() function for that.
Step 3
In the 3rd step we are going to disable the default context menu, so it doesn't show up when you right-click your screen.
For this, is one simple line needed.
Step 4
In the 4th and final step we are going to make the custom menu dissapear, as soon as you click somewere out of the menu.
We will be using another eventlistener for that
Okay then, lets put it all together now
It will look something like this:
For a full HTML page:
For a live demo:
Kind regards
Finley
I am going to explain to you how to make your custom right-click contextmenu. I am going to explain every part.
It is very simple. We will be using jQuery so include the library in your <head> tag.
I am asuming you have the [very, very] basic knowledge of HTML, CSS and JavaScript
Step 1
We begin with creating an simple eventlistener.
Code:
window.addEventListener('contextmenu', function(e) {
// When you click on the contextmenu, trigger this function
})Step 2
In this step we will be creating the 'pop-up' of our own context menu. We are using the jQuery .css() function for that.
Code:
$('.rightclickmenu').css({ // $('CHANGE_THIS_TO_YOUR_MENU_CLASS')
"margin-left": e.clientX, // position of the mouse X
"margin-top": e.clientY // position of the mouse Y
}).show() // Showing the actual menuStep 3
In the 3rd step we are going to disable the default context menu, so it doesn't show up when you right-click your screen.
For this, is one simple line needed.
Code:
e.preventDefault();Step 4
In the 4th and final step we are going to make the custom menu dissapear, as soon as you click somewere out of the menu.
We will be using another eventlistener for that
Code:
window.addEventListener('click', function(){ // as soon as you click
$('.rightclickmenu').hide(); // hide the contextmenu
})Okay then, lets put it all together now
It will look something like this:
Code:
window.addEventListener('contextmenu', function(e) {
$('.rightclickmenu').css({
"margin-left": e.clientX,
"margin-top": e.clientY
}).show()
e.preventDefault();
window.addEventListener('click', function(){
$('.rightclickmenu').hide();
})
})For a full HTML page:
You must be registered for see links
For a live demo:
You must be registered for see links
Kind regards
Finley
