დაყენების ინსტრუქცია: პირველ რიგში მენიუ საჭიროებს გაქართულებას, შემდეგ ქვემოთ მოცემული სკრიპტი ჩასვით საიტის ბლოკში...
<!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 - Dashboard Side Nav Menu</title> <link rel="canonical" href="https://codepen.io/romaopedro199/pen/OJjgZVR"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'> <style> @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&display=swap'); :root { --color-primary: #546de5; --color-secondary: #8395e9; --color-secondary-light: rgb(84, 109, 229, .05); --color-dark: #303952; --color-dark-light: #4f576c; --color-light: #ffffff; } * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; align-items: flex-start; } .menu { display: flex; align-items: flex-start; height: 100vh; /* overflow-y: hidden; */ } .menu .main-menu { width: 60px; height: 100vh; background-color: var(--color-dark); } .menu .main-menu .logo { display: flex; padding: 10px; } .menu .main-menu .logo img { width: 40px; margin: 0px auto; } .menu .main-menu .button-list { margin-top: 30px; } .menu .main-menu .button-list .item { display: flex; padding: 15px 10px; cursor: pointer; transition: all .5s; } .menu .main-menu .button-list .item:hover { background-color: var(--color-dark-light); } .menu .main-menu .button-list .item[active] { background-color: var(--color-primary); } .menu .main-menu .button-list .item i { font-size: 16px; color: var(--color-light); margin: 0px auto; pointer-events: none; } .menu .secondary-menu { padding: 20px 0px; width: 0px; height: 100vh; background-color: var(--color-light); -webkit-box-shadow: 10px 0px 15px 0px rgba(48,57,82,0.1); -moz-box-shadow: 10px 0px 15px 0px rgba(48,57,82,0.1); box-shadow: 10px 0px 15px 0px rgba(48,57,82,0.1); transition: all .5s; } .menu .secondary-menu .content { opacity: 0; } .menu .secondary-menu[expand] { width: 200px; } .menu .secondary-menu[expand] .content { opacity: 1; } .menu .secondary-menu .content { max-height: calc(100vh - 40px); overflow-y: auto; transition: opacity .5s; /* Firefox */ scrollbar-color: var(--color-secondary-light) var(--color-secondary-light) !important; scrollbar-width: thin !important; } .menu .secondary-menu .content::-webkit-scrollbar { width: 2px; } .menu .secondary-menu .content::-webkit-scrollbar-track { background: var(--color-secondary-light); } .menu .secondary-menu .content .title { padding: 0px 20px; } .menu .secondary-menu .title span { font-family: 'Open Sans', sans-serif; font-size: 18px; } .menu .secondary-menu .button-list-title { padding: 20px 20px 10px 20px; } .menu .secondary-menu .button-list-title span { font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; } .menu .secondary-menu .button-list { padding: 20px 0px; } .menu .secondary-menu .button-list .item { display: flex; align-items: center; height: 35px; padding: 0px 20px; cursor: pointer; transition: all .5s; } .menu .secondary-menu .button-list .item:hover { background-color: var(--color-secondary-light); } .menu .secondary-menu .button-list .item .border-left { height: 100%; border-left: 2px solid var(--color-dark-light); opacity: 0.1; margin-right: 15px; pointer-events: none; } .menu .secondary-menu .button-list .item span { font-family: 'Open Sans', sans-serif; font-size: 12px; color: var(--color-dark-light); opacity: 0.3; pointer-events: none; } .menu .secondary-menu .button-list .item[active] { background-color: var(--color-light); } .menu .secondary-menu .button-list .item[active] .border-left { border-left-color: var(--color-secondary); opacity: 1; } .menu .secondary-menu .button-list .item[active] span { color: var(--color-secondary); opacity: 1; } </style> </head> <body translate="no"> <div class="container"> <div class="menu"> <div class="main-menu"> <div class="logo"> <img src="https://raw.githubusercontent.com/romaopedro199/dashboard-navigation-side-menu/main/logo.png"> </div> <div class="button-list"> <div class="item" active> <i class="fas fa-home"></i> </div> <div class="item"> <i class="fas fa-user"></i> </div> <div class="item"> <i class="fas fa-briefcase"></i> </div> <div class="item"> <i class="fas fa-chart-pie"></i> </div> <div class="item"> <i class="fas fa-user-cog"></i> </div> <div class="item"> <i class="fas fa-cog"></i> </div> </div> </div> <div class="secondary-menu" expand> <div class="content"> <div class="title"> <span>Settings</span> </div> <div class="button-list-title"> <span>User admin</span> </div> <div class="button-list"> <div class="item" active> <div class="border-left"></div> <span>My Profile</span> </div> <div class="item"> <div class="border-left"></div> <span>Org</span> </div> <div class="item"> <div class="border-left"></div> <span>Teams</span> </div> <div class="item"> <div class="border-left"></div> <span>Roles</span> </div> <div class="item"> <div class="border-left"></div> <span>Profiles</span> </div> </div> <div class="button-list-title"> <span>System config.</span> </div> <div class="button-list"> <div class="item"> <div class="border-left"></div> <span>Rulesets</span> </div> <div class="item"> <div class="border-left"></div> <span>Prospects</span> </div> <div class="item"> <div class="border-left"></div> <span>Accounts</span> </div> <div class="item"> <div class="border-left"></div> <span>Calls</span> </div> <div class="item"> <div class="border-left"></div> <span>Triggers</span> </div> <div class="item"> <div class="border-left"></div> <span>Phones</span> </div> </div> </div> </div> </div> </div> <script id="rendered-js" > const mainButtons = document.querySelectorAll('.main-menu .item'); const secondaryButtons = document.querySelectorAll('.secondary-menu .item'); const handleMainButtonClick = event => { const button = event.target; if (!isActive(button)) { removeMainActive(); addActive(button); } }; const handleSecondaryButtonClick = event => { const button = event.target; if (!isActive(button)) { removeSecondaryActive(); addActive(button); } }; mainButtons.forEach(button => { button.addEventListener('click', handleMainButtonClick); }); secondaryButtons.forEach(button => { button.addEventListener('click', handleSecondaryButtonClick); }); function isActive(button) { return button.hasAttribute('active'); } function removeMainActive() { document.querySelectorAll('.main-menu .item[active]').forEach(item => { item.removeAttribute('active'); }); } function removeSecondaryActive() { document.querySelectorAll('.secondary-menu .item[active]').forEach(item => { item.removeAttribute('active'); }); } function addActive(button) { button.setAttribute('active', ''); } //# sourceURL=pen.js </script> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script> </body> </html>
დააკოპირეთ
