Иконка css гамбургер: Иконка гамбургер-меню на CSS+JS

Загадочное многоточие – и почему мы видим его в каждом интерфейсе

Этот маленький символ стал популярным, но помним ли мы, откуда он взялся?

Что это за символ? Он означает «больше»? Это «индикатор переполнения»? Может быть, это восхитительный аналог иконки гамбургер-меню, поэтому его называют «кебаб». В любом случае, если вы читаете эту статью и проектируете программное обеспечение, велика вероятность, что где-то, в одном из ваших творений, есть многоточие. Давайте посмотрим на этот символ, откуда он взялся и как он стал использоваться в графическом интерфейсе пользователя.

На письме

Три горизонтальные точки известны как многоточие и в основном используются для обозначения «в устной или письменной речи пропуска слова или слов, которые являются излишними или могут быть поняты из контекстных подсказок» (dictionary.com). Многоточие является настолько важным знаком препинания, что в спецификацию Unicode включено не менее восьми вариантов.

Unicode включает 8 вариантов символа многоточия (источник: раздел)

Его можно аналогично использовать при проектировании программного обеспечения, указывая, что имя файла или текст были усечены. Вы можете встретить его повсюду, от ОС вашего компьютера до фрагментов текста, за которыми следует аффорданс «читать дальше». В CSS есть свойство , которое автоматически отображает многоточие (UnicodeU+2026), когда текст выходит за пределы выделенной области.

.truncate {

width: 320px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

Но оно используется не только для усечения текста. Википедия разъясняет литературное использование многоточия:

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

— Wikipedia

Одно из первых заметных применений многоточия в письменной форме встречается в романе Джейн Остин 1811 года «Чувство и чувствительность». В нем многоточие представляет прерывание речи:

Мы так и не кончили «Гамлета», Марианна! Наш милый Уиллоби уехал прежде, чем мы дошли до последнего акта. Но отложим книгу до его возвращения… Хотя ждать, возможно, придется многие месяцы…

— Джейн Остин «Чувство и чувствительность» (источник)

Ребрендинг Medium в 2020 году

Недавний ребрендинг Medium коснулся и логотипа, который представляет собой стилизованное многоточие, явно отсылающее к призыву в режиме написания статей, который гласит: «Расскажите свою историю…».

Medium начинает каждую историю с многоточия

Такое использование прекрасно устраняет разрыв между традиционным использованием многоточия в письменной форме и его адаптацией к иконке в дизайне интерфейса. Кроме того, Medium использует три точки в качестве элемента-разделителя по умолчанию между частями текста.

Первое появление в интерфейсе

От пользователя требуются дополнительные действия или ​​информация

Насколько мне известно, самое первое использование многоточия в графическом интерфейсе пользователя восходит к первым операционным системам Apple и Windows, выпущенным в 1984 и 1985 годах соответственно (поправьте меня, если я ошибаюсь). В обоих случаях оно использовалось, чтобы указать, что клик по пункту меню приведет к появлению дополнительной информации или необходимых действий.

Точки в интерфейсе Macintosh System 1 в 1984 (источник: winworldpc.com)

Точки в Windows 1.0 в 1985 (кстати, с иконкой гамбургер-меню) (источник: PCMag, Diancheng Hu)

Эта закономерность сохраняется и в нынешней ОС Apple. В этом примере при выборе пунктов «Системные настройки…», «App Store…» или «Перезагрузить…» будет показано дополнительное окно, в котором пользователю необходимо выполнить действие. Напротив, выбор пунктов «Режим сна» или «Об этом Mac» просто немедленно выполнит действие.

Многоточие в операционной системе MacOS Big Sur

Согласно Apple,

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

Microsoft также рассмотрел варианты использования многоточия. (см. здесь, здесь и здесь):

«Хотя командные кнопки используются для немедленных действий, для выполнения действия может потребоваться дополнительная информация. Укажите команду, для которой требуется дополнительная информация (включая подтверждение), добавив многоточие в конец метки кнопки.

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

Microsoft также предупреждает:

«Это не означает, что вы должны использовать многоточие, когда действие отображает другое окно – только, когда для выполнения действия требуется дополнительная информация. Следовательно, любая командная кнопка, неявная команда которой – «показать другое окно», не имеет многоточия. Например, команды «О программе», «Дополнительно», «Справка» (или любой другой командой, связанной с разделом справки), «Параметры», «Свойства» или «Настройки».

Подсказки для ввода текста

Как и Medium, многие сайты и приложения используют многоточия в местах, где пользователя просят ввести текст, например, в комментариях, обновлении статуса или поисковом запросе. Фактически, Salesforce рекомендует использовать точки для всех запросов, в которых пользователь может ввести текст:

Используйте многоточие в призрачном тексте, чтобы указать, что пользователи могут вводить текст. Если призрачный текст не заканчивается вопросительным знаком, его следует заканчивать многоточием

— Руководство по стилю Salesforce

Точки в комментариях на Facebook и LinkedIn

Точки в запросах поиска на CNN и Wayfair (John Saito)

Анимированные точки появляются, когда кто-то набирает сообщение в мессенджере

Раскрытие меню

SDK для iOS автоматически создает кнопку «More» при необходимости

Точки также можно найти в автономном контексте, где при взаимодействии с ними отображается все меню. Помню, что впервые увидел подобное использование в iOS 1 для iPhone, в частности, как часть элемента «UITabBar» (эта большая полоса иконок в нижней части экрана). Причина, по которой этот паттерн был обнаружен во многих ранних приложениях для iPhone: при создании приложения с использованием Apple SKD многоточие автоматически появлялось каждый раз, когда на панели вкладок было больше пяти элементов. Если бы элементов было шесть, пятый и шестой были бы сгруппированы под кнопкой «More». Это поведение по умолчанию все еще присутствует в SDK, и результаты по-прежнему можно увидеть во многих приложениях, использующих нативный UITabBar, включая приложение iTunes Store. (источник: Apple HIG)

Фактически, помимо того, что точки появляются в меню, их использование для запуска меню стало настолько распространенным как в приложениях, так и в Интернете, что Google и Microsoft включили его в качестве основного паттерна пользовательского интерфейса в свою документацию.

Вольности в использовании

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

LinkedIn не стесняется использовать многоточие

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

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

Не могу сказать, что я большой поклонник вертикального многоточия, но, похоже, этот паттерн будет с нами еще долго, отчасти благодаря распространенному использованию в приложениях Google, документации в их руководстве по стилю, и включении в набор Material Design.

Многоточия на «панели действий» Android и на «панели приложений» в Material Design

Юзабилити

Значок гамбургер-меню и его юзабилити уже много лет подвергаются критике.

На мой взгляд, он стал широко признанным символом и полезным сокращением. Но как насчет точек? Хотя они существуют столько же или даже дольше, чем гамбургер-меню, до недавнего времени они не использовались широко, а в последние пять или около того лет их можно встретить повсюду. Этот символ совершил переход от «костыля дизайнера» к «полезному сокращению». Я не буду полностью полагаться на него, но, проведя большую часть десятилетия в Google, я доверяю им. Поэтому, если они считают, что многоточия эффективны, так и есть.

Точки никуда не исчезнут

Думаю, что они достаточно понятны, чтобы быть эффективными, хотя так было не всегда. Я также считаю, что они достаточно гибкие, чтобы их можно было понять во многих контекстах. Можно ли с ними переборщить? Возможно (я имею ввиду LinkedIn), но я буду использовать их в своей работе. Поэтому в следующий раз, когда вы столкнетесь с точками или добавите их в один из своих дизайнов, просто вспомните, откуда они взялись.

Ссылки

• Tab Bars — Bars — iOS — Apple Human Interface Guidelines
• Menu Anatomy — Menus — macOS — Apple Human Interface Guidelines
• App bars: top — Material Design
• Command Buttons — Win32 apps | Microsoft Docs
• Menus (Design basics) — Win32 apps | Microsoft Docs
• Toolbars — Win32 apps | Microsoft Docs
• Ellipses (…) | Salesforce Style Guide for Documentation and User Interface Text | Salesforce Developers
• WinWorld: System Software (0–6) System 1. x
• Keyboard shortcuts and the ellipsis character — Mac OS X Hints
• Less… Is More? Apple’s Inconsistent Ellipsis Icons Inspire User Confusion — TidBITS
• Historical Operating Systems — Apple’s System 6 | A Technophile’s Indulgence
• Ellipsis Examples in Literature
• gui design — What is the significance of the three dots “…” on menus and buttons and how to use them right? — User Experience Stack Exchange
• The Mighty Ellipsis. How 3 little dots can say so much | by John Saito | Medium
• Do you REALLY know how to use the ellipsis? | by Diancheng Hu | NYC Design | Medium
• Definition of Windows 1.0 | PCMag
• Unicode ellipsis characters — Compart
• Truncate String with Ellipsis | CSS-Tricks
• Ellipsis | Definition of Ellipsis at Dictionary.com
• Ellipsis — Wikipedia

---

Перевод статьи uxdesign.cc

Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов

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

Данный элемент был разработан почти 30 лет назад Нормом Коксом. Он идеально подходит для мобильных версий сайтов и всех проектов, где навигация не должна отвлекать или закрывать визуальную составляющую страницы. Сейчас иконка гамбургер-меню является неотъемлемой фишкой адаптивной разработки и наверняка знакома большинству пользователей сети. Не смотря на разные альтернативы и противников, она реально стала узнаваемым и универсальным символом.

Примеры сайтов с гамбургер меню

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

Star Wars

Интересная модификация меню с тематикой фильма Звездных Воен.

The Deepend Design

Outdated Browser

NewtonRunning

Brianhoff Design

Brooklyn Bridge Park

Часто при клике на «иконку гамбургера» полоска или блок меню выезжает сбоку или сверху. Эффект простой, но смотрится неплохо.

The Design Museum

Illusion

Xander

DeModern

Hooch Creative

Появление навигации в данном примере выглядит немного странно. Пользователю нужно делать лишний клик чтобы увидеть несколько пунктов меню, которые, по сути, никак не мешают остальной графике. Зачем их скрывать? — не совсем понятно. Сайт ниже аналогично вызывает подобный вопрос.

Lalignerouge

Michaelvilleneuve

Chapoleone

Brand Junkie

Cofa Media

eWebDesign

Lequipe

Digital Deadly Sins

Buildin Amsterdam

Анимация и иконки гамбургер-меню

Также в сети можно найти примеры иконок гамбургер-меню для вдохновения. Иногда их совмещают с анимационными эффектами для наглядной демонстрации работы. Сама по себе кнопка выглядит слегка скучно, но вместе с разными «преобразованиями» она добавляет на сайт больше интерактива. Практически все материалы ниже были найдены в социальной сети дизайнеров Dribbble (кликайте по картинкам дабы перейти на исходники).

Hamburger Button

Burger Menu2

MOARRRR

The Real Hamburger MenuIcon

Hamburger Icon

Wave

Menu Icon by Dave Gamez

BurgerIcon

Hi I’m Hamburger

Buttons by Nick Meloy

Hamburger Transformation

Open Close

HamburgerMenu by Tamas Kojo

Interactive Hamburger

Close Icon Animation

Dribbble Menu

Simple HamburgerMenu Animation

IconinFramer

Hamburger Icon Music

Menu Thing

Hamburger by Christian

OpenDADA

Это лишь часть материалов, на Dribbble их гораздо больше — заходите на сайт и ищите по ключу «hamburger«, можно даже без приставки «menu«. Напоследок парочка дополнительных сайтов.

TheNounProject

Про Noun Project мы когда-то уже писали в посте с необычными наборами иконок. Там содержится достаточно много монохромных объектов из любых сфер жизни.

Iconfinder

Когда будете использовать поиск иконок Iconfinder обязательно выбирайте в левом меню «Free» в графе Price, то есть бесплатную стоимость изображений.

Stickpng

Еще один интересный сервис — Stickpng, где публикуются PNG клипарты на прозрачном фоне. Не смотря на то, что картинок здесь мало, возможно, кому-то нужен именно PNG формат.

Скрипты гамбургер меню CSS / javascript

В интернете имеется несколько подборок вариантов реализации иконки гамбургер-меню. Не будем перепечатывать все ссылки оттуда, а лишь укажем источники и наиболее интересные примеры. Заметки, нужно сказать, достаточно актуальные по времени публикации. Кликайте по скриншотам.

21 Hamburger Animations Menu

15 Hamburger Icons in CSS 

Code My UI

CSS Animated Hamburgers

Font Awesome

Кстати, подходящая иконка есть и в популярном наборе Font Awesome.

Можете почитать заметку про использование шрифта Font Awesome в WordPress, если ваш проект реализован на этой CMS. Практически во всех остальных случаях из подборок вы найдете код и описание как сделать гамбургер меню в CSS и JS (в частности jQuery).

Вот парочка наиболее интересных решений:

Gooey Menu

Menu Toggle SVG Animation

Hamburger Icon + Morphing Menu

Pure CSS off-canvas Menu + flexbox

UI/UX Improvements with CSS

Toggle Menu by Vladislav

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

---

Перейти обратно к новости

html — значок гамбургера не отображается

Я создаю веб-сайт и пытаюсь сделать адаптивный дизайн. Слежу за видео на ютубе и делаю все как в видео, но значка гамбургера не вижу. Знаете, может быть, почему? На видео работает отлично. Вот как выглядит мой код:

 

<голова>
    <мета-кодировка="UTF-8">
    
    
      
<тело>
    <навигация>
        <дел>
            
Николинискусство
            <ул>
                
Главная
                
О нас
                
Галерея
                
Контакты
            
            <дел>
                <я>