Анимированная иконка «Гамбургер» на CSS
Автор admin На чтение 3 мин. Просмотров 148 Опубликовано
Вы можете воспользоваться Font Awesome или взять изображение, чтобы создать данную иконку, но это не обязательно. Вместо этого вы можете создать «гамбургер» только с помощью CSS и следующей разметки.
<a id=“nav-toggle” href=“#”><span></span></a> |
В следующих CSS стилях с помощью span мы создадим серединку «гамбургера» и используем псевдо-элементы для создания булочек.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 19 | #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: white; position: absolute; display: block; content: ”; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } |
Разметка и стили представлены в CodePen.
Пока ничего особенного, просто значок «гамбургера». Перейдем в следующий раздел, посвященный анимации.
See the Pen YGLEjO by Ruslan (@rkaliev) on CodePen.0
Теперь трансформируем нашу иконку в форму X , таким образом пользователю будет ясно, что, щелкнув по ней еще раз, меню закроется. В CSS мы используем transition и transform, чтобы перевернуть псевдо-элементы и скрыть среднюю плитку для создания нашей формы X . Примечание: Я использую transition и transform, которые поддерживаются в IE10 + и других браузерах. Если вы хотите поддержку старых браузеров IE, то вы можете использовать запасной вариант JQuery или другие решения
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } #nav-toggle. background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } |
active span {
Примечание: CodePen использует -prefix-free, автоматически добавляя необходимые префиксы.
Для того чтобы анимировать иконку мы воспользуемся JavaScript чтобы переключать класс гамбургера когда пользователь на него нажимает.
Примечание: classList c ограниченной поддержкой ( IE10 + и другие браузеры ) . Вы можете использовать
See the Pen XjqzPg by Ruslan (@rkaliev) on CodePen.0
Надеюсь, вам понравился этот краткий обзор с псевдо-элементами и анимацией. Я не стал вдаваться в подробности, как именно все вместе организовано. Для того чтобы узнать глубже эти понятия вы можете посмотреть следующие ресурсы :
- CSS3 Transitions, Transforms, Animation, Filters and more! by Rich Bradshaw (@richbradshaw) (http://css3.bradshawenterprises.com/)
2. Video Screencasts — #94: Intro to Pseudo Elements by Chris Coyier (@chriscoyier) (https://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements/)
Источник: elijahmanor.com
Иконки гамбургер меню — примеры сайтов и анимации, скрипты
Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы.
Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится.
Данный элемент был разработан почти 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
Digital Deadly Sins
Buildin Amsterdam
Анимация и иконки гамбургер-меню
Также в сети можно найти примеры иконок гамбургер-меню для вдохновения.
Иногда их совмещают с анимационными эффектами для наглядной демонстрации работы. Сама по себе кнопка выглядит слегка скучно, но вместе с разными «преобразованиями» она добавляет на сайт больше интерактива. Практически все материалы ниже были найдены в социальной сети дизайнеров Dribbble (кликайте по картинкам дабы перейти на исходники).
Hamburger Button
Burger Menu2
MOARRRR
The Real Hamburger MenuIcon
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«, можно даже без приставки «
Напоследок парочка дополнительных сайтов.
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-ти полезных ссылок. Надеемся вам они пригодятся.
jquery | Грёбаный айтишник
В предыдущей статье про счетчик обратного отсчета для landing page все выглядело слегка туманно. Основной проблемой был сброс и отсчет заново при каждом обновлении страницы.
Некоторые даже ругались, что этот счетчик обманывает клиентов.
В данной статье предлагаю вам другой скрипт счетчика обратного отсчета для ваших лендингов и не только ))
Читать далее →
Запись опубликована автором Артем в рубрике HMTL & CSS с метками countdown, JavaScript, jquery, js, time to, счетчик обратного отсчета.Частенько необходимо запускать некоторый функционал при ресайзе окна. Но, пока пользователь изменяет размер окна, мы браузер посылает десятки событий ресайза. Так что, надо каждый раз запускать один и тот же функционал? Это не правильно. Читать далее →
Запись опубликована автором Артем в рубрике HMTL & CSS с метками JavaScript, jquery, resize, window, ресайз.Совсем недавно выполнял одну задачку, где требовалось находить позицию курсора мыши в элементе страницы. Представьте себе видеоплеер с прогресс баром на сайте, и вам нужно вычислять ту секунду видео, на которую вы указываете мышью.
Вот вот ))
Читать далее →
Запись опубликована автором Артем в рубрике HMTL & CSS с метками JavaScript, jquery, позиционирование.В предыдущей статье я рассказывал о том, какую иконку-гамбургер для меню на мобильных устройствах я использую. Там я использовал jQuery для ее оживления, но сказал, что можно обойтись и без этой сторонней библиотеки.
В этой статье я покажу один из способов, как все сделать на чистом javascript. Кода получится чуть больше, но зато мы сможем убрать загрузку лишнего файла и лишний запрос к серверу. В итоге мы улучшим производительность, связанную с нашим мобильным меню. Читать далее →
Запись опубликована автором Артем в рубрике HMTL & CSS с метками CSS3, JavaScript, jquery, гамбургер, иконка меню.Сейчас существует очень много различных гамбургер-иконок для менюшек на мобильных девайсах.
Я чаще всего использую такую: это простой элемент без изображений с двумя псевдоэлементами. Вся эта красота украшается бордюрами и позиционируется так, как нам надо. Читать далее →
Представьте себе длинную landing page, состоящую из нескольких секций. Очень часто на таких страницах используется навигация с плавным скроллом между секциями.
У меня было несколько подобных проектов, где нужно было внедрить навигацию со скроллом по странице. Во всех случаях я использую один скрипт. Читать далее →
Запись опубликована автором Артем в рубрике HMTL & CSS с метками jquery, js, анимации, навигация по странице, прокрутка, скролл.Практиковался как-то в освоении некоторых технологий (animate.
css, wow.js, bootstrap, google maps api). Шаблон нашел где-то на сайте бесплатных psd-шаблонов. Он мне понравился, и я решил его забацать. Это я потом уже узнал, сколько их сверстано на просторах Инета. Ну, добавлю еще и свою версию. В чем-то упрощенную, в чем-то дополненную.
Предлагаю вам посмотреть, что у меня получилось.
Запись опубликована автором Артем в рубрике HMTL & CSS, Портфолио с метками animate.css, css-анимации, CSS3, HTML, JavaScript, jquery, landing page.Сейчас существует много красивейших сайтов, в которых реализована анимация элементов. Но особо привлекательно выглядят те, у которых при прокручивании страниц анимируются те элементы, которые попали в поле видимости. Читать далее →
Запись опубликована автором Артем в рубрике HMTL & CSS с метками animate.css, css-анимации, CSS3, HTML, JavaScript, jquery, js, landing page, wow.
js, анимации.Уже не помню, как давно я это делал… Предлагаю еще одну работу: Diversido Mobile. По-моему, контора занимается разработкой чего-то для мобил. Уже не помню. Мою работу можно посмотреть тут: http://vinnichenko.net/portfolio/diversido
Кому интересно, что это за контора — загуглите 😉
Запись опубликована автором Артем в рубрике Портфолио с метками CSS, HTML, jquery, js.Показываю последнюю работу: агентство по организации праздников «Шоу Престиж». Дизайн разрабатывал мой друг. Ссылка на готовый проект (на 100% он еще не наполнен контентом): Читать далее →
Запись опубликована автором Артем в рубрике Портфолио с метками CSS, HTML, JavaScript, jquery, верстка.Проблема использования значка — гамбургера в веб дизайне
Значок — гамбургер — это три не больших полоски, которые сейчас активно используют дизайнеры для обозначения меню на сайте, однако это один из самых спорных методов обозначения навигации в настоящее время.
Многие знаменитые дизайнеры говорят, что ненавидят его, а так же множество клиентов того же мнения, но тогда почему же данных значок часто встречается в дизайне?
Значок — гамбургер легко масштабируемый, и он красиво и чётко прорисовывается в пиксельной сетке. Также подобный значок правильно подходит по смыслу обозначения меню, так как навигация состоит из списка.
В общем в чём же проблема данного гамбургера? Давайте попробуем подробно разобраться в этом вопросе. И вообще стоит ли использовать данную иконку в обозначении меню на сайте.
Проблема значка
Есть множество дизайнеров, которые сомневаются в ценности и донесении смысла пользователю самой иконки — гамбургера. Подобный значок начали использовать так как он в стиле IOS, хотя он был в бесплатном доступе до того как его начала использовать Apple.
Существует множество противоречий по поводу того, что значок — гамбургер это правильное решение в обозначении меню на сайте. Дизайнеры утверждают, что иконка легко узнаётся младшим поколением аудитории, другие полагают, что и старшее поколение его легко воспринимает если оно грамотное в плане веб технологий.
Единственный вывод, который мы можем сделать из этих данных, это то, что все тесты по использованию значка аудиторией оказались безрезультатными, плюс было и множество противоречивых результатов.
Значок Гамбургер — больше проблем
Помимо конструкции самого значка, в его использовании присутствует ряд проблем.
Первая, и, наверное, самая важная проблема в том, что Значок Гамбургер добавляет Вашей навигации дополнительное действие. Чтобы добраться до нужного пункта меню, пользователю нужно сделать ещё один лишний щелчок. Правило для всех дизайнеров это ход к целевой страницы пользователя не более чем в 3 клика. А вот Гамбургер этому правилу противоречит. Вы можете использовать слово «Меню» вместо значка, но вот проблема останется и никуда не денется.
Техника Гамбургера также скрывает всё содержимое навигации. И, всё же, значок закрывает часть Вашего сайта, который изначально не видео, если только не нажать на иконку. Ну а пользователь может и не всегда воспользоваться значком, а иногда просто и не увидит его, хотя последнее очень сильно зависит от мастерства дизайнера.
Что хорошего в значке — гамбургере?
Учитывая то, что данную иконку ненавидят и она приносит много проблем дизайнеру, почему же её используют очень часто в дизайне?
В настоящее время данный значок хорош тем, что он легко узнаваем, пользователи всё же «продвинутые», он часто где используется, мобильные девайсы не исключение, по этому пользователь уже интуитивно знает за что гамбургер отвечает.
На самом деле иконка ссылка более узнаваема и кликабельна чем слово «Меню» хотя казалось бы на оборот.
Самое главное значок делает то, что он должен делать: а именно он экономит массу места, таким образом появляется больше возможностей для дизайнера. Не стоит думать, что значёк решает все проблемы с навигацией в дизайне, он просто решает эту проблему так же хорошо как и другие решения.
Корень проблемы
Те дизайнеры, которые не любят использовать данный значок используют как правило слово «Меню», но при этом всё же уместнее смотрится иконка чем слово, особенно на маленьких разрешениях.
Так же дизайнеры очень часто не понимают самой сути проблемы, это скрытие части контента от глаз аудитории, что, конечно же, не есть хорошим тоном.
Лучшее решение
Если Вы не знаете использовать иконку — гамбургер или нет, знайте, что в лучшем случае она будет исполнять свою задачу на мобильных устройствах, так как всё меню тяжело вместить на малые разрешения.
Отличным примером является приложение от Facebook, самый лучший пример использование гамбургера, к тому же интуитивно понятное. Так же Facebook недавно сделали ещё одно отличное приложение — Messenger. Сразу возникает вопрос, почему не объединить эти два приложения? Это решение было принято из за удаления иконки гамбургера, а так же упрощения навигации в основном приложении. Мне кажется, что это очень удачное и правильное решение.
И всё же, мне хочется сказать, что если Вы сомневаетесь в использовании данной иконки в дизайне, не используйте её. Данный значок будет уместен на маленьких экранах телефона, там где навигация просто не помещается, но и есть конечно же исключения, которые Вы можете посмотреть выше.
Огромное спасибо http://www.webdesignerdepot.com
Иконка-гамбургер — csslike.Me
Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.
Иконка-гамбургер — она везде. Везде вокруг нас. В веб-приложениях, на мобильных и десктопных сайтах, в программном обеспечении. Этот вездесущий значок из трех линий в настоящее время настолько распространен, что такое впечатление, как будто он однозначно ассоциируется с меню навигации. Но так ли это?
В последнее время дискуссии об эффективности иконки-гамбургера достигли новых высот. В статьях выдающихся дизайнеров, и на нескольких сайтах, включая The Atlantic, TechCrunch, The Next Web и Nielsen Norman Groupприходят к выводу, что это UX-антипаттерн, модная и простая в реализации иконка, которая является регрессом от более простых и более выразительных альтернатив. Но антипаттерн это или нет, использование значка настолько разрослось, что делает его почти непременным атрибутом на большинстве веб-сайтов, особенно на маленьких экранах.
Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com, и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.
Иконка-гамбургер является классической. Даже если вы не знакомы с этим ее названием, то три черные полосы столь же знакомы, как курсор мыши — постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера.
Gizmodo
Это звучит многообещающе. Но даже при том, что иконка является классической и была вокруг всегда, веб-дизайнеры были менее последовательны в ее использовании. Значок был использован для списков, перетаскивания и изменения порядка, выравнивания, и многого другого. Возможно, это неправильное использование объясняет его критику, как значка меню. Может быть, из за широкого распространения и разнообразного использования эта иконка потеряла способность передавать единую метафору и, в свою очередь, ставит пользователей в замешательство.
Вся эта история сподвигла меня задаться вопросами: «Неужели мы неправы, а все остальные правы? Причиняет ли это неудобства нашим пользователям? Есть ли люди, на самом деле понимающие, что представляют из себя эти три маленькие линии на нашем сайте?»
Постоянные читатели этого блога не будут удивлены, узнав, что нашим следующим шагом было задать эти вопросы в форме A/B теста. Как и все остальное, иконка-гамбургер был подвержен воздействию наших многочисленных клиентов, которые, путем взаимодействия с меню, должны определить, был ли этот значок лучшим решением. К этому времени я прочитал достаточно статей и информационных данных, чтобы быть уверенным, что отсутствие консенсуса или другие результаты не были следствием поведения покупателей, для которых разрабатывался дизайн. Я решил последовать методу, описанному Джеймсом Фостером, на который многие ссылаются, в том числе один из наших лучших мобильных специалистов — Люк Вроблевски.
Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами.
Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:
Базовый вариант
Наш исходный значок меню «гамбургер» слева от заголовка и с белой разделительной чертой справа.
Альтернативный вариант
Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.
Мы запустили эксперимент для всей нашей пользовательской базы. А также, учитывая известность и вездесущесть этого элемента пользовательского интерфейса, надеялись, что не займет много времени подвергнуть тестированию миллионов наших клиентов по всему миру, на каждом из поддерживаемых языков и большом числе устройств.
Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?
Результаты
В ходе этого эксперимента, замена иконки на слово «Меню» не оказало существенного влияния на поведение наших пользователей. С помощью нашей огромной базы пользователей, мы можем, с очень высокой степенью вероятности, констатировать, что, в частности, для посетителей Booking.com, иконка-гамбургер исполняет свою роль так же, как и версия с текстовым описанием.
Конечно мы не можем эти данные экстраполировать на все. В каких-то странах, на каких-то языках или устройствах, это возможно сработало лучше или хуже. Но в глобальном масштабе мы можем сделать вывод, что слишком сильно высмеивали «гамбургер». В целом, он был столь же узнаваем, как и слово «Меню». В духе управления продвижением дизайна нам, наверное, следует рассмотреть и другие варианты, и, может быть, попробовать к нашей иконке-гамбургеру добавить сыр, ломтик бекона и кортофель фри, но сейчас мы рады сообщить, что наш «трехлинейный друг» прилеплен везде. Его фактическое размещение, форма, размер, положение и цвет — это, конечно, предмет для будущих тестов.
Несомненно, это урок для всех нас о сущности A/B тестирования. Вы никогда не тестируете элементы UI, модель или функцию в целом. Вы тестируете эти вещи на очень конкретной пользовательской аудитории при определенных и конкретных сценариях. То, что работает для Booking.com, может не работать для вас или ваших пользователей. Это одна из причин, почему мы провели свое A/B тестирование. Выводы других экспертов, данные с других сайтов или гипотезы, придуманные в пабе, поедая гамбургер, все будут недоказанными, пока они не проверены на наших клиентах и на нашей платформе.
Не запутаться бы в нашей собственной метафоре, но это, как рецепт хорошего гамбургера. Даже если вы в точности записали за мной все ингредиенты, в конечном итоге вы получите совершенно другой гамбургер. На это, конечно, повлияет качество доступного на рынке мяса, мука используемая для хлеба и тысячи других факторов. Лично для нас, идея хорошая, если она будет хороша для Booking.com. Если мы может повторить ее на нашем сайте, и, если она будет работать для всех наших клиентов.
Наше мнение
Всегда надо тестировать свои идеи и смотреть, что вам говорят полученные данные и, какие вопросы возникают. Мой совет? Откусите и посмотрите, что произойдет.
Примеры CSS меню c анимацией с ресурса Codepen
Возможно, вы слышали о ресурсе Codepen, на котором можно создавать файлы примеров для использования их в проектах. В данной статье мы рассмотрим примеры различных меню, авторы которых разместили свой код на codepen.io.
Простые меню вы можете разобрать с помощью статьи «Виды горизонтальных меню для сайта». Здесь же будут рассмотрены примеры различных меню, появляющихся по клику на кнопке. В этих меню, помимо css-форматирования, используется код на JavaScript/jQuery.
Flexbox-меню с перекрытием экрана
Верстка меню основана на модели Flexbox. При появлении элементов меню происходит перекрытие экрана. Используются трансформации и анимация с помощью свойства transition. Также используется код на jQuery.
See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.18892
Меню со слайд-эффектом
При клике на элементах этого меню используется плавный переход подчеркивания для активной ссылки. Здесь есть не только css-форматирование, но и код на jQuery.
В примере используются html-, css- и js-препроцессоры. Если код вам непонятен, нажмите на стрелку в правом верхнем углу соответствующей вкладки и выберите пункт «View compiled HTML» и т.п. при редактировании этого примера на Codepen.
See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.18892
Цветное навигационное меню на основе CSS и jQuery
В этом css-меню используется эффект изменения цвета активной точки при наведении на один из пунктов. Как и в предыдущих меню, без jQuery здесь не обошлось.
See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.18892
Еще один вариант:
See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.18892
Скошенное меню
В этом меню внешний вид обеспечивается с помощью CSS3-свойства transform: skew(). Очень интересный вид, полученный путем трансформации списка ссылок.
See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.18892
CSS меню с эффектами при прокручивании и наведении
В этом меню использованы эффекты при прокручивании (скроллинге), связанные с 3d-трансформациями и увеличении масштаба при наведении. Также не обошлось без JavaScript.
Интересное меню с различными цветами и иконками для пунктов меню. Оно предполагает разворачивание на весь экран.
See the Pen Menu with scroll & hover effects by Ivan Bogachev (@sfi0zy) on CodePen.18892
Меню для мобильной версии сайта или приложения
Это меню «заточено» под мобильную версию сайта или мобильное приложение. Используется не только css-форматирование, но и JavaScript-код.
See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.18892
Боковое выезжающее меню с эффектом размытости стекла
Разметка с использованием CSS и нативного JS-кода
See the Pen Frosted Glass Menu | [best in chrome] by Dev Loop (@dev_loop) on CodePen.18892
Меню, предназначенное опять-таки либо для мобильной версии сайта, либо для мобильного приложения. В нем используются анимации SVG и CSS3 без подключения сторонних библиотек + код на JavaScript.
See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.18892
Желеобразное меню для мобильных устройств
Очень интересное меню с приятной анимацией при скроллинге и прикосновении на мобильных устройствах. Требует подключения множества библиотек.
See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.18892
Иконочное меню для мобильных
See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892
Меню с иконками для мобильных
See the Pen Fancy tab bar active animation by Aymen Mohammed (@aymen-mohammed) on CodePen.18892
CSS меню с кнопкой по центру header
See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.18892
Социальное меню с выезжающими иконками
See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892
Верхнее выезжающее css-меню c иконкой-гамбургером
Приятное боковое выезжающее меню с CSS-анимацией появления самого меню и изменения иконки-гамбургера. Подойдет как для основной версии сайта, так и для мобильной версии. Помимо CSS, используется минимальный код на JS.
See the Pen Toggle menu by Tristan White (@triss90) on CodePen.18892
Еще один вариант с небольшими 3D-трансформациями.
See the Pen 3D Rotating Navigation by Elen (@ambassador) on CodePen.18892
Боковая панель с меню
Меню расположено на боковой выезжающей панели справа. При появлении меню основной контент сдвигается влево. Использован код на JS.
See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.0
Еще один пример для панели администратора
See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.18892
Интересное боковое меню для лэндинга или одноэкранной презентации
See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.18892
Неоновая анимация при наведении на горизонтальное и вертикальное меню
See the Pen Menu Or Nav Hover Styles by Dev Loop (@dev_loop) on CodePen.18892
Выезжающее сбоку меню
В коде используется не только css, но и JS-код
See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen.18892
Второй вариант выезжающего сбоку меню основан только на CSS:
See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.18892
Боковое css-меню с анимацией
See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.18892
Выезжающее сверху CSS меню
При нажатии на кнопку-гамбургер сверху с анимацией появляется меню. Контент смещается вниз с отступами слева и справа. Помимо css-transition использован несложный код на jQuery.
See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.0
Навигационное меню в стиле Material Design
Приятное меню, которое появляется со слайд-эффектом с помощью css-transition и небольшого jQuery-кода.
See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.0
Еще один вариант в стиле Material Design с круглыми кнопками
See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.18892
Вторая версия меню с круглыми кнопками.
See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.18892
Раскрывающееся вниз (Dropdown) меню
В примере использованы CSS и JS-код.
See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.18892
Еще один вариант dropdown-меню
See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.18892
Вариант с интересной анимацией при наведении
See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.18892
Трансформация скоса в выпадающем меню при наведении курсора мыши
See the Pen CSS Swinging Panel Menu by Seth Abbott (@sethabbott) on CodePen.18892
Выпадающее (Dropdown) меню на CSS
See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.18892
Выпадающее по клику меню в стиле Bootstrap
See the Pen OnClick Dropdown by Sazzad (@sazzad) on CodePen.18892
Выезжающее меню слева в стиле Bootstrap 3
See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.dark
Выезжающее меню с CSS-анимацией
Только CSS, без JS-кода
See the Pen CSS Drop-Down Menu Transitions by Shaw (@shshaw) on CodePen.18892
Выезжающее сверху меню с анимацией
Есть переключатель для темной/светлой темы и анимация в виде круга, перемещающегося за курсором мыши. CSS+JS-код.
See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.18892
Отзывчивое мега-меню с использованием jQuery
See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.18892
CSS-меню с несколькими уровнями вложенности
See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.18892
Отзывчивое меню с несколькими уровнями вложенности
Использует не только CSS, но и jQuery.
See the Pen CSS3 Responsive Menu Dropdown + Submenu width Logo by emre (@emredenx) on CodePen.18892
CSS-меню с вкладками
Стоит, наверное, отключить видимость radio-переключателей в конечной версии меню.
See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.18892
Варианты анимации иконки-гамбургера
See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.18892
SVG-Анимация при наведении на иконку гамбургера в боковой панели
See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.18892
Еще варианты анимации иконки-гамбургера.
See the Pen CSS Menu Icon Animation: Know Your Menu by Olivia Ng (@oliviale) on CodePen.18892
Различные варианты оформления меню вы можете найти также на freefrontend.com, onaircode.com и navnav.co.
Просмотров: 6 900
UWP Анимированная Иконка Гамбургера — CodeRoad
Я хотел бы добавить привлекательную анимированную иконку гамбургера в мой проект SplitView in c# UWP XAML.
Я знаю, что есть тонны анимированных иконок CSS (например, здесь или здесь , в [2,2]), которые можно найти, но редко для XAML. И есть парень, который портировал здесь некоторые анимации с CSS по XAML .
Мне нравится очень хорошая анимация, как это сделал этот разработчик в приложении Windows Phone: ссылка на магазин .
Как он это сделал? И как я могу это сделать? Является ли «just» чрезмерным использованием Storyboard ? Или тут замешаны другие уловки? Поскольку это приложение ориентировано на Win8 (а не на Win10), я не думаю, что это делается анимированным GIF.
Поделиться Источник user3079834 13 февраля 2016 в 09:02
3 ответа
- Динамический список кнопок меню гамбургера
Я хочу создать HamburgerMenu из динамического списка элементов, предпочтительно я хотел бы привязать что-то вроде ListBox с шаблоном к списку в моей модели представления, и чтобы пункты меню отображались динамически. (См.: http://bit.ly/1Lac78E ). Попытка добавить что-либо в коллекцию…
- Что такое анимированная поверхностная сетка?
Что такое анимированная поверхностная сетка? Какой формат файла имеют анимированные поверхностные сетки на диске? Я читаю статью Animated Mesh Approximation With Sphere-Meshes . Входным сигналом алгоритма, упомянутого в статье, является анимированная поверхностная сетка. Но я не знаю, что такое…
1
Допустим, у вас есть кнопка вверху, которая открывает и закрывает ваш SplitView. Теперь измените эту кнопку на ToggleButton. Создайте необходимые обработчики событий на ToggleButton и SplitView, чтобы переключатель всегда имел правильные значения. «Checked», когда панель открыта, и «UnChecked», когда панель закрыта.
Сейчас
- Откройте свою страницу в Blend
- Правой Кнопкой Мыши на ToggleButton редактировать шаблон -> изменить копию
- Переход к состояниям(перед переходом к следующему шагу лучше изменить все состояния по своему вкусу, а затем создать переходы )
- Найдите Normal и нажмите — > + Добавить переход и выберите Normal — > Checked
- В разделе Объекты и временная шкала выберите ContentPresenter
- Переместите желтую линию на 0.500
- В свойствах перейдите к преобразованию, затем выберите поворот и установите угол равным 270(убедитесь, что выбран параметр ContentPresenter)
- Вернуться к объектам и временной шкале Нажмите кнопку Воспроизвести,чтобы проверить анимацию. Теперь вы можете играть и создавать свою собственную анимацию, как вам нравится (часть вращения — это просто пример)
- Постройте проект и попробуйте его вживую!
Я верю, что с этого момента вы получили это, создаете из Checked -> Normal, и у вас есть то, что вы хотели.
Поделиться Stamos 13 февраля 2016 в 15:22
0
Хорошо, рассмотрев @Stamos комментарий к его ответу , я нашел эту ссылку, которая реализует событие CurrentStateChanged . И кто-то здесь показывает способ реализации Checked и Unchecked состояний.
Но окончательный ответ я нашел на форуме telerik, где у какого-то настоящего героя было много свободного времени. Именно то, что я искал.
Поделиться user3079834 16 февраля 2016 в 20:15
0
Я успешно достиг этого типа анимации, используя кучу твиков, сделанных в XAML, а также в Blend. Вы можете проверить это здесь .
Поделиться Raj Haraniya 08 июля 2016 в 11:11
- Живая иконка MPNowPlayingInfoCenter
Я делаю радио-приложение и заметил, что в приложении iHeartRadio, наряду с приложением Apple Music (Beats 1), кажется, есть живая иконка для live media. Я хотел реализовать это в своем приложении, но понятия не имею, как это сделать. Я использую Swift 3 и MPNowPlayingInfoCenter. Любые ответы…
- Как включить жест свайпа, чтобы привести главную страницу в Xamarin форм UWP?
У меня есть проект Xamarin forms с iOS и UWP, реализован макет master-detail, и он отлично работает на обеих платформах, но на iOS, если мы проведем пальцем слева, будет отображаться главная страница(меню гамбургера), но на UWP нам нужно нажать на значок меню, чтобы вызвать главную страницу, как я…
Похожие вопросы:
Xamarin.Forms Prism master view не показывает значок гамбургера при появлении всплывающего окна
Я создал свой Xamarin.Forms Призма приложение, чтобы использовать мастер-деталь страницы (с MasterBehavior установлено Пирог) для навигации, но я заметил несколько различий между моей призмы…
Анимированная иконка для Winforms Treeview?
Я хотел бы показать значок Loading, так как каждый узел treeview ждет загрузки. Я представляю себе ожидающий круг Win 7, который вращается, но любая анимированная иконка будет работать. Возможно ли…
Шаблон 10:Using MasterDetail вместе с шаблоном гамбургера
Я использую шаблон 10 для разработки приложения UWP, и я использую шаблон гамбургера, поэтому, когда пользователь нажимает на определенную категорию, я хотел бы перейти к списку событий в главном…
Динамический список кнопок меню гамбургера
Я хочу создать HamburgerMenu из динамического списка элементов, предпочтительно я хотел бы привязать что-то вроде ListBox с шаблоном к списку в моей модели представления, и чтобы пункты меню…
Что такое анимированная поверхностная сетка?
Что такое анимированная поверхностная сетка? Какой формат файла имеют анимированные поверхностные сетки на диске? Я читаю статью Animated Mesh Approximation With Sphere-Meshes . Входным сигналом…
Живая иконка MPNowPlayingInfoCenter
Я делаю радио-приложение и заметил, что в приложении iHeartRadio, наряду с приложением Apple Music (Beats 1), кажется, есть живая иконка для live media. Я хотел реализовать это в своем приложении,…
Как включить жест свайпа, чтобы привести главную страницу в Xamarin форм UWP?
У меня есть проект Xamarin forms с iOS и UWP, реализован макет master-detail, и он отлично работает на обеих платформах, но на iOS, если мы проведем пальцем слева, будет отображаться главная…
UWP меню гамбургера верхняя панель приложения оставляет лишнее пустое пространство без всякой причины
Я столкнулся со странной проблемой в моем приложении UWP, у меня есть кнопка гамбургера и текстовый блок(название страницы) в верхней части главной страницы. Внизу у меня есть разделенное…
Использование символа меню гамбургера/значка его unicode в C# Winforms
Я пытаюсь отобразить символ меню гамбургера/значок в кнопочном элементе управления в Winforms C#, используя символ unicode. Я попробовал поискать в google, но все результаты относились к уникодам…
Исправлена иконка гамбургера angular
Я сгенерировал компонент заголовка с помощью ng generate @angular/material:material-nav —name header , в этом случае мне нужно зафиксировать значок гамбургера, даже если размер экрана больше….
51 CSS Hamburger Menu Icons
Free HTML and CSS hamburger menu icons . Обновление коллекции за март 2019 года. 13 новинок.
- CSS Пунктирные значки меню
О коде
Анимированное меню
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Взаимодействие с SVG (меню со стрелкой влево)
Меню для взаимодействия со стрелкой влево с использованием анимации SVG и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Микаэль Айналем
О коде
Гамбургерное меню
Простое гамбургерное меню.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Билал.Ризваан
О коде
Преобразование гамбургерного меню
Переход значка меню гамбургера с использованием CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Флорин Поп
О коде
Анимация движущегося гамбургера
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Адам Кун
О коде
Неприятный бургер
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Микаэль Айналем
О коде
Гамбургер
Гамбургер-меню, римейк дриббла Аарона Икера, выстреливший — ремейк Леонида Арестова.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Гималаи Сингх
О коде
Гамбургер Анимация
Анимация гамбургера и тройной цвет фона с использованием CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Гималаи Сингх
О коде
Кнопка меню
Кнопка меню и анимация преобразования горизонтального многоточия.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Минимальная анимированная иконка меню на чистом CSS
Минимальная анимированная иконка меню с чистым CSS, также может использоваться с JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Аарон Икер
О коде
Гамбургер 3D анимация переключателя CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Сделано с
- HTML (мопс) / CSS (Sass) / JS
О коде
Гамбургер Меню v2
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: jquery.js
Автор
- Микаэль Айналем
О коде
Сочные гамбургеры Flippin ‘
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Гималаи Сингх
О коде
Взаимодействие кнопок меню гамбургера
Взаимодействие кнопок меню «Гамбургер» на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Аарон Икер
О коде
Гамбургер Анимация
Переход значка «Гамбургер» / «Закрыть».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Рис Мэтью П
Сделано с
- HTML / CSS (SCSS) / JavaScript
О коде
Щелкните маркер на кнопке меню Использование: после
Используя псевдоэлемент : после на кнопке меню, мы можем добиться эффекта подсветки щелчка.Подобно тому, что было в Материальном дизайне Google.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Елица Димитрова
О коде
Гамбургерное меню
Простой значок меню гамбургер с небольшим jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: jquery.js
Автор
- Сил ван Дипен
О коде
Гамбургер Меню
Меню только эффекты CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: svd-full.css
Автор
- Микаэль Айналем
О коде
Переворачивая бургеры
Набор анимаций открытия / закрытия гамбургер-меню в SVG, HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- rosalieelphick
О коде
CSS Гамбургер-меню
Анимация меню гамбургеров, все с чистым CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Тамино Мартиниус
О коде
Гамбургер-меню Анимации
Четыре различных анимации меню для переключения кнопки меню между гамбургером, крестиком и значком «Назад».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Кнопочная навигация
Анимированная навигационная кнопка (отдельный элемент со стилем рисования) с использованием CSS и JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Значок меню с вращением
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Гамбургер Иконка с флажками
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Гамбургерное меню
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Ахмад Эмран
О коде
Гамбургер Иконки Анимации
CSS-иконок-гамбургеров с отличными состояниями наведения и анимацией.
Автор
- Райан Маллиган
Сделано с
- HTML / Мопс
- CSS / SCSS
- JavaScript
О коде
Переключатель пролистывания меню
Что это за флип? Не идеально для производства, но вот забавный эксперимент с переключением меню с анимацией CSS.
Автор
- Kriszta
Сделано с
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
О коде
Холодный гамбургер с тумблером
Эффект переключения креативного гамбургера.
Автор
- Родриго Соуза
Сделано с
- HTML
- CSS
- JavaScript (jquery.js)
О коде
Кнопка для гамбургера
Сексуальная кнопка гамбургера.
Сделано с
- HTML
- CSS
- JavaScript (jquery.js)
О коде
Гамбургер Open Animation
Открытая анимация гамбургера HTML, CSS и JS.
О коде
Анимация меню SVG
Анимация гамбургерного меню с элементом svg.
Сделано с
- HTML
- CSS
- JavaScript (jquery.js)
О коде
Гамбургер Иконка Анимация
Простая CSS-анимация значков гамбургера с небольшим количеством jQuery.
Автор
- Валерий Аликин
Сделано с
- HTML
- CSS / Менее
- JavaScript (jquery.js)
О коде
Анимация меню
Анимация меню гамбургера.
О коде
Кнопка меню гамбургера
Кнопка гамбургер-меню HTML, CSS и JavaScript.
Сделано с
- HTML / Haml
- CSS / SCSS
- JavaScript (jquery.js)
О коде
3D Гамбургер Transformicon
Трехмерное преобразование гамбургера с помощью HTML, CSS и JS.
Демо-изображение: Click Me! Гамбургерное менюClick Me! Гамбургер Меню
Оригинальный снимок https://dribbble.com/shots/3323188-Experimental-Hamburger-Menue
Изготовил Александр Изуменко
2 марта 2017 г.
Автор
- Курт Петрек
О коде
Помощник по приготовлению гамбургеров на полсекунды
Витрина гамбургер-меню.
Демонстрационное изображение: Анимация значка гамбургераАнимация значка гамбургера
12 анимаций иконок гамбургеров.
Сделано Rosa
6 ноября 2016 г.
Atomic Hamburger Menu CSS
Атомарное гамбургер-меню HTML и CSS.
Сделано Alex Coven
10 октября 2016 г.
Анимация значка гамбургера
Анимация иконок для гамбургеров в HTML, CSS и JavaScript.
Сделано Карлосом
13 августа 2016 г.
Анимированный бургер / Значок меню
HTML, CSS и JavaScript анимированный значок бургера / меню.
Сделано Николасом Смитом
31 июля 2016 г.
, гамбургерное меню, эластичное,
Эластичное меню гамбургера с HTML, CSS и JavaScript.
Сделано Давиде Кантелли
6 июля 2016 г.
20 кнопок меню для гамбургера
Кнопка меню для гамбургера.Стилизовано и анимировано с помощью чистого CSS.
Сделано Иньси Чен
5 июня 2016 г.
Анимированный значок меню
Анимированный значок меню, переключающийся между гамбургером для открытия и X для выхода.
Сделано Эриком Грюча
27 мая 2016 г.
Простое переключение панели навигации на X (Vanilla JS)
Простое решение CSS и JS для превращения стандартного «гамбургера» Navbar в X при нажатии, а затем обратно в гамбургер при нажатии.Не требует зависимостей, написан на ванильном JS.
Сделано Джозефом Дженгареллой
3 апреля 2016 г.
Анимация значка меню
Анимация значков меню с помощью HTML, CSS и JavaScript.
Сделано Мариусом Балаем
23 марта 2016 г.
CSS (SASS) Анимация гамбургерного меню
Небольшая анимация при наведении курсора на значок меню гамбургера.
Сделано Дереком Морашем
11 января 2016 г.
Значок меню SVG
Значок меню Codrops SVG с всплывающим сообщением.
Сделано в Popmotion
12 ноября 2015 г.
Расширяющийся значок навигации по гамбургеру
Расширяющееся меню гамбургера, которое отображает назначение кнопки более четко, чем типичный значок меню гамбургера.
Сделано Райаном Кэнфилдом
11 мая 2015 г.
Анимация гамбургерного меню
Еще одна анимация гамбургер-меню.
Сделано Себастьяном Поппом
2 апреля 2015 г.
Обращенный переход к гамбургеру
Больше удовольствия с переходами значков гамбургера.
Сделано Джесси Коуч
4 сентября 2014 г.
CSS Анимированная иконка гамбургера
Elijah Manor • Почти 7 летЗадача
В последнее время я больше работал над мобильным Интернетом и подумал, что было бы забавно оживить плодовитую навигационную иконку гамбургера.
Non-Animated CSS Hamburger Icon
Вы можете использовать Font Awesome или изображение для представления гамбургера, но это не обязательно. Вместо этого вы можете создать версию гамбургера только с использованием CSS и следующей разметки.
gist: 9331778 # index.html
Следующий CSS сделает промежуток мясом гамбургера, а псевдоэлементы до и после будут служить булочками.
gist: 9331778 # style.css
Указанные выше HTML и CSS визуально представлены в следующем CodePen. Здесь нет ничего особенного, просто значок гамбургера … но это подводит нас к следующему разделу, посвященному анимации.
//codepen.io/elijahmanor/pen/GxCAn
См. Pen GxCAn от Elijah Manor (@elijahmanor) на CodePen.
Анимированная иконка гамбургера в CSS
Теперь мы переходим к интересным вещам … давайте оживим эту иконку гамбургера! Мы собираемся изменить гамбургер на X , чтобы пользователь знал, что нужно щелкнуть его еще раз, чтобы закрыть меню.
В CSS мы используем переход и преобразование в , поворот на псевдоэлементов до и после и постепенное исчезновение средней полосы, чтобы создать нашу форму X .
Примечание. Я использую переход
и преобразование, которое поддерживается в IE10 + и других браузерах.Если вам действительно нужна поддержка oldIE, вы можете использовать резервный jQuery или какое-либо другое решение JavaScript.
gist: 9331915 # style.css
Примечание. CodePen использует -prefix-free, который автоматически добавляет все необходимые префиксы поставщиков.
Чтобы запустить анимацию, мы можем переключить класс в нашем гамбургере, когда пользователь щелкает следующий код JavaScript.
gist: 9331915 # script.js
Примечание:
classListкак ограниченная поддержка (IE10 + и другие браузеры).Вместо этого вы можете легко использовать фрагмент jQuery или предоставить полифил через HTML5. Пожалуйста.
Ниже приведен пример вышеупомянутого значка CSS-гамбургер вместе с CSS-анимацией. Вам нужно будет нажать на гамбургер, чтобы вызвать анимацию.
//codepen.io/elijahmanor/pen/Igpoe
См. CSS анимированный значок гамбургера Pen от Elijah Manor (@elijahmanor) на CodePen.
Заключение
Надеюсь, вам понравился этот краткий обзор peudo-elements и анимации CSS.Я не вдавался в подробности того, как именно все устроено. Чтобы глубже изучить эти концепции, я рекомендую вам изучить следующие ресурсы …
Поделиться статьейTwitterFacebook
Отзывчивый, чистый CSS Off-Canvas Hamburger Menu | автор: Марк Карон
Создание прогрессивно улучшенного мобильного меню, работающего без JavaScript
Последнее обновление 21 января 2019 года.
Гамбургер-меню вне холста на чистом CSS — не недавнее открытие.В конце концов, Крис Койер писал об этой технике еще в ноябре 2012 года.
- Если для вас это старый трюк, то подождите немного. Я улучшил пример Криса и хотел бы получить ваши отзывы.
- Если это новость для вас, не волнуйтесь. У вас много компаний, и кажется, что большая часть Интернета еще не прижилась.
Итак, мы собираемся создать простое, адаптивное гамбургер-меню вне холста, используя только CSS, которое будет легко включить в ваш собственный проект. Но сначала…
Что не так с JavaScript?
Ничего.
Аарон Густафсон объясняет важность прогрессивных улучшений и роль JavaScript в веб-разработке лучше, чем я когда-либо мог. Вы должны прочитать его пост. Но для краткости я попытаюсь подвести итог:
- «Основные задачи всегда можно решить без JavaScript».
- Основные задачи должны выполняться на наиболее стабильном уровне (, т.е. не JavaScript ).
- Progressive Enhancements не защищает от JavaScript. Речь идет только о том, чтобы использовать правильные технологии на нужном уровне.
- «Поскольку есть вероятность, что JavaScript не запустится, мы всегда должны учитывать этот шанс».
- Никогда не стоит игнорировать потенциальных пользователей.
- Progressive Enhancements — это просто хорошая инженерия.
Итак, мы собираемся сделать все возможное с помощью HTML и CSS. Затем пусть JavaScript сделает свое волшебство на более подходящем уровне — улучшит уже существующий пользовательский интерфейс.
Шаг 1: HTML
Как вы, возможно, знаете, первым шагом всегда является написание прочного, хорошо продуманного базового уровня HTML.
Примечание. Я использую Font Awesome для значков в моем примере.
Шаг 1. Исходный HTML-код для гамбургер-меню, адаптивного к чистому CSS.Выглядит довольно стандартно, не так ли? У нас есть:
- Наш родительский
- Значок гамбургера («fa-bars»)
- Главный заголовок (или, возможно, логотип)
- Навигация в элементе
- Значок закрытия («fa-close») внутри навигации ( подробнее об этом позже )
- «Фон» после навигации. Почему это тег привязки? Я объясню позже.
Шаг 2. Давайте сделаем его более доступным
Доступность никогда не должна быть запоздалой — как после того, как вы написали свое приложение . Это нужно спланировать с самого начала. Добавление нескольких основных соображений не только улучшит общую доступность вашего сайта, но и предоставит вам (разработчику) лучшую разметку для использования в вашем JavaScript!
Вместе с этим мы собираемся добавить еще несколько атрибутов и немного для чтения с экрана text:
Шаг 2. Улучшение HTML, чтобы сделать его более доступным.Вот краткое описание всех этих атрибутов и того, как они работают:
- Мы добавили уникальные идентификаторы для таргетинга наших HREF ( подробнее о том, как это работает, позже, ).
- Мы предоставили информативные метки кнопок для программ чтения с экрана, используя [ aria-label ].
- Мы скрыли значки от программ чтения с экрана с помощью [ aria-hidden = «true» ], потому что они визуальные представления, и добавили текст только для чтения с экрана с элементов.
- Мы убрали «фон» из индекса табуляции с помощью [ tabindex = «- 1» ]. Он носит чисто визуальный характер, и мы не хотим путать наших пользователей с ослабленным зрением и пользователей, использующих только клавиатуру.
- Мы добавили удивительный атрибут [ hidden ], чтобы установить начальное (и семантическое) состояние «фона». Больше никакого мусора [ class = «hidden» ] — как интересно!
Вот результат:
Рисунок 1: Отображение HTML после шагов 1 и 2.Шаг 3. Давайте стилизуем!
Мы собираемся подойти к этому вопросу, ориентированному на мобильные устройства, поэтому давайте выберем мобильный, «гамбургерный» вид (интересная часть).
Во-первых, мы просто сделаем правильный макет заголовка (без интерактивности):
Шаг 3. Добавьте CSS для стилизации заголовка (пока без интерактивности).Результат:
Рисунок 2: Результат отображения HTML и CSS после шага 3.Шаг 4: Интерактивность с чистым CSS
При создании интерактивных виджетов с помощью CSS у вас есть несколько вариантов:
- Использовать радио или флажки
- Используйте псевдокласс : target .
Радио и флажки прекрасно работают с большинством виджетов, таких как вкладки, модальные окна, раскрывающиеся списки и аккордеоны. Крис Койер назвал эту технику «взломом флажков». Некоторые разработчики использовали этот «прием» для создания меню вне холста, например, в учебнике Пола Льюиса по Chrome Dev Summit или в морфинге гамбургер-меню Луиса Мануэля.
Однако псевдокласс : target более семантический в этом случае использования, поскольку мы непосредственно имеем дело с навигацией. Вы можете не согласиться, , и это совершенно нормально, ! Было бы невероятно легко и совершенно приемлемо заменить псевдокласс : target на флажок.
Однако у любого из этих методов есть свои недостатки.
Использование флажка:
- Требуется JavaScript для закрытия меню вне холста, если одна из ссылок в меню была привязкой к определенному разделу той же страницы.
- Требует, чтобы поле было одноуровневым по отношению к меню или, по крайней мере, одноименным родственником предка меню. Другими словами, CSS немного сложнее. Однако вы можете иметь (даже несколько меток) в другом месте.
- Элемент не будет иметь прямой фокус или табуляцию, требуя немного более сложного CSS для обработки фокуса на флажке при изменении видимого внешнего вида .
- Клавиатура при открытии / закрытии меню будет неустойчивой. Влияние на изменение состояния флажка осуществляется с помощью клавиши [пробел], а не клавиши [возврата]. В то время как слепые пользователи могут понять, что виджет управляется флажком, зрячие пользователи клавиатуры будут сбиты с толку, поскольку флажок не виден — что-то, что я чувствовал, было нарушением сделки в этом случае использования.
Использование псевдокласса : target :
- Добавляет открытие / закрытие меню вне холста в историю браузера (помещая хэш в адресную строку). Для этого потребуется JavaScript для запуска Event.preventDefault () , чтобы избежать этого (и потенциально раздражающего перехода к началу страницы).
И, возможно, есть и другие предостережения, которые я пропустил. В любом случае, выбор техники зависит от ваших предпочтений и требований вашего проекта. В любом случае, я отвлекся…
Вот интерактивная часть CSS:
Шаг 4: Добавьте CSS для интерактивности.Результат при нажатии:
Рисунок 3: Результат отображения гамбургер-меню при его открытии.Как все это работает
По сути, псевдокласс : target дает нам новое «состояние» для стилизации целевой навигации. Когда основное меню нацелено на (с добавлением хэша к URL-адресу), мы можем теперь выдвинуть меню.Это немного похоже на псевдокласс : focus для целевого элемента (а не для самой ссылки).
Мы также разрешили отображение «фона» при нацеливании на навигацию.
Вы заметите, что главный значок гамбургера связан с идентификатором навигации, в то время как и значок закрытия, и кнопки фона связаны с основным значком гамбургера. Это позволяет нам щелкнуть значок закрытия или фон, чтобы удалить «focus » — или действительно : target — из навигации.Если бы фон не был ссылкой, на него нельзя было бы нажимать без JavaScript.
Я также связал селекторы : target вместе с атрибутом [ aria-extended = «true» ] в CSS. В конечном итоге именно здесь мы будем постепенно улучшать гамбургер-меню с помощью JavaScript, чтобы не переходить к заголовку при нажатии — избегая оговорки, о которой я упоминал ранее. Если JavaScript перехватит хеш-поведение браузера, псевдокласс : target больше не будет работать.Когда это произойдет, мы воспользуемся преимуществом атрибута [ aria-extended ] для стилизации переключения с истинными / ложными значениями , как это могло быть в прошлом с классами.
А пока это прекрасно работает без JavaScript.
Я добавил медиа-запрос @supports, чтобы указать предпочтительную позицию : исправлено CSS для браузеров (как мобильных, так и настольных), которые его поддерживают. В противном случае, хромые браузеры и устройства — Я смотрю на вас iOS — получит позицию : абсолютное значение .
Шаг 5. Большие стили экрана
Поскольку мы не хотим, чтобы гамбургер-меню отображалось на немобильных устройствах (или больших экранах в целом), мы добавим для этого необходимый медиа-запрос. Затем мы изменим его стиль, чтобы он выглядел как горизонтальная навигация:
Шаг 5: CSS для стилизации навигации на больших экранах.Результат:
Рисунок 4: Результат отображения стиля навигации для больших экранов.Вуаля! Были сделаны!
Собираем все вместе
Вот окончательный HTML:
Окончательный HTML для адаптивного гамбургер-меню с использованием только CSS.Вот последний CSS:
Final CSS для отзывчивого гамбургер-меню. Попробуйте мой CodePen:
→ Гамбургер-меню на чистом CSS без JavaScript.
Примечание: вы также можете продемонстрировать версию меню с флажками.
Несмотря на то, что мы можем сделать меню вне холста полностью с помощью CSS, улучшив его производительность и надежность, нам все равно понадобится JavaScript, чтобы каким-то образом улучшить интерактивность, связанную с недостатками любого метода.Вы также можете использовать JavaScript для предотвращения прокрутки страницы, когда меню открыто.
Также стоит отметить, что приличный уровень (и, возможно, самый важный уровень) доступности может быть достигнут без JavaScript. Однако трудно обеспечить надежный уровень доступности без способности JavaScript манипулировать DOM (например, управление фокусом, обновление атрибутов ARIA и т. Д.).
Для получения дополнительной информации об улучшении доступности вашего веб-сайта с помощью JavaScript ознакомьтесь со следующими статьями:
Я хотел бы услышать ваши комментарии о моем подходе к гамбургер-меню на чистом CSS.
21 января 2019 г .: Отредактированная статья и обновленные примеры кода для удаления ненужных атрибутов ARIA и улучшения доступности.
Узнав больше об использовании ARIA, разработке и тестировании доступности в целом, я понял несколько вещей:
- JavaScript определенно имеет свое место и должен быть частью любого надежного пользовательского шаблона доступности.
- За исключением ориентиров ARIA, для правильного использования ARIA требуется JavaScript. И многие из атрибутов, которые я использовал, например, [aria-extended] , лучше оставить JavaScript для добавления после загрузки, а не непосредственно в разметке.Эта концепция следует хорошей практике прогрессивного улучшения — состояния и свойства ARIA вместе с JavaScript являются обновлением и должны обрабатываться на отдельном уровне.
- Раньше я не обрабатывал фокус должным образом, так как фокус исчезал при переходе через визуально скрытые ссылки (при свертывании). Я добавил дисплей : нет; в меню CSS, чтобы исправить это.
Итак, если вы реализовали предыдущую версию моего гамбургерного меню на чистом CSS Off-Canvas, пожалуйста, подумайте об обновлении ее до этой более простой и доступной версии!
Отзывы / критические замечания, комментарии и вопросы всегда приветствуются.
Создание значка меню «Гамбургер» только для CSS (без изображений или шрифтов)
В этом посте я поделюсь фрагментом кода CSS для создания меню «гамбургер» без каких-либо изображений или шрифтов-значков. Гамбургерное меню часто используется в адаптивном веб-дизайне для отображения расширяемого списка меню. Этот трехстрочный значок меню можно создать только с помощью CSS, и мы увидим, как это сделать в этой публикации.
Нажмите на изображение для демонстрации на CodePenПри разработке минималистичных веб-сайтов вы можете не захотеть загружать ненужные иконочные шрифты, такие как Font Awesome или дополнительные изображения, только для того, чтобы создать один небольшой значок меню гамбургера.В таких случаях лучше всего использовать значок меню «Гамбургер» только с помощью CSS, чтобы избежать запросов на дополнительные ресурсы для веб-сайта.
CSS, который мы напишем для создания значка меню «Гамбургер», также будет поддерживаться многими старыми браузерами, и поэтому это лучший вариант, чем использование шрифтов SVG или значков, которые обычно не поддерживаются старыми браузерами и требуют дополнительных методов восстановления.
Если вам интересно, как с помощью CSS можно нарисовать три линии в одном элементе, то ответ на этот вопрос — псевдоэлементы.Как видно из приведенного ниже фрагмента CSS, мы рисуем верхнюю и нижнюю границу элемента hamburger . Для третьей строки, которая будет проходить между ними, мы используем псевдокласс : before , используя который, мы можем абсолютное положение нашей третьей строки между первыми двумя.
CSS
.hamburger {
положение: относительное;
дисплей: встроенный блок;
ширина: 1,25 мм;
высота: 0,8 мм;
поле справа: 0,3em;
верхняя граница: 0.2em сплошной #fff;
нижняя граница: 0.2em solid #fff;
}
.hamburger: before {
содержание: "";
позиция: абсолютная;
верх: 0,3em;
слева: 0px;
ширина: 100%;
верхняя граница: 0.2em сплошной #fff;
} Как видите, я использовал em вместо пикселей , поэтому нарисованное меню будет масштабируемым относительно размера шрифта. После того, как у нас есть этот CSS, используя приведенный ниже фрагмент HTML, мы можем создать наше гамбургер-меню.
HTML
Меню Демонстрация
Найдите полный код и демонстрацию на моей ручке на CodePen или посмотрите вставку ниже:
См. Pen CSS only Hamburger menu by Kanishk Kunal on CodePen.0
Бонусные значки CSS
Если вам нужно нарисовать больше значков с помощью только CSS, я наткнулся на этот проект github, в котором есть еще много значков на чистом CSS.
Сценарии DHTML динамического привода — Меню значков гамбургера
Описание: Это меню объединяет два популярные тенденции полноэкранного меню и использования иконки стиля «гамбургер» переключить его, чтобы создать легкое и элегантное меню сайта, удобное для мобильных устройств! Переключатель меню фиксируется на странице, и кроме отображения значок гамбургера может быть расширен для отображения дополнительных ссылок верхнего уровня.При нажатии на значок гамбургера открывается полноэкранное меню, которое занимает преимущество всего экрана для удобного отображения ссылок меню даже на устройствах с маленьким экраном.
Hamburger Icon Menu чрезвычайно компактно и легко настраивается, со всеми ссылками меню, определенными как разметка HTML на странице. Просто отредактируйте HTML для настройки ссылок.
Демо (см. Верхний правый угол страницы):
Маршрут
Шаг 1: Добавьте приведенный ниже код в раздел HEAD вашего страница:
Этот сценарий использует следующие внешние файлы.Загрузите их ниже (щелкните правой кнопкой мыши и выберите «Сохранить как»):
ВАЖНО: Ваша страница должна содержать метатег в разделе HEAD вашей страницы, чтобы
лучший мобильный опыт с этим меню.
Этот
Тег META указывает мобильным браузерам не уменьшать масштаб при отображении
веб-страница по умолчанию, что может привести к тому, что меню будет слишком маленьким для запуска.
Шаг 2: Затем добавьте следующую разметку меню в любом месте ТЕЛА вашей страницы за пределами любых других тегов, например right над закрывающим тегом
