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

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

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

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

В 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; 
}

[button-blue url="//jsfiddle.net/webcomplex/4yjo10r7/" target="_blank" position="center"]Пример кода CSS иконки меню на jsfiddle[/button-blue]

 

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

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

Событие нажатия на иконку мы обработаем скриптом и после нажатия будем добавлять добавлять/удалять класс 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);
}

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

[button-blue url="//jsfiddle.net/webcomplex/4yjo10r7/1/" target="_blank" position="center"]Пример CSS3 Иконки меню с анимацией[/button-blue]

 

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

[button-green url="//demo.webcomplex.com.ua/15-11-2014/01/" target="_blank" position="center"]Демо-пример CSS3 иконки меню с анимацией[/button-green]

 

[button-brown url="//demo.webcomplex.com.ua/15-11-2014/01/demo.zip" target="_self" position="center"]Скачать исходники[/button-brown]

 

[alert-announce]Если у вас остались вопросы, пишите их в комментариях к посту, буду рад ответить ;)[/alert-announce]

Рубрика: CSS, jQuery