Гамбургер-меню, состоящее всего из трех полос, легко создать с помощью HTML и CSS. Однако, рисование такой иконки с использованием SVG — один из самых простых и удобных способов. Этот метод обеспечивает гибкость и простоту в настройке.
Создание базового гамбургер-меню
Для начала нам понадобятся три одинаковых прямоугольника, расположенные друг под другом. Вот пример кода для создания такой иконки:
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>Результат на CodePen
Вы можете увидеть результат на CodePen.
Настройка иконки
Изменяя значения атрибутов, можно легко настроить внешний вид иконки в соответствии с требованиями вашего проекта. Например, можно изменить ширину, высоту или положение прямоугольников.
Закругленные углы
Если вам необходимо сделать углы прямоугольников закругленными, обычно в CSS используется свойство border-radius. В SVG для этой цели служит атрибут rx. Вот как это можно сделать:
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20" rx="10"></rect>
<rect y="30" width="100" height="20" rx="10"></rect>
<rect y="60" width="100" height="20" rx="10"></rect>
</svg>Заключение
Использование SVG для создания иконки гамбургер-меню предоставляет гибкость и возможность точной настройки. Этот метод позволяет легко изменять размеры, пропорции и другие визуальные параметры, обеспечивая высокую адаптивность к различным требованиям дизайна.
