Как сделать анимированную иконку меню на CSS3 + 3 строки jQuery

Один из трендов 2-ого века это отзывчивость веб страниц. Обую популярность набрала идея транформации иконки меню при клике.

Чуть раньше я уже писал статью о том как сделать меню адаптивным за 2 шага. В это статье я буду использовать почти все тоже самое но добавлю симпатичную анимацию при клике. Эта статья продолжение той статьи. И если вы понятия не имеете, что такое код меню и прочее то с начала прочитайте первую часть

 

Шаг 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 обрабатывает событие клика и показывает меню. + при клике добавляется класс которому присвоена эта самая анимация.

Удачи:)

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$