Как сделать анимированную иконку меню на CSS3 + 3 строки jQuery
Опубликовано: 01.09.2018
Один из трендов 2-ого века это отзывчивость веб страниц. Обую популярность набрала идея транформации иконки меню при клике.
Выпадающее меню на css
Чуть раньше я уже писал статью о том как сделать меню адаптивным за 2 шага . В это статье я буду использовать почти все тоже самое но добавлю симпатичную анимацию при клике. Эта статья продолжение той статьи. И если вы понятия не имеете, что такое код меню и прочее то с начала прочитайте первую часть
jQuery #7: Скользящая линия
Шаг 1 Добавляем саму иконку на сайт
Открываем код главной страницы и после <body> вставляем
<div class="nav-icon"> <div></div> </div>
Шаг 2 Обвернем меню в блок
Найдите
<ul class="some_class"> <li><a href="#">Курсы</a></li> <li><a href="#">Блог</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Портфолио</a></li> </ul>замените на
<div class="menu_resp_box"> <ul class="some_class"> <li><a href="#">Курсы</a></li> <li><a href="#">Блог</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Портфолио</a></li> </ul> </div>К слову если есть желание разобраться в основах HTML то вот небольшой интерактивный курс моего производства =)
Шаг 3 Прокачиваем стили
Если вы используете стили из меню с первой части то найдите
/*Начало магии. Если ширина видимой области меньше 600px то применить эти стили*/ @media screen and (max-width: 600px) { ul.some_class { position: fixed; min-height: 35px; display:block !important; background: url(../images/menu_ad.png) no-repeat center center; height:35px; margin:0; padding-right:0; cursor:pointer; width:35px; top: 10px; left: 20px; box-shadow: 0 0px 2px rgba(0,0,0,.3); } ul.some_class:hover { width:180px; height:auto; background: #fff; border: solid 1px #949494; } ul.some_class li { display: none; margin: 0; float:none; height:auto; } ul.some_class li a { display: block; padding: 9px; text-decoration: none; text-align: left; color:#6d6d6d; float:none; height:auto; line-height:normal; text-decorection: } ul.some_class:hover li { display: block; } ul.some_class li a:hover { display: block; background:#cecece; } }И замените на
/*Начало магии. Если ширина видимой области меньше 600px то применить эти стили*/ @media screen and (max-width: 600px) { div.menu_resp_box { width:60%; height:100%; position:fixed; top:0px; left:-60%; overflow-y:auto; } ul.some_class { padding-top:55px; } ul.some_class { margin: 0; padding: 0; background:#e67e22; } ul.some_class li a { display:block; padding:12px; color:#fff; text-decorection:none; } .some_class{ position:absolute; top:55px; left:0; height:100%; } .nav-icon { padding: 5px; width: 43px; height: 43px; position:absolute; cursor: pointer; display: block; z-index: 3; top: 0px; left: 0; background: #e67e22; } .nav-icon:after, .nav-icon:before, .nav-icon div { background-color: #fff; -o-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; content: ''; display: block; height: 5px; margin: 7px 0; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .nav-icon.active:before { transform: translateY(12px) rotate(135deg); -moz-transform: translateY(12px) rotate(135deg); -webkit-transform: translateY(12px) rotate(135deg); } .nav-icon.active:after { transform: translateY(-12px) rotate(-135deg); -moz-transform: translateY(-12px) rotate(-135deg); -webkit-transform: translateY(-12px) rotate(-135deg); } .nav-icon.active div { -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } }
Шаг 4 Магия на jQuery
Найдите в коде вашей страницы </head> и перед ним вставьте:
<script> (function($) { $(function() { var TriggerClick = 0; $(".nav-icon").click(function () { if(TriggerClick==0){ TriggerClick=1; $(this).addClass("active"); $(".some_class").animate({'left':'0'}); }else{ TriggerClick=0; $(this).removeClass("active"); $(".some_class").animate({'left':'-60%'}); } }); }) })(jQuery) </script>Собственно все, должно работать ???? Если не работает то пишите в комметариях.
Теперь чуть теории и небольшие пояснения по работе плюшки.
Сама трансформация реализована по средствам CSS3. Подробнее как работать с анимацией CSS3 можно узнать в интерактивном курсе по CSS3
jQuery обрабатывает событие клика и показывает меню. + при клике добавляется класс которому присвоена эта самая анимация.
Удачи:)