Create Simple Jquery Right Click Cross browser Vertical Menu

By /

right_click-1748039

Create Simple Jquery Right Click Cross browser Vertical Menu

On 02.22.10, In CSS, HTML, Miscellaneous, jquery, by Steve

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