CSS3 Иконка меню с анимацией

Сегодня мы разберем, как создать иконки на чистом HTML и CSS3. Добавим к ним, с помощью jQuery, красивую анимацию при смене класса.

Создание иконки меню на чистом HTML и CSS

Для начала создадим иконку меню, она из себя представляет три коротких горизонтальных блока с равным расстоянием между ними.
icon-sizes

В HTML верстке мы создадим контейнер для иконки в виде ссылки, а в ней создадим блок span, который будет отвечать за вывод самой иконки.

<a id="nav-toggle" href="#"><span></span></a>

Теперь напишем стили для иконки меню, т.к. блок span отвечает за вывод иконки, а она состоит из трех блоков, нам на помощь придут псевдо-элементы :before и :after.

body { background-color: black;}

#nav-toggle {position: relative; display: inline-block;}
#nav-toggle span { position: absolute; left: 0; top: 10px; }

#nav-toggle span, 
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px; 
}

 

Добавление анимации в CSS3 иконку

Теперь нам нужно сделать перевоплощение CSS3 иконки, чтобы при нажатии на нее блоки складывались в крестик.

css3-icons

Событие нажатия на иконку мы обработаем скриптом и после нажатия будем добавлять добавлять/удалять класс active к блоку #nav-toggle. Поможет нам в этом jQuery:

$(document).ready(function(){
    $('#nav-toggle').click(function(){
        $(this).toggleClass('active');
    });
});

Учитывая, что иконка меню состоит из трех блоков, то центральный блок мы сделаем прозрачным сразу после нажатия на иконку, а остальные развернем под углом в 45 градусов, чтобы они собой образовали иконку в виде крестика. Для того чтобы реализовать все задуманное, нам понадобится код CSS3:

/* Добавим анимацию всех свойств для блоков нашей иконки */
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}

/* Центральный блок делаем прозрачным */
#nav-toggle.active span {
  background-color: transparent;
}

/* Смещаем псевдо-элементы в центр иконки (на место основного блока) */
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

/* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

В результате у нас получается весьма забавное перевоплощение и красивые иконки с анимацией:

 

Просмотреть демо пример и скачать архив с исходниками вы можете по ссылкам ниже:

 

 

Если у вас остались вопросы, пишите их в комментариях к посту, буду рад ответить 😉

(2 голосов. Рейтинг: 5,00 из 5)
Загрузка...

Рубрика: CSS, jQuery

Комментарии (5)

| RSS комментария

  1. Марина:

    Спасибо.
    А не подскажете, как привязать выпадающее меню к событию нажатия иконки?

  2. Богдан:

    Давно видел такую фишку на другом сайте, а тут реализация!
    Большое спасибо!!!

  3. Good! Я правда заигрался с красной кнопкой 😀

Оставьте свой комментарий