jquery实现右键多级菜单弹出效果代码
代码语言：html
所属分类：菜单导航
代码描述：jquery实现右键多级菜单弹出效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Awesome Context Menu v2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
--bg: #24262d;
--text: #dfe3ff;
--color1: #673ab7;
--color2: #3f51b5;
--divider: rgba(255,255,255,0.16);
}
.context {
font-size: 0.875rem;
color: var(--text);
list-style: none;
margin: 0;
padding: 0.05em 0.25em;
border: 1px solid transparent;
border-right-color: rgba(255, 255, 255, 0.15);
border-bottom-color: rgba(255, 255, 255, 0.15);
border-left-color: rgba(0, 0, 0, 0.15);
border-top-color: rgba(0, 0, 0, 0.15);
border-radius: 5px;
position: absolute;
min-width: 16em;
z-index: 1;
background: linear-gradient(145deg, var(--color1), var(--color2));
box-shadow: 2px 5px 16px -4px #141321;
will-change: transform, opacity, filter;
transition: transform, opacity, visibility, filter;
transition-duration: 0.5s, 0.2s, 0.4s, 0.3s;
transition-delay: 0.1s, 0s, 0.4s, 0.2s;
transition-timing-function: ease;
transform: rotate3d(-1, -1, 0, 30deg) scale(1);
transform-origin: 0 0;
opacity: 0;
visibility: hidden;
filter: blur(6px);
}
.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, 0s;
visibility: visible;
filter: none;
}
.context.sub {
background: var(--color2);
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
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.4s, 0.25s, 0.15s, 0.15s, 0.01s;
transition-delay: 0.4s, 0.25s, 0.3s, 0.3s, 0.35s;
overflow: hidden;
filter: none;
}
.context.sub .f {
transform: translateX(-2.25em);
}
.context.sub.oppositeX {
right: 100%;
left: auto;
transform: translateX(0.7em);
}
.context.sub.oppositeY {
top: auto;
bottom: -0.4em;
}
.context > li {
padding: 0.3em 1.5em 0.35em 2.8em;
border-radius: 3px;
position: relative;
}
.context > li:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
border-radius: 3px;
z-index: -1;
background-color: rgba(97, 97, 97, 0.37);
mix-blend-mode: color-dodge;
transition: opacity 0.15s cubic-bezier(0.55, 0.06, 0.68, 0.19);
opacity: 0;
}
.context > li.hilight {
font-weight: 500;
padding-bottom: 0.5em;
color: white;
}
.context > li:not(.context > li.nope):hover {
color: white;
}
.context > li:not(.context > li.nope):hover:before {
opacity: 1;
transition: opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.context > li:not(.context > li.nope):hover .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 > li:hover > .f, .context > li.hilight > .f {
opacity: 1;
}
.context > li:last-child {
margin-bottom: 0.25em;
}
.context > li:first-child {
margin-top: 0.25em;
}
.context > li.nope {
color: rgba(255, 255, 255, 0.3);
}
.context > li.active {
-webkit-animation: flash 0.5s ease 1;
animation: flash 0.5s ease 1;
}
.context > li:nth-of-type(1) {
margin-top: 0.5em;
}
.context > li .f {
opacity: 0.5;
transition: all 0.2s ease;
}
.context > li i {
font-style: normal;
text-decoration: underline;
-webkit-text-decoration-color: rgba(255, 255, 255, 0.35);
text-decoration-color: rgba(255, 255, 255, 0.35);
}
.context .div {
border-bottom: 1px solid var(--divider);
padding: 0;
margin-top: 0.3em;
margin-bottom: 0.35em;
}
.context .f {
font-style: normal;
position: absolute;
transform: translateX(-2.4em);
}
.context .f[class*=chevron-right] {
right: 0;
transform: none;
}
.f.f-circle {
fill: red;
}
span.size {
position: absolute;
font-size: 0.675em;
left: 1.2em;
top: 0.8em;
text-shadow: aliceblue;
}
@-webkit-keyframes flash {
0% {
background: rgba(255, 255, 255, 0);
}
7% {
background: rgba(255, 255, 255, 0.2);
}
14% {
background: rgba(255, 255, 255, 0);
}
21% {
background: rgba(255, 255, 255, 0.3);
}
}
@keyframes flash {
0% {
background: rgba(255, 255, 255, 0);
}
7% {
background: rgba(255, 255, 255, 0.2);
}
14% {
background: rgba(255, 255, 255, 0);
}
21% {
background: rgba(255, 255, 255, 0.3);
}
}
*,
*:after,
*:before {
box-sizing: border-box;
}
body,
html {
font-family: "Inter", sans-serif;
background-color: var(--bg);
color: var(--text);
min-height: 100%;
font-weight: 300;
}
.hide {
display: none;
}
.f {
width: 1.2em;
height: 1.2em;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
h1, h2, h3, h4 {
margin: 30px 30px 0.2em;
font-weight: 300;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1 strong, h2 strong, h3 strong, h4 strong {
font-weight: 700;
}
p {
margin: 0 32px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.colors {
position: absolute;
bottom: 1.5em;
left: 0;
padding: 0;
margin: 30px 30px 0.2em;
text-align: left;
}
.colors h4 {
margin: 1em 0;
font-size: 0.875rem;
}
.colors input {
padding: 0;
border: none;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Right-click <strong>anywhere</strong> for <strong><em>awesome! </em></strong></h1>
<p>overriding the default browser contextmenu</p>
<div class="colors">
<h4>Pick your own colors!</h4>
<input type="color" name="c1" id="c1" value="#673ab7" />
<input type="color" name="c2" id="c2" value="#3f51b5" />
</div>
<ul class="context">
<li class="top">
<svg class="f f-edit-3" width="24" height="24">
<use xlink:href="#edit-3"></use>
</svg><i>E</i>dit
<svg class="f f-chevron-right" width="24" height="24">
<use xlink:href="#chevron-right"></use>
</svg>
<ul class="context sub">
<li title="Chosen: Red">
<svg class="f f-circle" width="24" height="24">
<use xlink:href="#circle"></use>
</svg>Colo<i>r</i>
</li>
<li title="Chosen: Xtra Large">
<svg class="f f-maximize" width="24" height="24">
<use xlink:href="#maximize"></use>
</svg>Si<i>z</i>e<span class="size">XL</span>
</li>
</ul>
</li>
<li class="hilight">
<svg class="f f-shopping-cart" width="24" height="24">
<use xlink:href="#shopping-cart"></use>
</svg><i>A</i>dd to Cart
</li>
<li>
<svg class="f f-heart" width="24" height="24">
<use xlink:href="#heart"></use>
</svg>Save to <i>W</i>ishlist
</li>
<li class="div"></li>
<li>
<svg class="f f-share-2" width="24" height="24">
<use xlink:href="#share-2"></use>
</svg>S<i>h</i>are
<svg class="f f-chevron-right" width="24" height="24">
<use xlink:href="#chevron-right"></use>
</svg>
<ul class="context sub">
<li class="hilight">
<svg class="f f-codepen" width="24" height="24">
<use xlink:href="#codepen"></use>
</svg>JavaScript
</li>
<li>
<svg class="f f-mail" width="24" height="24">
<use xlink:href="#mail"></use>
</svg>Email to friend
</li>
<li>
<svg class="f f-message-circle" width="24" height="24">
<use xlink:href="#message-circle"></use>
</svg>Social
</li>
<li class="nope" title="lol, not likely">
<svg class="f f-alert-octagon" width="24" height="24">
<use xlink:href="#alert-octagon"></use>
</svg>FBI / CIA
</li>
</ul>
</li>
<li>
<svg class="f f-copy" width="24" height="24">
<use xlink:href="#copy"></use>
</svg>Copy <i>l</i>ink
</li>
<li class="div"></li>
<li>
<svg class="f f-image" width="24" height="24">
<use xlink:href="#image"></use>
</svg><i>V</i>iew image
</li>
<li>
<svg class="f f-settings" width="24" height="24">
<use xlink:href="#settings"></use>
</svg>Settin<i>g</i>s
</li>
</ul><svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="activity" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></symbol><symbol id="airplay" viewBox="0 0 24 24"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></symbol><symbol id="alert-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></symbol><symbol id="alert-octagon" viewBox="0 0 24 24"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></symbol><symbol id="alert-triangle" viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></symbol><symbol id="align-center" viewBox="0 0 24 24"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></symbol><symbol id="align-justify" viewBox="0 0 24 24"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></symbol><symbol id="align-left" viewBox="0 0 24 24"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></symbol><symbol id="align-right" viewBox="0 0 24 24"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></symbol><symbol id="anchor" viewBox="0 0 24 24"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="22" x2="12" y2="8"></line><path d="M5 12H2a10 10 0 0 0 20 0h-3"></path></symbol><symbol id="aperture" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></symbol><symbol id="archive" viewBox="0 0 24 24"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></symbol><symbol id="arrow-down-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></symbol><symbol id="arrow-down-left" viewBox="0 0 24 24"><line x1="17" y1="7" x2="7" y2="17"></line><polyline points="17 17 7 17 7 7"></polyline></symbol><symbol id="arrow-down-right" viewBox="0 0 24 24"><line x1="7" y1="7" x2="17" y2="17"></line><polyline points="17 7 17 17 7 17"></polyline></symbol><symbol id="arrow-down" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></symbol><symbol id="arrow-left-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></symbol><symbol id="arrow-left" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></symbol><symbol id="arrow-right-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1=&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0