დაყენების ინსტრუქცია: პირველ რიგში მენიუ საჭიროებს თქვენს მიერ რედაქტირებას, შემდეგ ქვემოთ მოცემული სკრიპტი ჩასვით საიტის ბლოკში...
<meta charset="UTF-8"> <link href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" rel="apple-touch-icon" type="image/png" /><meta name="apple-mobile-web-app-title" content="CodePen"> <link href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" rel="shortcut icon" type="image/x-icon" /> <link color="#111" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" rel="mask-icon" type="image/x-icon" /> <title></title> <link href="https://codepen.io/zornetru/pen/pxyJYr" rel="canonical" /> <style type="text/css">body { margin: 0; padding: 0; font: 1em/1.4em sans-serif; } a { text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } .side { width: 200px; margin: 20px; } .menu a { background: #3d3d3d; color: #fff; padding: 10px; display: block; border-bottom: 1px solid #666; transition: all 0.5s ease; } .menu a:hover { background: #666; padding: 10px 0 10px 20px; } .menu li:first-child a, .menu li .menu__drop li:first-child a { border-radius: 3px 3px 0 0; } .menu li:last-child a, .menu li .menu__drop li:last-child a { border-radius: 0 0 3px 3px; border-bottom: 0; } .menu li .menu__drop li a { border-radius: 0; border-bottom: 1px solid #666; } /*Подменю*/ .menu__list { position: relative; } .menu__drop { position: absolute; width: 100%; left: 100%; border-left: 10px solid transparent; top: -9999px; opacity: 0; transition: opacity 0.5s ease; } .menu__list:hover .menu__drop { opacity: 1; top: 0; } /*треугольнички*/ .menu__list::after { Content: " "; position: absolute; border: 5px solid; border-color: transparent transparent transparent #fff; top: 1em; right: 0.7em; transition: all 0.5s ease; } .menu__list:hover::after { transform: scaleX(-1); } </style> <script> window.console = window.console || function(t) {}; </script> <div class="side"> <ul class="menu"> <li class="menu__list"><a href="#">მთავარი 1</a> <ul class="menu__drop"> <li><a href="#">მენიუ 1</a></li> <li><a href="#">მენიუ 2</a></li> <li><a href="#">მენიუ 3</a></li> <li><a href="#">მენიუ 4</a></li> <li><a href="#">მენიუ 5</a></li> </ul> </li> <li><a href="#">მთავარი 2</a></li> <li class="menu__list"><a href="#">მთავარი 3</a> <ul class="menu__drop"> <li><a href="#">მენიუ 1</a></li> <li><a href="#">მენიუ 2</a></li> <li><a href="#">მენიუ 3</a></li> <li><a href="#">მენიუ 4</a></li> <li><a href="#">მენიუ 5</a></li> </ul> </li> <li><a href="#">მთავარი 4</a></li> <li class="menu__list"><a href="#">მთავარი 5</a> <ul class="menu__drop"> <li><a href="#">მენიუ 1</a></li> <li><a href="#">მენიუ 2</a></li> <li><a href="#">მენიუ 3</a></li> <li><a href="#">მენიუ 4</a></li> <li><a href="#">მენიუ 5</a></li> </ul> </li> </ul> </div>
დააკოპირეთ
