Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми
Css hamburgers: Hamburgers by Jonathan Suh
Содержание
Анимированные гамбургеры CSS (HTML/CSS + React)
Доступны как простые HTML/CSS или как компоненты React. Этот компонент гамбургера является частью набора пользовательского интерфейса Dashboard 3.0 с поддержкой Typescript! (гитхаб).
Спасибо за поддержку! Если вы хотите следить за моей работой, вы можете читать мои статьи на Medium или проверять мои ежедневные истории с изображениями.
Сжать
Повернуть
Стрелка вправо
Стрелка вверх
Стрелка вниз
Использование HTML/CSS
Работа с HTML очень проста и состоит из нескольких шагов.
Получение CSS
Чтобы упростить CSS, вы должны импортировать только то, что вам нужно!
Вы найдете соответствующий стиль в репозитории, следуйте по пути ./packages/__YourBurgerStyle__/dist/styles. css
Загрузите файл и свяжите его с вашим html или скопируйте в основной файл.
Разметка HTML
HTML очень простой, это пример использования анимации стрелки:
<дел>
<дел>
Чтобы отобразить открытое состояние, просто добавьте к бургеру класс «открытый».
<дел>
<дел>
Если некоторые анимации требуют направления, например стрелки, вы можете просто добавить класс, который будет обрабатывать направление, например:
<дел>
Список классов для разных направлений
burger-left (это поведение по умолчанию)
burger-right
burger-up
burger-down
List of classes for different animation
burger-arrow
burger-rotate
burger-slide
burger-slip
burger-squeeze
Использование бургеров в вашем приложении React
Каждый стиль бургеров публикуется как пакет npm отдельно, это означает, что вы импортируете только то, что необходимо.
Включить burger в ваш проект
npm install --save @animated-burgers/{burger-style} имена классов
// или с помощью пряжи
пряжа добавить имена классов @animated-burgers/{burger-style}
Используйте его в коде
// React Component
импортировать бургер из '@animated-burgers/{burger-style}'
// не забываем про стили
импортировать '@animated-burgers/{burger-style}/dist/styles.css'
...
// состояние по умолчанию, другие реквизиты передаются элементу-обертке
<Бургер {... реквизит}/>
// открытое состояние
<Бургер isOpen={ true } />
// некоторые гамбургеры, такие как стрелка, поддерживают направление
// (влево - по умолчанию, вверх, вправо, вниз)
<Направление бургера = "право" />
// По умолчанию div будет отображаться как элемент-обертка
// Вы можете передать другой компонент-обертку
<Компонент бургера="кнопка" тип="кнопка" />
// приводит к
<тип кнопки="кнопка>
<дел>
Список доступных пакетов для бургеров
@animated-burgers/burger-arrow
@animated-burgers/burger-rotate
@animated-burgers/burger-slide
@animated-burgers/burger-slip 0 0
@animated-burgers/burger-squeeze
Стилизация бургера
Вы можете изменить свойства бургера, переопределив или добавив класс. Вот несколько трюков, которые вы можете использовать с этими гамбургерами. Если вы хотите изменить другие свойства, вы всегда можете проверить исходные файлы SCSS. Их можно найти в репозитории:
// базовый стиль
пакеты/Бургер/styles.scss
// + собственный стиль
packages/{burger-style}/styles.scss
Изменение цвета
Вы можете изменить свойства бургера, переопределив или добавив класс. Вот несколько трюков, которые вы можете использовать с этими гамбургерами. Если вы хотите изменить другие свойства, вы всегда можете проверить исходные файлы SCSS.
Изменение цвета
Чтобы изменить цвет бургера, добавьте несколько строк в свой css.
Размер масштабируется на основе размера шрифта. Размеры линий задаются значениями em. Базовая линия установлена на 12 пикселей.
<дел>
<дел>
<дел>
<дел>
<дел>
<дел>
результатов в
8 фрагментов кода CSS и JavaScript, улучшающих гамбургер-меню
Эрик Карковак on CSS/JavaScript
Гамбургер-меню стало синонимом мобильных приложений и веб-сайтов. Он аккуратно скрывает элементы навигации, пока они не понадобятся пользователям. Они отлично подходят для экономии места, когда пространство на экране ограничено.
И мы также видим, что они все чаще используются на настольных устройствах. Это имеет смысл для больших, сложных меню и сценариев, где контент должен быть в центре внимания. Да, гамбургеры сейчас повсюду.
Более того, этот тип навигации невероятно гибок. Возможны различные анимации и макеты раскрытия, и это только царапины на поверхности. Дизайнеры постоянно пересматривают то, что скрывается за этим маленьким значком.
Давайте взглянем на 8 фрагментов CSS и JavaScript, которые улучшают гамбургер-меню. Вы можете быть удивлены тем, на что они способны.
CSS-анимированные гамбургеры
от Эрика Портера
Давайте начнем с чего-то простого, но важного: открытых и близких взаимодействий. Этот фрагмент содержит набор анимаций щелчка/касания. Цель состоит в том, чтобы сделать пользовательский опыт интуитивно понятным. Каждая анимация здесь делает это эффективно.
Посмотрите на гамбургеры Pen — CSS-анимация Эрика Портера
Взаимодействие с кнопками меню
Айбуке Сейлан
Здесь у нас есть фрагмент, который придает уникальный вид иконке гамбургера. Смещенные первая и третья строки выделяются, сохраняя при этом узнаваемость. Внутри есть еще вкусняшки. При нажатии на значок открывается привлекательное меню, которое появляется в левом верхнем углу. Ощущение очень похоже на контекстное меню, часто встречающееся в операционных системах.
См. «Взаимодействие с кнопкой Pen Menu». Автор Aybüke Ceylan.
Преобразование гамбургер-меню с помощью CSS.
, автор LM Gonzalves. Линии значка гамбургера превращаются в отдельные пункты меню. Это обязательно привлечет внимание пользователя (не говоря уже о том, что несколько веб-дизайнеров будут в восторге).
См. гамбургерное меню Pen Morphing с CSS от lmgonzalves
Другая концепция меню
от Rune Sejer Hoffmann
Открытие этого меню — еще один отличный пример CSS-переходов. В этом случае меню становится оверлеем с горизонтальной компоновкой. Типографика точна, как и приятные эффекты наведения.
See the Pen Еще одна концепция меню от Руне Сейера Хоффманна
Анимированный переключатель навигации и меню
от А. Джеймса Липтака
Это наложенное меню отличается уникальным поворотом. Он использует разноцветные панели, а саму навигацию размещают в центре экрана. Слева область брендинга меняет фон, но остается на одном месте. Это не только круто выглядит, но и информирует пользователей о бренде сайта. Это то, что часто теряется при реализации наложений.
См. анимацию Pen Animated Nav Toggle & Menu от A. James Liptak
Full Width Menu & SVG Animation
от Brandon Ward
Если вы хотите добавить немного веселья в свой проект, вам стоит проверить из этого фрагмента. Сочетание ярких цветов, плавных переходов и эффектов наведения делает это меню привлекательным.
См. Полноэкранное меню пера и анимацию SVG от Brandon Ward
Переключатель боковой панели CSS
от Silvestar Bistrovic
Кажется, что большинство оверлейных меню непрозрачны. Вот почему этот пример — хорошая смена темпа. При нажатии на значок гамбургера открывается красивое меню с полупрозрачным градиентным фоном. Это позволяет вам видеть часть сайта внизу, но при этом легко переходить на другую страницу.
См. Переключатель боковой панели Pen CSS от Silvestar Bistrović
Выдвижное меню навигации
от Praveen Bisht
Мы видели меню-гамбургеры, занимающие весь экран. Но как насчет меню, которое просто превращается в традиционную панель навигации? Этот слайд-сниппет делает это очень чистым и тонким способом. Есть что сказать о функции, которая просто работает, не придавая ей большого значения. Просто имейте в виду, что этому может потребоваться небольшая дополнительная работа, чтобы сделать его полностью отзывчивым.
См. навигационное меню Pen Slide Out от Praveen Bisht
Постоянно развивающийся гамбургер
Меню гамбургеров прошло долгий путь с момента своего появления.
css 
Вот несколько трюков, которые вы можете использовать с этими гамбургерами. Если вы хотите изменить другие свойства, вы всегда можете проверить исходные файлы SCSS. Их можно найти в репозитории:
Этот фрагмент содержит набор анимаций щелчка/касания. Цель состоит в том, чтобы сделать пользовательский опыт интуитивно понятным. Каждая анимация здесь делает это эффективно.
, автор LM Gonzalves. Линии значка гамбургера превращаются в отдельные пункты меню. Это обязательно привлечет внимание пользователя (не говоря уже о том, что несколько веб-дизайнеров будут в восторге).
Слева область брендинга меняет фон, но остается на одном месте. Это не только круто выглядит, но и информирует пользователей о бренде сайта. Это то, что часто теряется при реализации наложений.
При нажатии на значок гамбургера открывается красивое меню с полупрозрачным градиентным фоном. Это позволяет вам видеть часть сайта внизу, но при этом легко переходить на другую страницу.