记一波右键菜单

发表于 | 分类于

我们知道网页鼠标右键菜单有很多功能，
例如新标签打开，新窗口打开，无痕打开等。
然而并不是所有人都想要这么多功能。
有些人喜欢自己定制，于是……

于是开始，原理就是利用document.oncontextmenu，然后写网页一样写出来。
然而其实这些麻烦的东西都不用懂的，当然想懂百度我也没有意见。
然后代码流一波

右键菜单一

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

html,body {
	margin: 0;
	padding: 0;
	font-family: microsoft yahei,lantinghei sc,open sans,Arial,hiragino sans gb,stheiti,wenquanyi micro hei,simsun,sans-serif
}

h1 {
	position: absolute;
	top: 20%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	padding: 1em;
	font-size: 2em;
	letter-spacing: .3em;
	color: #fff;
	text-align: center;
	border-top: 2px solid #e6ee9c;
	border-bottom: 2px solid #e6ee9c
}

.contextmenu {
	display: none;
	position: absolute;
	width: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	border-radius: 5px;
	list-style: none;
	box-shadow: 0 15px 35px rgba(50,50,90,.1),0 5px 15px rgba(0,0,0,.07);
	overflow: hidden;
	z-index: 999999
}

.contextmenu li {
	border-left: 3px solid transparent;
	transition: ease .2s
}

.contextmenu li a {
	display: block;
	padding: 10px;
	color: #b0bec5;
	text-decoration: none;
	transition: ease .2s
}

.contextmenu li:hover {
	background: #ce93d8;
	border-left: 3px solid #9c27b0
}

.contextmenu li:hover a {
	color: #fff
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//这是引用jQuery的，其实不用jQuery也行，自己改
$(document).ready(function() {
	$(document).contextmenu(function(e) {
		var winWidth = $(document).width();
		var winHeight = $(document).height();
		var posX = e.pageX;
		var posY = e.pageY;
		var menuWidth = $(".contextmenu").width();
		var menuHeight = $(".contextmenu").height();
		var secMargin = 10;
		if (posX + menuWidth + secMargin >= winWidth && posY + menuHeight + secMargin >= winHeight) {
			posLeft = posX - menuWidth - secMargin + "px";
			posTop = posY - menuHeight - secMargin + "px";
		} else if (posX + menuWidth + secMargin >= winWidth) {
			posLeft = posX - menuWidth - secMargin + "px";
			posTop = posY + secMargin + "px";
		} else if (posY + menuHeight + secMargin >= winHeight) {
			posLeft = posX + secMargin + "px";
			posTop = posY - menuHeight - secMargin + "px";
		} else {
			posLeft = posX + secMargin + "px";
			posTop = posY + secMargin + "px";
		};
		$(".contextmenu").css({
			"left": posLeft,
			"top": posTop
		}).show();
		return false;
	});
	$(document).click(function() {
		$(".contextmenu").hide();
	});
});

HTML

1
2
3
4
5
6
7
<ul class="contextmenu">
<li><a href="#">健康</a></li>
<li><a href="#">快乐</a></li>
<li><a href="#">财富</a></li>
<li><a href="#">自由</a></li>
<li><a href="#">幸福</a></li>
</ul>

点击事件就不说看，下一个

右键菜单二

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

* { margin: 0; padding: 0; }
a { text-decoration: none; }
ul { list-style: none; }
html, body { background-color: #222222; }
#menu { position: absolute; width: 200px; height: 277px; border: 1px solid #000000; border-radius: 5px; display: none; backface-visibility: hidden; background-color: #353535; }
#menu ul li { position: relative; height: 45px; transition: 0.5s }
#menu ul li div.icon { position: absolute; left: 5px; top: 5px; width: 40px; height: 35px; background: url("https://yked.gitee.io/img/all/right_menu_two_icon.png") no-repeat; }
#menu ul.up li:nth-child(1) div.icon { background-position: 0 0; transition: 0.3s }
#menu ul.up li:nth-child(2) div.icon { background-position: -40px 0; transition: 0.3s }
#menu ul.up li:nth-child(3) div.icon { background-position: -80px 0; transition: 0.3s }
#menu ul.down li:nth-child(1) div.icon { background-position: -120px 0; transition: 0.3s }
#menu ul.down li:nth-child(2) div.icon { background-position: -160px 0; transition: 0.3s }
#menu ul.down li:nth-child(3) div.icon { background-position: -200px 0; transition: 0.3s }
#menu ul li p { position: absolute; left: 60px; width: 50%; font-size: 18px; color: rgba(255,255,255,0.8); line-height: 45px; text-align: center; transition: 0.8s }
#menu div.line { height: 1px; width: 90%; background: #ff88e2; margin: 3px 10px; }
#menu ul li:hover { background: rgba(199, 154, 255, .2); }
#menu ul li:hover p { color: #ff88e2; text-shadow: #4e063a 2px 1px 2px; }
#menu ul.up li:nth-child(1):hover div.icon { background-position: 0 -35px; }
#menu ul.up li:nth-child(2):hover div.icon { background-position: -40px -35px; }
#menu ul.up li:nth-child(3):hover div.icon { background-position: -80px -35px; }
#menu ul.down li:nth-child(1):hover div.icon { background-position: -120px -35px; }
#menu ul.down li:nth-child(2):hover div.icon { background-position: -160px -35px; }
#menu ul.down li:nth-child(3):hover div.icon { background-position: -200px -35px; }
#menu div.mask { width: 150px; height: 150px; position: absolute; overflow: hidden; }
#menu div.mask div.cat { background: url("https://yked.gitee.io/img/all/right_menu_two_cat.gif")no-repeat; width: 150px; height: 150px; position: absolute; }
#menu div#maskT { top: -153px; margin-left: 25px; }
#menu #maskT>.cat { bottom: -153px; transform: rotate(270deg); }
#menu div#maskB { bottom: -153px; margin-left: 25px; }
#menu #maskB>.cat { top: -153px; transform: rotate(-270deg); }
#menu div#maskL { left: -153px; }
#menu #maskL>.cat { right: -153px; transform: rotateY(180deg); }
#menu div#maskR { left: 203px; }
#menu #maskR>.cat { left: -153px; }
#menu:hover div#maskT div.cat { animation: move1 4s 8s forwards; }
#menu:hover div#maskB div.cat { animation: move2 4s 12s forwards; }
#menu:hover div#maskL div.cat { animation: move3 4s forwards; }
#menu:hover div#maskR div.cat { animation: move4 4s 4s forwards; }
 @keyframes move1 {
 0% {
transform: translate(0px, 0px) rotate(270deg);
}
 40% {
transform: translate(0px, -153px) rotate(270deg);
}
 60% {
transform: translate(0px, -153px) rotate(270deg);
}
 100% {
transform: translate(0px, 0) rotate(270deg);
}
}
 @keyframes move2 {
 0% {
transform: translate(0px, 0px) rotate(-270deg);
}
 40% {
transform: translate(0px, 153px) rotate(-270deg);
}
 60% {
transform: translate(0px, 153px) rotate(-270deg);
}
 100% {
transform: translate(0px, 0) rotate(-270deg);
}
}
 @keyframes move3 {
 0% {
transform: translate(0px, 0px) rotateY(180deg);
}
 40% {
transform: translate(-153px, 0) rotateY(180deg);
}
 60% {
transform: translate(-153px, 0) rotateY(180deg);
}
 100% {
transform: translate(0px, 0) rotateY(180deg);
}
}
 @keyframes move4 {
 0% {
transform: translate(0px, 0px);
}
 40% {
transform: translate(153px, 0);
}
 60% {
transform: translate(153px, 0);
}
 100% {
transform: translate(0px, 0);
}
}
h1 { width: 300px; margin: 50px auto; color: white; }

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.oncontextmenu=function(ev){
    ev=ev||event;
    var x = ev.clientX;
    var y = ev.clientY;

    var menu = document.querySelector("#menu");
    menu.style.display="block";
    menu.style.left = x+"px";
    menu.style.top = y+"px";

    ev.preventDefault();
};

document.onclick=function(){
    var menu = document.querySelector("#menu");
    menu.style.display="none";
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="menu">
 <div id="maskT" class="mask">
<div class="cat"></div>
</div>
<div id="maskB" class="mask">
<div class="cat"></div>
</div>
<div id="maskL" class="mask">
<div class="cat"></div>
</div>
<div id="maskR" class="mask">
<div class="cat"></div>
</div>
<ul class="up">
<li><a href="#">
<div class="icon"></div>
<p>后退看看</p>
</a></li>
<li><a href="#">
<div class="icon"></div>
<p>往前一页</p>
</a></li>
<li><a href="#">
<div class="icon"></div>
<p>洗脸啦</p>
</a></li>
</ul>
<div class="line"></div>
<ul class="down">
<li><a href="#">
<div class="icon"></div>
<p>不懂求助</p>
</a></li>
<li><a href="#">
<div class="icon"></div>
<p>打印狂魔</p>
</a></li>
<li><a href="#">
<div class="icon"></div>
<p>图片另存为</p>
</a></li>
</ul>
</div>

满分是10分的话，这篇文章你给几分，您的支持将鼓励我继续创作！