Create Simple Jquery Right Click Cross browser Vertical Menu

Here is the code:

[html]

#rightclickarea{width:500px; margin:0 auto; height:300px; border:1px solid #000000;}
.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;}

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

});

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

[/html]

Leave a Reply

Your email address will not be published. Required fields are marked *