How To: Create Simple Jquery Right Click Cross browser Vertical Menu

On 02.22.10, In How to, jQuery

Creating right click with the help of jquery is real easy and can be implemented very quickly. While trying for my one of the project , I made one and sharing it today.

.

Why not to check DEMO before moving on.

.

Step 1: Creating HTML

Simply copy and paste the html next to the div to be right clicked. In this example we have ( id=”rightclickarea” ) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<div id="rightclickarea">Right click inside bordered container</div>
	<div class="vmenu">
 	       <div class="first_li"><span>Open</span></div>
	       <div class="first_li"><span>Open in new tab</span></div>
                <div class="sep_li"></div>
 
		<div class="first_li"><span>Quick Preview</span>
			<div class="inner_li">
				<span>Dossier</span> 
				<span>Channel 1</span>
				<span>Channel 2</span>
			</div>
		</div>
 
		<div class="first_li"><span>Preview</span>
         		<div class="inner_li">
				<span>Channel 1</span>
				<span>Channel 2 </span>
			</div>
		</div>
 
		<div class="first_li"><span>Edit</span></div>
		<div class="first_li"><span>Event Log</span></div>
		<div class="sep_li"></div>
		<div class="first_li"><span>New</span></div>
		<div class="first_li"><span>Assignments</span>
          		<div class="inner_li">
	         		<span>Assignement 1</span>
		        	<span>Assignement 2</span>
			</div>
		</div>
 
		<div class="first_li"><span>Assets</span>
			<div class="inner_li">
				<span>Asset 1</span>
				<span>Asset 2</span>
				<span>All Assets</span>
			</div>
		</div>
		<div class="first_li"><span>Preview</span></div>
		<div class="sep_li"></div>
		<div class="first_li"><span>Move to</span>
			<div class="inner_li">
        			<span>Folder name</span>
			</div>
		</div>
 
        	<div class="first_li"><span>Others</span>
			<div class="inner_li">
				<span>Mark as Read</span>
				<span>Mark as Unread</span>
                       		<span>Trash</span>
				<span>Archieve</span>
			        <span>Commite</span>
				<span>Release</span>
			</div>
		</div>
	</div>

.

Step 2: Add Style to stylesheet

Now add following css to your stylesheet:

1
2
3
4
5
6

       .vmenu{border:1px solid #aaa;position:absolute;background:#fff;	display:none;font-size:0.75em;}
       .vmenu .first_li span{width:100px;display:block;padding:5px 10px;cursor:pointer}
       .vmenu .inner_li{display:none;margin-left:120px;position:absolute;border:1px solid #aaa;
        border-left:1px solid #ccc;margin-top:-28px;background:#fff;}
       .vmenu .sep_li{border-top: 1px ridge #aaa;margin:5px 0}
       .vmenu .fill_title{font-size:11px;font-weight:bold;/height:15px;/overflow:hidden;word-wrap:break-word;}

.

Step 3: Add Jquery script

And finally , add following lines just inside head tag of your HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >
	$(document).ready(function(){
 
			$('#rightclickarea').bind('contextmenu',function(e){
			var $cmenu = $(this).next();
			$('<div class="overlay"></div>').css({left : '0px', top : '0px',position: 'absolute', width:                                                   '100%', height: '100%', zIndex: '100' }).click(function() {
				$(this).remove();
				$cmenu.hide();
			}).bind('contextmenu' , function(){return false;}).appendTo(document.body);
			$(this).next().css({ left: e.pageX, top: e.pageY, zIndex: '101' }).show();
 
			return false;
			 });
 
			 $('.vmenu .first_li').live('click',function() {
				if( $(this).children().size() == 1 ) {
					alert($(this).children().text());
					$('.vmenu').hide();
					$('.overlay').hide();
				}
			 });
 
			 $('.vmenu .inner_li span').live('click',function() {
					alert($(this).text());
					$('.vmenu').hide();
					$('.overlay').hide();
			 });
 
 
			$(".first_li , .sec_li, .inner_li span").hover(function () {
				$(this).css({backgroundColor : '#E0EDFE' , cursor : 'pointer'});
			if ( $(this).children().size() >0 )
					$(this).find('.inner_li').show();	
					$(this).css({cursor : 'default'});
			}, 
			function () {
				$(this).css('background-color' , '#fff' );
				$(this).find('.inner_li').hide();
			});
 
 
		});
		</script>

.

Here is DEMO

.

That’s all!
Cheers!!

Need help for EC0-350 certification? Download 650-568 prep resources to guarantee pass your 350-029 exam.

Steve

Steve is the Founder and Editor-in-chief of Web Developer Juice. He's web developer with 4 years of experience in CSS, HTML, PHP and javascript. If you’d like to connect with him, point to the contact page and follow him on Twitter: @wdjuice.

Visit Website

Comments

Bret Bouchard
02.22.10

This would be very handy for photo galleries to add start / stop or even send to a friend functionality.

Rob
02.22.10

You could also add a onSelectStart handler to prevent click and drag in your menu items from selecting the text… That would add some polish.

Elena
02.22.10

It was interesting to read this article and I hope to read a new article about this subject in your site in the near time.

Tutorial City
02.22.10

Opera up to version 10.10 don’t recognize the ‘contextmenu’ event. Thank god this event has been added on Opera 10.50!

SM
02.22.10

A small bug in IE 7. Do not hide the menu when clicking to the left of the left border of content.

… ] link is being shared on Twitter right now. @zenx, an influential author, said RT @1ndus: Xtreme … ]

Logo Design
02.22.10

well this article is really helpful, I am going to bookmark it .

Rilwis
02.22.10

Nice effect. But I think you should explain more details about how the code works. That will make the tutorial better.

Darrick Ulisch
02.22.10

Nice jQuery example, javascript got much better after this was introduced.

This article is really helpful, I am going to bookmark it .

Portal Dachowy
02.22.10

I enjoyed reading this article. I will come back soon to read it again.

I’m still learning from you, while I’m trying to reach my goals. I certainly liked reading everything that is written on your blog.Keep the aarticles coming. I liked it!

Rahul
02.22.10

This is really very nice and easy code with jquery to implement vertical menu.
Its really very helpful to us.

Dohab
02.22.10

Awesome!!
No plugins needed,
so cool indeed!

Amjad Masad
02.22.10

I suggest setting the overlay height and width to
document.height
document.width
Because if your content is dynamically generated by AJAX call or JQuery in general, the 100% would refer to the original height and width of the document!!

famous gymnasts
02.22.10

Great paragraph,belief besieged putting reading this deliberation! “Nevertheless this is plainly one amazing column. Gratitude for that valuable patterns including insights you have so provided here. Keep it!”

ali
02.22.10

Thanks very good tutorial

HTML language is very usefull for the website.

How to build this content? Do you have a lot of experience in this topic? Do you base solely on the theory?

Great stuff mate! Thx@!

I didn’t rather get this when I first feature it. But when I went through it a 2d time, it all became perfect. Thanks for the brainwave. Absolutely something to consider just about.