js实现弹出下拉多级菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:js实现弹出下拉多级菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> :root { --bgColor: #0fddaf; --txtColor: #ffffff; --borColor: rgba(0, 0, 0, 0); --sizeVar: 8px; --textPrimary: #4b4760; --textSecondary: #7f7989; --borderColor: #cccccc; } body { font-family: "Roboto", sans-serif; font-weight: 400; font-size: calc(var(--sizeVar) * 1.75); } .flexDiv { display: flex; flex-direction: column; align-items: flex-start; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 32px; } .selectWrapper { width: 100%; position: relative; opacity: 0; pointer-events: none; transition: opacity 100ms linear 0s; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.24)); padding-top: calc(var(--sizeVar) / 2); } .multiSelect { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); border: 1px solid var(--borderColor); box-sizing: border-box; border-radius: calc(var(--sizeVar) / 2); position: absolute; width: auto; left: 0; right: 0; overflow: hidden; background: #ffffff; transition: transform 300ms ease-in-out 0s, -webkit-clip-path 300ms ease-in-out 0s; transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s; transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s, -webkit-clip-path 300ms ease-in-out 0s; } .multiSelect div { color: var(--textPrimary); padding: 16px; width: auto; cursor: pointer; } .multiSelect div:hover { background-color: #f6f6f6; } .bottomBorder { border-bottom: 1px solid var(--borderColor); } .topBorder { border-top: 1px solid var(--borderColor); } .iconDiv { display: flex; align-items: center; justify-content: space-between; } .noSpace { justify-content: flex-start; gap: 6px; } .titleDiv { pointer-events: none; font-weight: 700; } .justHover i { opacity: 0; } .justHover:hover i { opacity: 1; } .multiSelect .placeholder { color: var(--textSecondary); font-style: italic; } .multiSelect .narrow { padding-top: 10px; padding-bottom: 10px; } .multiSelect i { color: var(--textSecondary); } .multiSelect { transform: translateX(100%); -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); } .multiSelect:nth-of-type(1) { transform: translateX(0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .sec_btn { --bgColor: #869cff; } button { font-family: "Roboto", sans-serif; font-size: calc(var(--sizeVar) * 1.75); font-weight: 500; border: none; outline: none; padding: var(--sizeVar) calc(var(--sizeVar) * 2); border-radius: calc(var(--sizeVar) / 2); cursor: pointer; background-color: var(--bgColor); color: var(--txtColor); box-shadow: 0 0 0 1px var(--borColor) inset; } button:focus { --borColor: rgba(0, 0, 0, 0.4); } button:hover { --bgColor: #1fcc9e; } .sec_btn:hover { --bgColor: #6279e7; } .tri_btn:hover { --bgColor: #f8f7f8; } button:active { --bgColor: #1db284; } .sec_btn:active { --bgColor: #5468c7; } .tri_btn:active { --bgColor: #e7e7e7; } </style> </head> <body> <div class="flexDiv"> <button class="sec_btn" onclick="openMulti();">Add to feature vector</button> <div class="selectWrapper"> <div class="multiSelect" id="menu-0"> <div class="bottomBorder">New feature vector</div> <div onclick="openMulti();">Vector_01</div> <div onclick="openMulti();">myVector</div> <div onclick="openMulti();">featureVector</div> <div class="topBorder iconDiv" onclick="nextMenu(event);">Other projects<i class="material-icons">arrow_right</i></div> </div> <div class="multiS.........完整代码请登录后点击上方下载按钮下载查看
网友评论0