დაყენების ინსტრუქცია: პირველ რიგში ჰორიზონტალური მენიუ საჭიროებს თქვენს მიერ რედაქტირებას, შემდეგ ქვემოთ მოცემული სკრიპტი ჩასვით საიტის ბლოკში...
<!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" /> <title>CodePen - A Pen by Denis</title> <link rel="canonical" href="https://codepen.io/Dwstroy/pen/POyzbW"> <link href="https://fonts.googleapis.com/css?family=Cuprum" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> body{ background-image: url("../img/ep_naturalwhite.png"); } header{ margin-top: 50px; font-family: Cuprum, Arial, Helvetica, sans-serif; } .dws-menu *{ margin: 0; padding: 0; } .dws-menu ul, .dws-menu ol{ list-style: none; } .dws-menu > ul{ display: flex; justify-content: center; } .dws-menu > ul li{ position: relative; border-right: 1px solid #c7c8ca; } .dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; } .dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; } .dws-menu > ul li a{ display: block; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: rgb(201,201,201); /* Old browsers */ background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(246,246,246,1) 2%, rgba(196,197,199,1) 98%, rgba(117,117,119,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(246,246,246,1) 2%,rgba(196,197,199,1) 98%,rgba(117,117,119,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(246,246,246,1) 2%,rgba(196,197,199,1) 98%,rgba(117,117,119,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#757577',GradientType=0 ); /* IE6-9 */ padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; } .dws-menu li a:hover{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */ background: rgb(224,225,229); /* Old browsers */ background: -moz-linear-gradient(top, rgba(224,225,229,1) 0%, rgba(69,69,71,1) 2%, rgba(69,69,71,1) 98%, rgba(224,225,229,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(224,225,229,1) 0%,rgba(69,69,71,1) 2%,rgba(69,69,71,1) 98%,rgba(224,225,229,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(224,225,229,1) 0%,rgba(69,69,71,1) 2%,rgba(69,69,71,1) 98%,rgba(224,225,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e1e5', endColorstr='#e0e1e5',GradientType=0 ); /* IE6-9 */ color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; } /*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; display: none; } .dws-menu li > ul li{ border: 1px solid #c7c8ca; } .dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; } .dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; } .dws-menu li:hover > ul{ display: block; } </style> </head> <body translate="no"> <header> <nav class="dws-menu"> <ul> <li><a href="#"><i class="fa fa-home"></i>მთავარი</a></li> <li><a href="#"><i class="fa fa-shopping-cart"></i>პროდუქცია</a> <ul> <li><a href="#">ტანსაცმელი</a> <ul> <li><a href="#">ფეხსაცმელი</a></li> <li><a href="#">ქურთუკები</a></li> <li><a href="#">შარვლები</a></li> </ul> </li> <li><a href="#">ელექტრონიკა</a> <ul> <li><a href="#">კამერები</a></li> <li><a href="#">კომპიუტერები</a></li> <li><a href="#">ტელეფონები</a> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">Flf</a></li> <li><a href="#">Apple</a></li> </ul> </li> </ul> </li> <li><a href="#">კვებითი პროდუქტები</a></li> <li><a href="#">ინსტრუმენტები</a></li> <li><a href="#">სარეცხი ფხვნილები</a></li> </ul> </li> <li><a href="#"><i class="fa fa-cogs"></i>მომსახურება</a> <ul> <li><a href="#">მომსახურება 1</a></li> <li><a href="#">მომსახურება 2</a></li> <li><a href="#">მომსახურება 3</a></li> </ul> </li> <li><a href="#"><i class="fa fa-th-list"></i>ახალი ამბები</a></li> <li><a href="#"><i class="fa fa-envelope-open"></i>კონტაქტები</a></li> </ul> </nav> </header>
დააკოპირეთ
