7 не-растровых подходов для создания значка меню "гамбургер"

() translation by (you can also view the original English article)

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

As seen on TC — Гамбургер на сайте TechCrunch

В этом уроке мы рассмотрим ряд подходов к созданию и оформлению такого значка без использования растровых изображений. У меня есть для вас семь вариантов, так что нам лучше поскорее перейти к делу...

Почему не растровые?

Использование изображений - это быстро и просто, так зачем искать альтернативные подходы? Вот несколько особенностей, по которым мы будем оценивать успешность каждого из возможных решений:

Загрузка меньшего количества ресурсов уменьшает количество HTTP запросов
Нерастровые значки для дисплеев высокой плотности можно масштабировать без ограничений как в большую, так и в меньшую сторону
Мы можем добавить дополнительные стили и интерактивность с помощью CSS
Да и просто интересно попробовать в этом свои силы!

#1. Использование SVG

Мы скоро рассмотрим некоторые примеры создания значка меню с помощью CSS, но мой список будет неполным без упоминания изображений SVG как жизнеспособного варианта.

Если вы не сильны в написании кода, но вы все еще хотите добиться масштабируемости изображений для дисплеев высокой плотности, векторная графика в формате SVG является отличным выбором.

SVG может использоваться несколькими способами:

SVG `<img>`

SVG может быть указан в аттрибуте src тега img так же, как вы бы указывали любой другой формат изображения.

1	<img src="path/to/menu-icon.svg" alt="menu icon" width="70" height="50">

SVG в качестве `background-image`

То же изображение SVG также может использоваться в качестве фонового изображения в CSS

.menu-icon {
    width:70px;
    height:50px;
    background-image:url('path/to/menu-icon.svg');
}

SVG в виде кода

SVG также могут быть написаны в виде кода, с помощью XML. Если вы экспортируете SVG из приложения, такого как Adobe Illustrator и откроете его в редакторе кода, вы увидите, как выглядит исходный код.

Подсказка: если вы скопируете объект из Illustrator, затем вставите непосредственно в текстовый редактор, то вы также получите код SVG.

Хотя копирование и вставка XML кода в ваш шаблон страницы может показаться странным, на самом деле он позволяет изменять стиль отдельных элементов SVG с помощью CSS.

1	svg line {
2	stroke: white;
3	}

Вполне недурственно, да?

Еще более впечатляющий подход состоит в применении анимации к SVG. Отличный пример анимации значка меню можно увидеть в фантастическом учебнике Кайла Хэнвуда "Создание бургер-меню кнопки на SVG и HTML".

Использование SVG в виде кода позволяет уменьшить количество запросов и производить манипуляции с помощью CSS, как показано выше. При использовании SVG в теге img или CSS свойстве background-image, единственным плюсом из моего списка является то, что такое изображение можно масштабировать.

Мы можем сделать лучше.

#2. Использование шрифта пиктограмм

Второй подход заключается в том, чтобы использовать шрифт пиктограмм.

Шрифт пиктограмм так же, как любые другие пользовательские шрифты, добавляется через @font-face, но вместо букв алфавита, он содержит последовательность символов. Часто они добавляются на страницу через псевдо элемент :before или :after свойства content для сохранения чистоты и аккуратности разметки, не захламляя ее дополнительными элементами.

Одним из моих любимых сервисов по созданию шрифтов пиктограмм является Icomoon, который имеет библиотеку свободных шрифтов иконок, которые вы можете выбрать для создания ваших собственных.

Для создания собственного полностью пользовательского шрифта пиктограмм есть возможность загрузить свой собственный файл SVG изображения через кнопку «Импорт значков». Приложение создает шрифт и весь код, необходимый для использования вашего шрифта, либо путем загрузки файлов шрифтов и CSS, либо с использованием тега link в секции head вашей страницы для подключения версии, хранящейся на сервере. Я использовал этот сервис множество раз для проектов своих клиентов, и был всегда очень доволен!

Шрифты пиктограмм поддерживают масштабирование (хотя это все же шрифты и подвержены сглаживанию), их можно изменять с помощью CSS, но их загрузка на страницу требует дополнительных запросов для файлов шрифтов и стилей. Для более сложных иконок, как некоторые из показанных выше - это правильный подход, но когда значок меню достаточно простой, мы могли бы, вероятно, сделать это с помощью функционала CSS.

#3. Метод Bootstrap

CSS фреймворки такие как ZURB Foundation или Twitter Bootstrap очень популярны, так что возможно мы могли поучиться у этих ребят красивому и лаконичному подходу к созданию нашего значка?

JavaScript фреймворка Bootstrap автоматически сворачивает выпадающее меню для браузеров, которые меньше 768px по ширине, и заменяет его на кнопку вызова навигационной панели.

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

Элемент button с четырьмя элементами span внутри; три из них используются для создания горизонтальных линий значка меню, а первый - только для скрин ридеров, так как текст «Меню» позиционируется за пределами экрана.

CSS для каждого элемента icon-bar устанавливает цвет фона, а также размеры и слегка округленные углы.

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

Если слегка закругленные углы для каждой горизонтальной линии имеют для вас важное значение, то такой подход является одним из немногих вариантов CSS, который позволит достичь этого эффекта.

Еще одним преимуществом для разбиения каждой строки на свой собственный элемент является возможность анимировать каждый из них по отдельности во время перехода между открытым и закрытым состоянием. Хорошим примером такой анимации является недавний редизайн сайта Звездных войн.

Я был немного удивлен, что такой популярный фреймворк использует пять отдельных элементов для создания такого относительно простого элемента пользовательского интерфейса, но я уверен, что у них были веские основания для этого. Я видел аналогичный подход в других проектах (без Bootstrap), так что это определенно более распространено, чем я ожидал. Взгляните на исходный код сайта Media Temple, и вы увидите, что они понимают название "гамбургер" очень буквально!

<a href="#siteNav" class="hamburger js-menuLink" id="LuckyAnchor_518835807_2">
    <span class="hamburger-bun hamburger-bun--top"></span>
    <span class="hamburger-patty"></span>
    <span class="hamburger-bun hamburger-bun--btm"></span>
</a>

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

#4. CSS границы

Типичный значок меню очень прост в конструкции; всего три горизонтальные линии.

Первая и последняя линии могут быть созданы с помощью свойств border-top и border-bottom для тега ссылки, также имеющего display:inline-block. Средняя линия может быть добавлена как граница псевдо элемента :after.

Следующий код HTML позволит нам указать основные стили оформления для каждого из подходов путем добавления класса menu-icon и затем добавления отдельных стилей для него, используя границы и класс border-icon.

1	<a href="#" class="menu-icon border-icon">menu icon</a>

body {
    background:#196e76; /* Tuts+ Green */
}
.menu-icon {
    position:relative;
    display:inline-block;
    width:70px;
    text-indent:-999px;
}

.border-icon {
    height:30px;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
}

.border-icon:before {
    content:"";
    position:absolute; 
    top:10px;
    left:0;
    width:100%;
    border-top:10px solid #fff;
}

Этот подход имеет наибольшую поддержку браузерами; границы и позиционирование поддерживаются везде, а псевдо элементы поддерживаются в IE8 и выше!

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

#5. CSS box shadow

Если вам повезло не иметь нужды в поддержке IE8, есть несколько альтернатив, которые используют некоторые чуть более свежие свойства CSS. Я полагаю, если вам нужно показать значок меню только на мобильных устройствах, вы сможете использовать любой из этих подходов, не беспокоясь о поддержке устаревших браузеров...

Один подход заключается в использовании нескольких объявлений box-shadow без размытия для создания серии сплошных линий.

Чтобы гарантировать, что значек будет иметь правильную активную область, серии теней должны быть добавлены через псевдо элемент и затем расположены так, чтобы они отображались как слой под элементом a.

.shadow-icon {
    height:40px;
}

.shadow-icon:after {
    content:"";
    position:absolute;
    top:-50px;
    left:0;
    width:100%;
    height:100%;
    box-shadow: 0 10px 0 #fff,
                0 20px 0 #196e76,
                0 30px 0 #fff,
                0 40px 0 #196e76,
                0 50px 0 #fff;
}

Единственным недостатком такого подхода является то, что иконка должна быть размещена на чем-то со сплошным фоном (т.е. #196e76 для Tuts+ зеленый), чтобы эффект полосатых теней сработал. Я использовал #196e76 для зеленого цвета Tuts+ в этом примере, но вам нужно будет поменять цвет, чтобы он соответствовал цвету вашего фона.

Опять же, этот подход удовлетворяет нашим требованиям, но дополнительный шаг позиционирования псевдо элемента в качестве слоя под основным элементов мне кажется немного несистемным. Выглядит здорово, но это не самое изящное решение.

#6. CSS градиенты

Последний подход с использованием CSS является наиболее простым. С помощью одного элемента, без псевдо элементов, мы можем создать ряд горизонтальных линий для иконки, используя один линейный градиент с несколькими точками остановки цвета.

В своем примере я использую свойства без префиксов, чтобы код выглядел чище. Чтобы создать градиент и подставить префиксы различных браузеров, посмотрите генератор CSS градиентов Colorzilla.

1	.gradient-icon {
2	height:50px;
3	background:linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
4	}

Это простой и самый гибкий подход из всех, что мы рассмотрели до этого. Остальные немного ненадежные, потому что если вы хотите изменить размер или расположение значка, в конечном итоге нужно настроить несколько значений.

Вопрос о необходимости наличия сплошного цвета фона для значка в этом случает также снимается, поскольку можно использовать прозрачные (transparent) точки остановки цвета между белыми линиями.

Поскольку подход с использованием градиента предполагает установку значений точек остановки цвета в процентах, изменение ширины или высоты иконки сводится всего лишь к изменения атрибутов width и height элемента.

Из трех CSS подходов этот является моим любимым. Если бы я использовал CSS для создания иконки, то выбрал бы этот подход - и на самом деле я его и использовал для своего личного сайта. Но прежде чем мы закончим, есть еще кое-что, что я хочу показать вам...

#7. С использованием клавиатуры?

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

Однако недавно во время того, как я преподавал урок по гибкой веб-разработке, я наткнулся на гораздо более простой подход.

Существует знак в кодировке UTF-8, который почти идентичен значку классического «гамбургера». Я нашел его, когда искал нечто совершенно другое на сайте Copy Paste Character в разделе графических форм.

Этот специальный символ: ☰ называется Trigram for Heaven. Это символ U+2630 в юникоде и он очень похож на вездесущий значок меню. Это один из восьми триграммов, которые представляют собой группу символов, которые имеют глубокий смысл в китайской философии. Для получения дополнительной информации, вы можете прочитать больше о восьми триграммах здесь.

Чтобы его использовать в вашем проекте, перейдите на сайт Copy Paste Character и кликните на символе, таким образом он будет скопирован в буфер обмена. Теперь просто вставьте его в ваш текстовый редактор в том месте, где должен находиться «значок». Можно также скопировать его непосредственно из текста этой статьи, если вам так удобнее.

Важно убедиться, что ваш документ использует UTF-8 кодировку, как указано в теге meta в разделе head вашей страницы:

1	<meta charset="utf-8">

Так как это просто текстовое содержимое, его можно стилизовать в CSS, чтобы сделать его больше, сделать шире, изменить его цвет и многое другое!

Резюме

Итак, мы рассмотрели целый ряд способов для создания и добавления значка меню гамбургер в проект. Мы рассмотрели SVG и шрифты пиктограмм, затронули три CSS подхода, но в конце концов нашли простейшее решение из всех - использование юникод символа.

С помощью «триграмма неба» можно удовлетворить все требования, не используя растровые изображения: он не нуждается в HTTP запросах, его можно бесконечно масштабировать для экранов высокой плотности, можно запросто изменять его с помощью CSS, так что теперь можно сосредоточиться на решении других интересных задач! Я думаю, что всегда стоит поискать простое решение, прежде чем углубляться в создание сложных конструкций на CSS...

Если вам знакомы другие подходы для создания значка «гамбургер», я хотел бы услышать о них в комментариях!