├── README.md
├── index.html
├── picture
├── bd.png
├── bgc.gif
├── biying.png
├── github.png
├── google.png
├── v2ex.jpg
└── zhihu.png
├── 自定义右键菜单.css
├── 自定义右键菜单.css.map
├── 自定义右键菜单.js
└── 自定义右键菜单.scss
/README.md:
--------------------------------------------------------------------------------
1 | # 一个自定义的右键弹出菜单(旋转太极)
2 | 使用了之前的css小作品,没有太多的代码,部分细节需要注意,例如focus事件和blur事件
3 | [效果展示页面](https://htmlpreview.github.io/?https://github.com/L-WJ1995/contextmenu/blob/master/index.html)
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 自定义右键菜单
7 |
8 |
9 |
10 |
11 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/picture/bd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/bd.png
--------------------------------------------------------------------------------
/picture/bgc.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/bgc.gif
--------------------------------------------------------------------------------
/picture/biying.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/biying.png
--------------------------------------------------------------------------------
/picture/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/github.png
--------------------------------------------------------------------------------
/picture/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/google.png
--------------------------------------------------------------------------------
/picture/v2ex.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/v2ex.jpg
--------------------------------------------------------------------------------
/picture/zhihu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/L-WJ1995/contextmenu/62a9041e136f1ee8c224a40268eedb34144b8b93/picture/zhihu.png
--------------------------------------------------------------------------------
/自定义右键菜单.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0; }
5 |
6 | html,
7 | body {
8 | padding: 0 2px; }
9 |
10 | #Mycontextmenu {
11 | outline: none;
12 | position: fixed;
13 | overflow: hidden;
14 | visibility: hidden;
15 | text-align: center;
16 | border: 5px solid;
17 | width: 0px;
18 | height: 0px;
19 | border-radius: 150px;
20 | margin: -10px 0 0 10px;
21 | color: white;
22 | transition: width 1s,height 1s;
23 | background-image: url(./picture/bgc.gif);
24 | background-repeat: no-repeat;
25 | background-position: center;
26 | animation: a 2s .1s linear infinite;
27 | box-shadow: 0 0 5px 1px black; }
28 | #Mycontextmenu span {
29 | position: absolute;
30 | width: 173.205px;
31 | height: 150px;
32 | margin-left: -86.6025px;
33 | margin-top: -75px;
34 | left: 50%;
35 | top: 25%;
36 | line-height: 150px;
37 | clip-path: polygon(0 0, 50% 100%, 100% 0);
38 | transform-origin: 50% 100%;
39 | transition: background-color 1s 0s; }
40 | #Mycontextmenu span:nth-of-type(1) {
41 | transform: rotate(0deg); }
42 | #Mycontextmenu span:nth-of-type(2) {
43 | transform: rotate(60.5deg); }
44 | #Mycontextmenu span:nth-of-type(3) {
45 | transform: rotate(121deg); }
46 | #Mycontextmenu span:nth-of-type(4) {
47 | transform: rotate(181.5deg); }
48 | #Mycontextmenu span:nth-of-type(5) {
49 | transform: rotate(242deg); }
50 | #Mycontextmenu span:nth-of-type(6) {
51 | transform: rotate(302.5deg); }
52 | #Mycontextmenu span:nth-of-type(7) {
53 | width: 20px;
54 | height: 20px;
55 | margin: -10px 0 0 -10px;
56 | left: 50%;
57 | top: 50%;
58 | background-color: black;
59 | clip-path: none;
60 | border-radius: 10px; }
61 | #Mycontextmenu span:nth-of-type(7):before {
62 | content: "";
63 | pointer-events: none;
64 | display: block;
65 | position: absolute;
66 | width: 10px;
67 | height: 5px;
68 | margin: -2.5px 0 0 0;
69 | border-radius: 10px;
70 | background-color: black;
71 | top: 50%;
72 | left: 50%;
73 | transform-origin: 0 50%;
74 | transition: transform 1s, width 1s,background-color 1s;
75 | z-index: -20; }
76 | #Mycontextmenu span:nth-of-type(1):hover {
77 | background-color: rgba(0, 0, 0, 0.3);
78 | transition: 1s;
79 | z-index: -30; }
80 | #Mycontextmenu span:nth-of-type(1):hover ~ span:nth-of-type(7) {
81 | transition: background-color 1s; }
82 | #Mycontextmenu span:nth-of-type(1):hover ~ span:nth-of-type(7):before {
83 | width: 100px;
84 | background-color: white;
85 | transform: rotate(-90deg);
86 | transition: transform 1s, width 1s,background-color 1s; }
87 | #Mycontextmenu span:nth-of-type(2):hover {
88 | background-color: rgba(0, 0, 0, 0.3);
89 | transition: 1s;
90 | z-index: -30; }
91 | #Mycontextmenu span:nth-of-type(2):hover ~ span:nth-of-type(7) {
92 | transition: background-color 1s; }
93 | #Mycontextmenu span:nth-of-type(2):hover ~ span:nth-of-type(7):before {
94 | width: 100px;
95 | background-color: white;
96 | transform: rotate(-30deg);
97 | transition: transform 1s, width 1s,background-color 1s; }
98 | #Mycontextmenu span:nth-of-type(3):hover {
99 | background-color: rgba(0, 0, 0, 0.3);
100 | transition: 1s;
101 | z-index: -30; }
102 | #Mycontextmenu span:nth-of-type(3):hover ~ span:nth-of-type(7) {
103 | transition: background-color 1s; }
104 | #Mycontextmenu span:nth-of-type(3):hover ~ span:nth-of-type(7):before {
105 | width: 100px;
106 | background-color: white;
107 | transform: rotate(30deg);
108 | transition: transform 1s, width 1s,background-color 1s; }
109 | #Mycontextmenu span:nth-of-type(4):hover {
110 | background-color: rgba(0, 0, 0, 0.3);
111 | transition: 1s;
112 | z-index: -30; }
113 | #Mycontextmenu span:nth-of-type(4):hover ~ span:nth-of-type(7) {
114 | transition: background-color 1s; }
115 | #Mycontextmenu span:nth-of-type(4):hover ~ span:nth-of-type(7):before {
116 | width: 100px;
117 | background-color: white;
118 | transform: rotate(90deg);
119 | transition: transform 1s, width 1s,background-color 1s; }
120 | #Mycontextmenu span:nth-of-type(5):hover {
121 | background-color: rgba(0, 0, 0, 0.3);
122 | transition: 1s;
123 | z-index: -30; }
124 | #Mycontextmenu span:nth-of-type(5):hover ~ span:nth-of-type(7) {
125 | transition: background-color 1s; }
126 | #Mycontextmenu span:nth-of-type(5):hover ~ span:nth-of-type(7):before {
127 | width: 100px;
128 | background-color: white;
129 | transform: rotate(150deg);
130 | transition: transform 1s, width 1s,background-color 1s; }
131 | #Mycontextmenu span:nth-of-type(6):hover {
132 | background-color: rgba(0, 0, 0, 0.3);
133 | transition: 1s;
134 | z-index: -30; }
135 | #Mycontextmenu span:nth-of-type(6):hover ~ span:nth-of-type(7) {
136 | transition: background-color 1s; }
137 | #Mycontextmenu span:nth-of-type(6):hover ~ span:nth-of-type(7):before {
138 | width: 100px;
139 | background-color: white;
140 | transform: rotate(210deg);
141 | transition: transform 1s, width 1s,background-color 1s; }
142 | #Mycontextmenu span:nth-of-type(1):hover, #Mycontextmenu span:nth-of-type(2):hover, #Mycontextmenu span:nth-of-type(6):hover {
143 | line-height: 70px; }
144 | #Mycontextmenu span:nth-of-type(3):hover, #Mycontextmenu span:nth-of-type(4):hover, #Mycontextmenu span:nth-of-type(5):hover {
145 | line-height: 85px; }
146 | #Mycontextmenu > div {
147 | overflow: hidden;
148 | position: absolute;
149 | height: 100%;
150 | width: 50%;
151 | top: 0;
152 | clip-path: none;
153 | z-index: 2;
154 | transition: left 3s; }
155 | #Mycontextmenu > div:nth-of-type(1) {
156 | left: 0%;
157 | background-color: black; }
158 | #Mycontextmenu > div:nth-of-type(1)::before {
159 | content: "";
160 | position: absolute;
161 | width: 100%;
162 | height: 50%;
163 | background-color: white;
164 | top: 0;
165 | right: -50%;
166 | border-radius: 50%; }
167 | #Mycontextmenu > div:nth-of-type(1):after {
168 | content: "";
169 | position: absolute;
170 | width: 25%;
171 | height: 12.5%;
172 | background-color: black;
173 | top: 56.25px;
174 | right: -12.5%;
175 | border-radius: 50%; }
176 | #Mycontextmenu > div:nth-of-type(1) > div {
177 | position: absolute;
178 | width: 25%;
179 | height: 12.5%;
180 | background-color: white;
181 | bottom: 56.25px;
182 | right: -12.5%;
183 | border-radius: 50%; }
184 | #Mycontextmenu > div:nth-of-type(2) {
185 | left: 50%;
186 | background-color: white; }
187 | #Mycontextmenu > div:nth-of-type(2):before {
188 | content: "";
189 | position: absolute;
190 | width: 100%;
191 | height: 50%;
192 | background-color: black;
193 | bottom: 0;
194 | left: -50%;
195 | border-radius: 50%; }
196 | #Mycontextmenu > div:nth-of-type(2):after {
197 | content: "";
198 | position: absolute;
199 | width: 25%;
200 | height: 12.5%;
201 | background-color: white;
202 | bottom: 56.25px;
203 | left: -12.5%;
204 | border-radius: 50%; }
205 | #Mycontextmenu > div:nth-of-type(2) > div {
206 | position: absolute;
207 | width: 25%;
208 | height: 12.5%;
209 | background-color: black;
210 | top: 56.25px;
211 | left: -12.5%;
212 | border-radius: 50%; }
213 | #Mycontextmenu:focus {
214 | animation: 0s; }
215 | #Mycontextmenu:focus > div:nth-of-type(1) {
216 | left: -100%;
217 | transition: left 3s; }
218 | #Mycontextmenu:focus > div:nth-of-type(2) {
219 | left: 150%;
220 | transition: left 3s; }
221 |
222 | a {
223 | width: 25%;
224 | height: 25%;
225 | display: inline-block;
226 | background-size: 100%;
227 | background-repeat: no-repeat;
228 | background-position: center;
229 | border-radius: 100%; }
230 |
231 | span:nth-of-type(1) a {
232 | background-image: url(./picture/google.png); }
233 |
234 | span:nth-of-type(2) a {
235 | position: relative;
236 | left: -3.9px;
237 | background-image: url(./picture/biying.png); }
238 |
239 | span:nth-of-type(3) a {
240 | position: relative;
241 | left: -3.9px;
242 | background-image: url(./picture/bd.png); }
243 |
244 | span:nth-of-type(4) a {
245 | position: relative;
246 | left: -1.5px;
247 | background-image: url(./picture/github.png); }
248 |
249 | span:nth-of-type(5) a {
250 | position: relative;
251 | left: .5px;
252 | background-image: url(./picture/v2ex.jpg); }
253 |
254 | span:nth-of-type(6) a {
255 | position: relative;
256 | left: -0.5px;
257 | background-image: url(./picture/zhihu.png); }
258 |
259 | @keyframes a {
260 | from {
261 | transform: rotate(0deg); }
262 | to {
263 | transform: rotate(-360deg); } }
264 |
265 | /*# sourceMappingURL=%D7%D4%B6%A8%D2%E5%D3%D2%BC%FC%B2%CB%B5%A5.css.map */
266 |
--------------------------------------------------------------------------------
/自定义右键菜单.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": ["%D7%D4%B6%A8%D2%E5%D3%D2%BC%FC%B2%CB%B5%A5.scss"],
5 | "names": [],
6 | "file": "%D7%D4%B6%A8%D2%E5%D3%D2%BC%FC%B2%CB%B5%A5.css"
7 | }
--------------------------------------------------------------------------------
/自定义右键菜单.js:
--------------------------------------------------------------------------------
1 | let node = document.querySelector("#Mycontextmenu")
2 | addEventListener("mouseup", function(e){
3 | document.oncontextmenu = ()=>false
4 | let x = e.clientX + document.documentElement.scrollLeft
5 | let y = e.clientY + document.documentElement.scrollTop
6 | if (e.button !== 2) {
7 | if (node.style.visibility === "visible" && !is_Inmenu(x,y,node)) {
8 | node.setAttribute("style","visibility:hidden;width:0px;height:0px;")
9 | }
10 | } else {
11 | if (!is_Inmenu(x,y,node)) {
12 | let x = e.clientX - 160
13 | let y = e.clientY - 150 + 10
14 | node.setAttribute("style",`visibility:visible;left:${x}px;top:${y}px;width:300px;height:300px;`)
15 | }
16 | }
17 | })
18 |
19 | function is_Inmenu(x,y,node){
20 | return x > node.getBoundingClientRect().left + document.documentElement.scrollLeft &&
21 | x < node.getBoundingClientRect().right + document.documentElement.scrollLeft &&
22 | y > node.getBoundingClientRect().top + document.documentElement.scrollTop &&
23 | y < node.getBoundingClientRect().bottom + document.documentElement.scrollTop
24 | ? true : false
25 | }
26 |
27 |
28 |
--------------------------------------------------------------------------------
/自定义右键菜单.scss:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | html,
8 | body {
9 | padding: 0 2px;
10 | }
11 |
12 | #Mycontextmenu {
13 | outline: none;
14 | position: fixed;
15 | overflow: hidden;
16 | visibility:hidden;
17 | text-align: center;
18 | border: 5px solid;
19 | width: 0px;
20 | height: 0px;
21 | border-radius: 150px;
22 | margin: -10px 0 0 10px;
23 | color: white;
24 | transition: width 1s,height 1s;
25 | background-image: url(./picture/bgc.gif);
26 | background-repeat: no-repeat;
27 | background-position: center;
28 | animation: a 2s .1s linear infinite;
29 | box-shadow: 0 0 5px 1px black;
30 | span {
31 | position: absolute;
32 | width: 173.205px;
33 | height: 150px;
34 | margin-left: -86.6025px;
35 | margin-top:-75px;
36 | left: 50%;
37 | top: 25%;
38 | line-height: 150px;
39 | clip-path: polygon(0 0, 50% 100%, 100% 0);
40 | transform-origin: 50% 100%;
41 | transition: background-color 1s 0s;
42 | @for $i from 1 to 7 {
43 | &:nth-of-type(#{$i}) {
44 | transform: rotate(0deg + ($i - 1) * 60.5);
45 | }
46 | }
47 | &:nth-of-type(7) {
48 | width: 20px;
49 | height: 20px;
50 | margin: -10px 0 0 -10px;
51 | left: 50%;
52 | top: 50%;
53 | background-color: black;
54 | clip-path: none;
55 | border-radius: 10px;
56 | &:before {
57 | content: "";
58 | pointer-events:none;
59 | display: block;
60 | position: absolute;
61 | width: 10px;
62 | height: 5px;
63 | margin: -2.5px 0 0 0;
64 | border-radius: 10px;
65 | background-color: black;
66 | top: 50%;
67 | left: 50%;
68 | transform-origin: 0 50%;
69 | transition: transform 1s, width 1s,background-color 1s;
70 | z-index: -20;
71 | }
72 | }
73 |
74 | @for $i from 1 to 7 {
75 | &:nth-of-type(#{$i}):hover {
76 | background-color: rgba(0, 0, 0, 0.3);
77 | transition: 1s;
78 | z-index: -30;
79 | ~span:nth-of-type(7) {
80 | transition: background-color 1s;
81 | &:before {
82 | width: 100px;
83 | background-color: white;
84 | transform: rotate(-90deg + 60 * ($i - 1));
85 | transition: transform 1s, width 1s,background-color 1s;
86 | }
87 | }
88 | }
89 | }
90 | &:nth-of-type(1):hover,
91 | &:nth-of-type(2):hover,
92 | &:nth-of-type(6):hover {
93 | line-height: 70px;
94 | }
95 | &:nth-of-type(3):hover,
96 | &:nth-of-type(4):hover,
97 | &:nth-of-type(5):hover {
98 | line-height: 85px;
99 | }
100 | }
101 | >div {
102 | overflow: hidden;
103 | position: absolute;
104 | height: 100%;
105 | width: 50%;
106 | top: 0;
107 | clip-path: none;
108 | z-index: 2;
109 | transition: left 3s ;
110 | &:nth-of-type(1) {
111 | left: 0%;
112 | background-color: black;
113 | &::before {
114 | content: "";
115 | position: absolute;
116 | width: 100%;
117 | height: 50%;
118 | background-color: white;
119 | top: 0;
120 | right: -50%;
121 | border-radius: 50%;
122 | }
123 | &:after {
124 | content: "";
125 | position: absolute;
126 | width: 25%;
127 | height: 12.5%;
128 | background-color: black;
129 | top: 56.25px;
130 | right: -12.5%;
131 | border-radius: 50%;
132 | }
133 | >div {
134 | position: absolute;
135 | width: 25%;
136 | height: 12.5%;
137 | background-color: white;
138 | bottom: 56.25px;
139 | right: -12.5%;
140 | border-radius: 50%;
141 | }
142 | }
143 | &:nth-of-type(2) {
144 | left: 50%;
145 | background-color: white;
146 | &:before {
147 | content: "";
148 | position: absolute;
149 | width: 100%;
150 | height: 50%;
151 | background-color: black;
152 | bottom: 0;
153 | left: -50%;
154 | border-radius: 50%;
155 | }
156 | &:after {
157 | content: "";
158 | position: absolute;
159 | width: 25%;
160 | height: 12.5%;
161 | background-color: white;
162 | bottom: 56.25px;
163 | left: -12.5%;
164 | border-radius: 50%;
165 | }
166 | >div {
167 | position: absolute;
168 | width: 25%;
169 | height: 12.5%;
170 | background-color: black;
171 | top: 56.25px;
172 | left: -12.5%;
173 | border-radius: 50%;
174 | }
175 | }
176 | }
177 |
178 | &:focus {
179 | animation: 0s;
180 | >div:nth-of-type(1) {
181 | left: -100%;
182 | transition: left 3s;
183 | }
184 | >div:nth-of-type(2) {
185 | left: 150%;
186 | transition: left 3s;
187 | }
188 | }
189 | }
190 |
191 |
192 | a{
193 | width: 25%;
194 | height: 25%;
195 | display: inline-block;
196 | background-size: 100%;
197 | background-repeat: no-repeat;
198 | background-position:center;
199 | border-radius: 100%;
200 | }
201 | span:nth-of-type(1) a{
202 | background-image: url(./picture/google.png);
203 | }
204 | span:nth-of-type(2) a{
205 | position: relative;
206 | left:-3.9px;
207 | background-image: url(./picture/biying.png);
208 | }
209 | span:nth-of-type(3) a{
210 | position: relative;
211 | left:-3.9px;
212 | background-image: url(./picture/bd.png);
213 | }
214 | span:nth-of-type(4) a{
215 | position: relative;
216 | left:-1.5px;
217 | background-image: url(./picture/github.png);
218 | }
219 | span:nth-of-type(5) a{
220 | position: relative;
221 | left:.5px;
222 | background-image: url(./picture/v2ex.jpg);
223 | }
224 | span:nth-of-type(6) a{
225 | position: relative;
226 | left:-0.5px;
227 | background-image: url(./picture/zhihu.png);
228 | }
229 |
230 | @keyframes a {
231 | from {
232 | transform: rotate(0deg);
233 | }
234 | to {
235 | transform: rotate(-360deg);
236 | }
237 | }
238 |
239 |
--------------------------------------------------------------------------------