Значок гамбургер

Значок — гамбургер уже давно стал стандартом для открытия списка меню в браузерах и приложениях. С начала 2016 года иконка — гамбургер становится стандартным значком и для веб-сайтов. Цель этой статьи привести примеры создания иконки гамбургер для сайта.

Оглавление:
  1. Создать иконку — гамбургер
  2. Иконка гамбургер изображение
  3. Иконка гамбургер символ
  4. Иконка гамбургер веб-фонт
  5. Иконка гамбургер SVG
  6. Иконка гамбургер Bootstrap
  7. Иконка гамбургер Анимации
  8. Заключение

Почему иконку в виде трех полосок называют гамбургер, рассказывается на странице Почему все используют иконку «гамбургер» и откуда она появилась (а может он просто кушать хотел) :).

Иконка гамбургер в виде трех полосок
Иконку в виде трех полосок называют гамбургер

Создать иконку — гамбургер

Многие уже используют на сайтах иконку — гамбургер не только для мобильной версии сайта. Еще иконку применяют для открытия боковой панели со списком меню.

к меню ↑

Иконка гамбургер изображение

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

<input class="menu">
input { 
  border: none; 
  line-height: 1.7em;
}
.menu { 
  background: transparent url(hamburger.png) 0 0 no-repeat;
}

или HTML

<input type="image" name="image" src="hamburger.png" width="24">

В примере для тега input с классом menu фон изображение иконка — гамбургер. Такой способ для всех браузеров.

В следующем примере изображение иконки — гамбургер добавляется псевдоэлементом :before, который поддерживается новыми версиями браузеров.

<a class="menu" role="button" href="#list"><span class="name">Меню</span></a>
span.name { /* если надо прячем текст */
   overflow:hidden;
   text-indent:-99999px; 
   display:block;
}
a.menu::before {
   content: url(hamburger.png);
}
к меню ↑

Иконка гамбургер символ

Для новых браузеров существует еще проще способ вывести значок — гамбургер.

В CSS для кнопки button применяется псевдоэлемент :before содержащий символ гамбургер.

<button class="menu-toggle"></button>
.menu-toggle:before { 
  content: "≡"; /* символ */
  // или
  content: "\2261"; /* юникод */
  font: 2em "arial";
}
к меню ↑

Иконка гамбургер веб-фонт

Свойство CSS @font-face позволяет добавить шрифт и иконки. В интернете много бесплатных сервисов, которые генерируют иконки. Основные применения веб-иконок смотрите на странице Селекторы CSS для ссылок

<button class="menu-toggle"></button>
.menu-toggle:before { 
  content: '\f800'; /* иконка */
}
к меню ↑

Иконка гамбургер SVG

SVG давно применяется для рисования векторной графики. В нашем случае свойство CSS background-image содержит код SVG гамбургер.

<input class="menu-toggle" />
<label for="menu-toggle"></label>
label[for="menu-toggle"] {
  position: absolute;
  height: 24px;
  width: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'><rect width='24' height='4'/><rect width='24' height='4' y='14'/><rect width='24' height='4' y='7'/></svg>");
  background-size: contain;
}

Пример применения иконки гамбургер SVG с пунктами меню смотрите на странице «Меню как на портале Президента России»

к меню ↑

Иконка гамбургер Bootstrap

Что такое Bootstrap:

Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса …

Фреймворк Bootstrap набрал большую популярность среди разработчиков веб-сайтов. Фреймворк Bootstrap избавит Вас от написания собственного кода CSS.

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

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<nav class="navbar navbar-inverse">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
</nav>
к меню ↑

Иконка гамбургер Анимации

Как создать иконку — гамбургер с анимацией для меню используя только CSS или jQuery, подробно с иллюстрациями конечного результата описано на странице блога http://hi-blog.ru

к меню ↑

Заключение

На этой странице Вы узнали все простые способы создать иконку гамбургер. Используйте значок — гамбургер для своих проектов не откладывая на потом, с 2016 года стандартный значок для открытия пунктов меню на маленьких экранах стал (гамбургер).