ყენების ინსტრუქცია: პირველ რინისაჭიროებს გაქართულებას, შემდეგ ქვემოთ მოცემული სკრიპტი ჩასვით საიტის ბლოკში...
დაყენების ინსტრუქცია: პირველ რიგში მენიუ საჭიროებს გაქართულებას, შემდეგ ქვემოთ მოცემული სკრიპტი ჩასვით საიტის ბლოკში...
<!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 - Css menu maker</title> <link rel="canonical" href="https://codepen.io/zemahell/pen/Zbjxby"> <style> @import url(https://fonts.googleapis.com/css?family=Raleway:400,200); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: 220px; font-family: Raleway, sans-serif; color: #ffffff; } #cssmenu ul ul { display: none; } #cssmenu > ul > li.active > ul { display: block; } .align-right { float: right; } #cssmenu > ul > li > a { padding: 16px 22px; cursor: pointer; z-index: 2; font-size: 16px; text-decoration: none; color: #ffffff; background: #3ab4a6; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } #cssmenu > ul > li > a:hover { color: #d8f3f0; } #cssmenu ul > li.has-sub > a:after { position: absolute; right: 26px; top: 19px; z-index: 5; display: block; height: 10px; width: 2px; background: #ffffff; content: ""; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #cssmenu ul > li.has-sub > a:before { position: absolute; right: 22px; top: 23px; display: block; width: 10px; height: 2px; background: #ffffff; content: ""; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #cssmenu ul > li.has-sub.open > a:after, #cssmenu ul > li.has-sub.open > a:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #cssmenu ul ul li a { padding: 14px 22px; cursor: pointer; z-index: 2; font-size: 14px; text-decoration: none; color: #dddddd; background: #49505a; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } #cssmenu ul ul ul li a { padding-left: 32px; } #cssmenu ul ul li a:hover { color: #ffffff; } #cssmenu ul ul > li.has-sub > a:after { top: 16px; right: 26px; background: #dddddd; } #cssmenu ul ul > li.has-sub > a:before { top: 20px; background: #dddddd; } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <div id='cssmenu'> <ul> <li><a href='#'>Home</a></li> <li class='active has-sub'><a href='#'>Products</a> <ul> <li class='has-sub'><a href='#'>Product 1</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li class='has-sub'><a href='#'>Product 2</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul> </div> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script id="rendered-js" > /* FUENTE: http://cssmenumaker.com/menu/flat-accordion-menu */ (function ($) { $(document).ready(function () { $('#cssmenu li.active').addClass('open').children('ul').show(); $('#cssmenu li.has-sub>a').on('click', function () { $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(200); } else { element.addClass('open'); element.children('ul').slideDown(200); element.siblings('li').children('ul').slideUp(200); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(200); } }); }); })(jQuery); //# sourceURL=pen.js </script> </body> </html>
დააკოპირეთ
