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=&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0