materialcoder
diff --git a/‎1 自定义checkbox，radio样式/2 自定义网页右键菜单 b/‎1 自定义checkbox，radio样式/2 自定义网页右键菜单
diff --git a/‎2 自定义网页右键菜单/index.html
+77 b/‎2 自定义网页右键菜单/index.html
+77
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>自定义网页右键菜单</title>
+	<style>
+		ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+		.container {
+			width: 1200px;
+			height: 600px;
+			border-radius: 4px;
+			border: 2px solid #ccc;
+			margin: 0 auto;
+			box-shadow: 2px 2px 4px rgba(0,0,0,.2) inset;
+			font-size: 42px;
+			font-weight: bold;
+			text-align: center;
+		}
+		.menu {
+			width: 240px;
+			font-size: 24px;
+			line-height: 40px;
+			border: 2px solid #ccc;
+			border-radius: 3px;
+			box-shadow: 4px 4px 6px rgba(0,0,0,.2);
+			display: none;
+			position: absolute;
+			top: 0;
+			left: 0;
+			/*z-index: 2;*/
+			background: #fff;
+		}
+		.menu li {
+			padding-left: 20px;
+		}
+		.menu li:hover {
+			background: #1E90FF;
+		}
+	</style>
+</head>
+<body>
+	<div id="container" class="container">right click to see the menu</div>
+	<div class="menu" id="menu">
+		<ul>
+			<li>HTML</li>
+			<li>CSS</li>
+			<li>JavaScript</li>
+			<li>HTML5</li>
+			<li>CSS3</li>
+		</ul>
+	</div>
+	<script>
+		var menu = document.getElementById('menu'),
+			container = document.getElementById('container');
+		container.oncontextmenu = function(event) {
+			var e = event || document.event;
+			e.returnValue = false; //阻止默认的鼠标右键行为
+			var x=e.clientX;
+			var y=e.clientY;
+			menu.style.top=y+"px";
+			menu.style.left=x+"px";
+			menu.style.display = "block";
+			var width_x=container.offsetHeight;
+			var height_y=window.innerHeight;
+			console.log(x);
+			console.log(y);
+		}
+		document.onclick=function() {
+			menu.style.display="none";
+		}
+	</script>
+</body>
+</html>