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!!
Comments
This would be very handy for photo galleries to add start / stop or even send to a friend functionality.
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.
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.
Opera up to version 10.10 don’t recognize the ‘contextmenu’ event. Thank god this event has been added on Opera 10.50!
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 … ]
well this article is really helpful, I am going to bookmark it .
Nice effect. But I think you should explain more details about how the code works. That will make the tutorial better.
Nice jQuery example, javascript got much better after this was introduced.
This article is really helpful, I am going to bookmark it .
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!
This is really very nice and easy code with jquery to implement vertical menu.
Its really very helpful to us.