Awesome Context Menu

Создание контекстного меню по клику на правую кнопку мыши.

Сначала структура.
Наше меню, по структуре, это обычный список <ul>.

<ul class="context">
	<li class="context__header">Заголовок</li>
	<li class="context__item"><a href="#">Пункт меню</a></li>
	<li class="context__item context__item--nope"><a href="#">Неактивный пункт меню</a></li>
	<li class="context__item"><a href="#">Добавить в Pin</a></li>
	<li class="context__divider"></li>
	<li class="context__item context__item--email"><a href="#">Пункт меню с подменю</a><i class="context-right-open"></i>
		<ul class="context context--sub">
			<li class="context__item"><a href="#">Пункт меню подменю</a></li>
			<li class="context__item"><a href="#">Пункт меню подменю</a></li>
		</ul>
	</li>
</ul>

<li class="context__divider"></li> разделитель между пунктами меню.
<i class="context-right-open"></i> иконка, показывающая что меню содержит подменю.
Классом context__item--nope можно отметить временно неактивный пункт меню.

Теперь перейдём с стилям.
Разбирать каждый пункт не буду, просто приведу код целиком:

.context {
	font-size: 14px;
	color: #D0C7FF;
	list-style: none;
	margin: 0;
	padding: 0.05em 0.25em;
	border: 1px solid transparent;
	border-right-color: #5062c2;
	border-bottom-color: #5062c2;
	border-radius: 3px;
	position: absolute;
	min-width: 16em;
	z-index: 1;
	background: linear-gradient(145deg, #673AB7, #3F51B5);
	box-shadow: 0 4px 14px -5px #141321;
	will-change: transform, opacity;
	transition: transform, opacity, visibility;
	transition-duration: 0.35s, 0.2s, 0s;
	transition-delay: 0.08s, 0s, 0.4s;
	transition-timing-function: ease;
	transform: rotate3d(-1, -1, 0, 25deg) scale(1);
	transform-origin: 0 0;
	opacity: 0;
	visibility: hidden;
}

.context, .context * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.context.is-visible {
	opacity: 1;
	transform: none;
	transition-delay: 0s, 0s, 0s;
	visibility: visible;
}

.context--sub {
	background: #4b4ab6;
	width: auto;
	min-width: 10em;
	left: 100%;
	top: -0.4em;
	transform: translateX(-0.7em);
	transition: transform, opacity, width, min-width, visibility;
	transition-timing-function: ease;
	transition-duration: 0.3s, 0.25s, 0.15s, 0.15s, 0.01s;
	transition-delay: 0.3s, 0.25s, 0.3s, 0.3s, 0.35s;
	overflow: hidden;
}

.context--sub.oppositeX {
	right: 100%;
	left: auto;
	transform: translateX(0.7em);
}

.context--sub.oppositeY {
	top: auto;
	bottom: -0.4em;
}

.context__header, .context__item {
	padding-left: 1.5em;
	padding-right: 1.5em;
	padding-top: 0.3em;
	padding-bottom: 0.35em;
}

.context__header, .context__divider {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	border-bottom: 1px solid rgba(208, 199, 255, 0.3);
}

.context__header {
	font-weight: 700;
	padding-bottom: 0.5em;
}

.context__item {
	border-radius: 3px;
	position: relative;
}

.context__item:not(.context__item--nope):hover {
	background-color: rgba(255, 255, 255, 0.09);
	color: white;
}

.context__item:not(.context__item--nope):hover .context--sub {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.2s, 0.25s, 0.2s, 0.2s, 0s;
	border-radius: 0 3px 3px 3px;
	visibility: visible;
}

.context__item:last-child {
	margin-bottom: 0.25em;
}

.context__item:first-child {
	margin-top: 0.25em;
}

.context__item--nope {
	color: rgba(255, 255, 255, 0.3);
	pointer-events: none;
}
.context__item--active {
	-webkit-animation: flash 0.5s ease 1;
	animation: flash 0.5s ease 1;
}

.context a {
	cursor: default;
	color: inherit;
	text-decoration: none;
	display: block;
}

.context-right-open {
	background: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 15 15"%3E%3Cpath fill="rgba(255, 255, 255, 0.3)" d="M10.207 7.5L6 3.293v8.414L10.207 7.5Z"%2F%3E%3C%2Fsvg%3E') no-repeat 0 0%;
	position: absolute;
	width: 16px;
	height: 16px;
	transform: translateY(-55%);
	right: 0;
	top: 50%;
}

@-webkit-keyframes flash {
	0% {
		background: rgba(255, 255, 255, 0);
	}
	20% {
		background: rgba(255, 255, 255, 0.4);
	}
}

@keyframes flash {
	0% {
		background: rgba(255, 255, 255, 0);
	}
	20% {
		background: rgba(255, 255, 255, 0.4);
	}
}

Теперь скрипт jquery:

	var $doc = $(document),
	$context = $(".context:not(.context--sub)");

	$doc.on("contextmenu", function (e) {

		var $window = $(window),
			$sub = $context.find(".context--sub");
			$sub.removeClass("oppositeX oppositeY");

		e.preventDefault();

		var w = $context.width();
		var h = $context.height();
		var x = e.clientX;
		var y = e.clientY;
		var ww = $window.width();
		var wh = $window.height();
		var padx = 30;
		var pady = 20;
		var fx = x;
		var fy = y;
		var hitsRight = x + w >= ww - padx;
		var hitsBottom = y + h >= wh - pady;

		if (hitsRight) {
			fx = ww - w - padx;
		}

		if (hitsBottom) {
			fy = wh - h - pady;
		}

		$context.
			css({
				left: fx - 1,
				top: fy - 1 });


		var sw = $sub.width();
		var sh = $sub.height();
		var sx = $sub.offset().left;
		var sy = $sub.offset().top;
		var subHitsRight = sx + sw - padx >= ww - padx;
		var subHitsBottom = sy + sh - pady >= wh - pady;

		if (subHitsRight) {
			$sub.addClass("oppositeX");
		}

		if (subHitsBottom) {
			$sub.addClass("oppositeY");
		}

		$context.addClass("is-visible");
		$doc.on("mousedown", function (e) {
			var $tar = $(e.target);
			if (!$tar.is($context) && !$tar.closest(".context").length) {
				$context.removeClass("is-visible");
				$doc.off(e);
			}
		});

	});

	$context.on("mousedown touchstart", ".context__item:not(.context__item--nope)", function (e) {
		if (e.which === 1) {
			var $item = $(this);
			$item.removeClass("context__item--active");
			setTimeout(function () {
				$item.addClass("context__item--active");
			}, 10);
		}
	});