დაყენების ინსტრუქცია: პირველ რიგში მენიუ საჭიროებს გაქართულებას, შემდეგ ქვემოთ მოცემული სკრიპტი ჩასვით საიტის ბლოკში...
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title>CodePen - Vector/ Project Selection</title> <link rel="canonical" href="https://codepen.io/Adir-SL/pen/zYKXEPK"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> <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> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <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="multiSelect" id="menu-1"> <div class="bottomBorder iconDiv noSpace narrow placeholder"><i class="material-icons">search</i>Search</div> <div class="iconDiv justHover" onclick="nextMenu(event);">Project Example<i class="material-icons">arrow_right</i></div> <div class="iconDiv justHover" onclick="nextMenu(event);">David’s project<i class="material-icons">arrow_right</i></div> <div class="iconDiv justHover" onclick="nextMenu(event);">Project Idan<i class="material-icons">arrow_right</i></div> <div class="iconDiv justHover" onclick="nextMenu(event);">Manhattan<i class="material-icons">arrow_right</i></div> <div class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div> </div> <div class="multiSelect" id="menu-2"> <div class="bottomBorder titleDiv">Project Idan</div> <div onclick="openMulti();">Idan Vector</div> <div onclick="openMulti();">Testings</div> <div onclick="openMulti();">Features_120</div> <div onclick="openMulti();">Aggregators</div> <div id="menu-1" class="topBorder iconDiv noSpace" onclick="prevMenu(event);"><i class="material-icons">arrow_back</i>Back</div> </div> <div> </div> <script id="rendered-js" > function openMulti() { if (document.querySelector(".selectWrapper").style.pointerEvents == "all") { document.querySelector(".selectWrapper").style.opacity = 0; document.querySelector(".selectWrapper").style.pointerEvents = "none"; resetAllMenus(); } else { document.querySelector(".selectWrapper").style.opacity = 1; document.querySelector(".selectWrapper").style.pointerEvents = "all"; } } function nextMenu(e) { menuIndex = eval(event.target.parentNode.id.slice(-1)); document.querySelectorAll(".multiSelect")[menuIndex].style.transform = "translateX(-100%)"; // document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"; document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)"; document.querySelectorAll(".multiSelect")[menuIndex + 1].style.transform = "translateX(0)"; document.querySelectorAll(".multiSelect")[menuIndex + 1].style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"; } function prevMenu(e) { menuIndex = eval(event.target.parentNode.id.slice(-1)); document.querySelectorAll(".multiSelect")[menuIndex].style.transform = "translateX(100%)"; document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"; document.querySelectorAll(".multiSelect")[menuIndex - 1].style.transform = "translateX(0)"; document.querySelectorAll(".multiSelect")[menuIndex - 1].style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"; } function resetAllMenus() { setTimeout(function () { var x = document.getElementsByClassName("multiSelect"); var i; for (i = 1; i < x.length; i++) {if (window.CP.shouldStopExecution(0)) break; x[i].style.transform = "translateX(100%)"; x[i].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)"; }window.CP.exitedLoop(0); document.querySelectorAll(".multiSelect")[0].style.transform = "translateX(0)"; document.querySelectorAll(".multiSelect")[0].style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0% 100%)"; }, 300); } //# sourceURL=pen.js </script> </body> </html>
დააკოპირეთ
