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

By /

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

Right click inside bordered container
        
               Open
               Open in new tab
                
 
                Quick Preview
                        
                                Dossier 
                                Channel 1
                                Channel 2
                        
                
 
                Preview
                        
                                Channel 1
                                Channel 2 
                        
                
 
                Edit
                Event Log
                
                New
                Assignments
                        
                                Assignement 1
                                Assignement 2
                        
                
 
                Assets
                        
                                Asset 1
                                Asset 2
                                All Assets
                        
                
                Preview
                
                Move to
                        
                                Folder name
                        
                
 
                Others
                        
                                Mark as Read
                                Mark as Unread
                                Trash
                                Archieve
                                Commite
                                Release

.

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

 $(document).ready(function(){
  $('#rightclickarea').bind('contextmenu',function(e){ var $cmenu = $(this).next(); $('').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(); });
 
  });

.

Here is DEMO

.

That’s all!
Cheers!!

Scroll to Top