Хотите создать вертикальное контекстное меню на страницах вашего сайта? Это очень просто. В этой статье будет продемонстрировано как с помощью библиотеки jQuery такое меню можно сделать.

html структура jQuery меню

Наше вертикальное контекстное jQuery меню будет появляться при клике в любом месте в пределах контейнера с id rightclickarea.

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

css стили

Теперь немного приукрасим наше jQuery меню с помощью css стилей:

.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;
}

jQuery для меню

Чтоб вертикальное jQuery меню начало функционировать добавим самое важно – jQuery.

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