Simple Jquery Right Click Cross browser Vertical Menu

[removed][removed]

Creating right click with the help of jquery is real easy and can be implemented very quickly

 

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” )

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:

  .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:

$(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();
});
});

 


Leave a comment