Анімуємо «іконки-гамбургери» для меню на чистому CSS

Вступ

«Іконка-гамбургер» для меню стала одним з ключових елементів на багатьох веб-сайтах і додатках, і, подобається вона вам чи ні, але така іконка стала кнопкою користувальницького інтерфейсу. Користувачі асоціюють цю іконку з показом/прихованням меню. Вона є компактною і практичною, т.к. заощаджує місце, особливо на невеликих екранах. Раніше ви могли створити або завантажити подібну іконку і вставити її у ваш документ. Це все добре і здорово, і якщо ви використовуєте спрайти зображень, то ви прагнете легкої реалізації.

Загальна розмітка

Я створюватиму 4 різні демо-приклади. Розмітка для кожної кнопки буде майже однаковою. Для кожної кнопки буде задано один загальний та один унікальний клас. Кожна кнопка складається з батьківського тега button та span тега всередині. Батьківський тег виконуватиме роль контейнера для іконки. Це дозволить нам додавати внутрішні відступи та фонові кольори для ікон. Тег span буде місцем для розміщення смужок гамбургера. Ось розмітка:

іконки-гамбургери

Практичний курс з верстки адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3