Custom Context Menu

Custom Context Menu.markdown

Custom Context Menu

It's is a very cool way of providing custom options in a website.

A Pen by Akshay Nair on CodePen.

License.

index.html

<div class='wholeShit'>
	<div class='showVal'>Click on the right mouse button<br />
	<span class='showVal1'></span>
	</div>
	<div class='container'>
	<div class='rightClick showing'>
	<div class='buttons'>
		<button class='but edit'>&#x270E;</button>
		<button class='but fav'>&#x2764;</button>
		<button class='but help'>&#x2753;</button>
	</div>
	<div class='overlap'>&#x2190;</div>
	</div>
	</div>
</div>

script.js

document.oncontextmenu = function() { 
    return false; 
};

$(document).mousedown(function(e) {
	if(e.button === 2) {
		$('.rightClick').removeClass('showing');
		var n = $('.rightClick').clone(true);
		$('.rightClick').fadeOut(100);
		setTimeout(function() {
			$('.rightClick').css({
				top:e.pageY-100,
				left:e.pageX-100
			}).fadeIn(100).addClass('showing');
		},200);
	} else if(e.button === 0) {
		setTimeout(function() {
				$('.rightClick').removeClass('showing').fadeOut(100);
		},150);
	}
});
$('.rightClick .overlap').click(function() {
	// history.back(1); // To go back
	$('.showVal1').text("Back Button Pressed");
});
$('.rightClick .edit').click(function() {
	$('.showVal1').text("Edit Button Pressed");
});
$('.rightClick .fav').click(function() {
	$('.showVal1').text("Favourites Button Pressed");
});
$('.rightClick .help').click(function() {
	$('.showVal1').text("Help Button Pressed");
});

scripts

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

style.css

$green:#51e980;
$brown:#5654A4;

@mixin transform($in) {
	transform:$in;
	-webkit-transform:$in;
	-moz-transform:$in;
	-ms-transform:$in;
	-o-transform:$in;
}
@mixin transition($in) {
	transition:$in;
	-webkit-transition:$in;
	-moz-transition:$in;
	-ms-transition:$in;
	-o-transition:$in;
}

body {
	margin:0;
	padding:0;
	background:#222;
	text-align:center;
}

.wholeShit {
	width:100%;
	height:100%;
}

.showVal {
	font-family:Helvetica;
	font-size:17px;
	font-weight:bold;
	color:#fff;
}

.rightClick {
	width:200px;
	height:200px;
	position:absolute;
	@include transform(scale(0.5));
	display:none;
	@include transition(all 0.5s ease);
	z-index:100;

	.buttons {
		width:100%;
		height:100%;
		z-index:0;
		position:absolute;
		@include transform(rotate(180deg));
		@include transition(all 0.5s ease);

		button.but {
			cursor:pointer;
			z-index:0;
			border:none;
			outline:none;
			width:50px;
			height:50px;
			background:$green;
			border-radius:50%;
			display:block;
			position:absolute;
			color:#fff;
			font-size:20px;
		}
		button.but:nth-child(1) {
			left:30px;
			top:34px;
		}
		button.but:nth-child(2) {
			left:80px;
			top:0px;
		}
		button.but:nth-child(3) {
			left:130px;
			top:34px;
		}
	}

	.overlap {
		position:absolute;
		cursor:pointer;
		width:100%;
		height:50%;
		background:$brown;
		margin-top:50%;
		border-radius:0 0 100px 100px;
		z-index:100;
		text-align:center;
		font-size:50px;
		color:#fff;
	}
	&.showing {
	@include transform(scale(1));

	.buttons {
		@include transform(rotate(0deg));
	}
}
}