Светлое анимированное горизонтальное меню на jQuery + SVG + CSS3
Необычное светлое горизонтальное меню с анимированным эффектом перехода между пунктами
Для начала посмотрите ДЕМО
Установка:
1#: Перед закрывающим тегом </head> вставьте:
|
1 |
<link rel="stylesheet" type="text/css" href="/css/hmenustyle.css"> |
2#: Следующий код поместите между тегами <body> и </body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<div class="frame"> <ul class="tabbar"> <li class="active"> <a href="" class="box"> <div> <svg> <use xlink:href="#box"> </svg> <em></em> </div> </a> </li> <li> <a href="" class="home"> <div> <svg> <use xlink:href="#home"> </svg> </div> </a> </li> <li> <a href="" class="calendar"> <div> <svg> <use xlink:href="#calendar"> </svg> <em></em> </div> </a> </li> </ul> </div> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="box"> <path d="M4.2715356,6.86557078 C3.79533783,7.1301251 3.5,7.63205601 3.5,8.1768067 L3.5,15.8231933 C3.5,16.367944 3.79533783,16.8698749 4.2715356,17.1344292 L11.2715356,21.0233181 C11.7245694,21.2750036 12.2754306,21.2750036 12.7284644,21.0233181 L19.7284644,17.1344292 C20.2046622,16.8698749 20.5,16.367944 20.5,15.8231933 L20.5,8.1768067 C20.5,7.63205601 20.2046622,7.1301251 19.7284644,6.86557078 L12.7284644,2.97668189 C12.2754306,2.72499645 11.7245694,2.72499645 11.2715356,2.97668189 L4.2715356,6.86557078 Z"></path> </symbol> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="home"> <path d="M3.66781808,10.0753614 C3.5610739,10.1702451 3.5,10.3062472 3.5,10.4490661 L3.5,20 C3.5,20.8284271 4.17157288,21.5 5,21.5 L19,21.5 C19.8284271,21.5 20.5,20.8284271 20.5,20 L20.5,10.4490661 C20.5,10.3062472 20.4389261,10.1702451 20.3321819,10.0753614 L12.9965458,3.55479593 C12.4282167,3.04961457 11.5717833,3.04961457 11.0034542,3.55479593 L3.66781808,10.0753614 Z"></path> </symbol> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="calendar"> <path d="M5,4.5 C4.17157288,4.5 3.5,5.17157288 3.5,6 L3.5,19 C3.5,19.8284271 4.17157288,20.5 5,20.5 L19,20.5 C19.8284271,20.5 20.5,19.8284271 20.5,19 L20.5,6 C20.5,5.17157288 19.8284271,4.5 19,4.5 L5,4.5 Z"></path> </symbol> </svg> <script type="text/javascript"> $('.tabbar li a').on('click', function(e) { e.preventDefault(); let that = $(this), li = that.parent(), ul = li.parent(); if(!ul.hasClass('move') && !li.hasClass('active')) { ul.children('li').removeClass('active'); ul.css('--x-n', li.position().left + li.outerWidth() / 2 + 'px'); li.addClass('move'); ul.addClass('move'); setTimeout(() => { ul.removeClass('move'); li.removeClass('move').addClass('active'); ul.css('--x', li.position().left + li.outerWidth() / 2 + 'px'); }, 1200); } }); </script> |
Осталось лишь залить CSS файл из прикреплённого архива в папку css
