Меню бургер css – Коллекция из 10+ анимированных «иконок-гамбургеров» для меню — CODYSHOP
22.02.2019 Советы художника
Гамбургер меню на CSS или JS? Часть 1
Вы здесь: Главная — JavaScript — jQuery — Гамбургер меню на CSS или JS? Часть 1
Наверняка вы видели на многих сайтах кнопку в виде иконки с тремя горизонтальными полосками, напоминающий гамбургер. В большинстве случаев на больших и средних разрешениях экрана эта кнопка спрятана, а появляется только на маленьких экранах.
За этой кнопкой скрываются пункты меню навигации, задумка в том, что на определенной ширине экрана, кликая по иконке, пользователь сам разворачивает меню, если ему это надо. Если не надо, то он сразу переходит к просмотру контента, не отвлекаясь на меню, поскольку оно спрятано.
Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на
Гамбургер меню на JS
1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта
Код в HTML:
<nav>
<div>
<!-- Меню гамбургер, при клике, развернутся пункты меню -->
<div>Меню</div>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Тарифы</a></li>
<li><a href="#">Продукты</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</nav>
<section>
<div>
<p>Основной контент сайта</p>
</div>
</section>
Код в CSS:
2. Вставляем иконку гамбургер в меню навигации
На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon), скачиваем в формате SVG, открываем в браузере, копируем код из веб-инспектора.Вставляем скопированный выше код вместо текста «Меню».
<div>Меню</div>
На данном этапе на десктопных разрешениях меню выглядит так, SVG иконку мы скрыли, прописав следующий код.
.menuBurger {
display: none; /* иконка гамбургер скрыта */
}
3. Переходим к медиа-запросу
На маленькой ширине экрана, от нуля до 530 пикселей. Нам надо сделать наоборот, показать иконку гамбургер меню и спрятать все пункты меню, стоящие в ряд.
@media screen and (max-width: 530px) {
.menu {
display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
} .menu li {
float: none; /* пункты меню в столбцах */
}
.menuBurger {
display: inline-block; /* иконка гамбургер видна */
}
}
4. Развернуть гамбургер меню
Что нужно сделать, перед тем, как раскрыть гамбургер меню? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а, добавим к медиа-запросу следующий код.
.menu li {
float: none;
}
Результат на скриншоте
Раскомментируем обратно display: none; — скроем вертикальное меню. Теперь дело осталось за малым – создать событие, чтобы при клике по иконке, разворачивалось и сворачивалось вертикальное меню.
Попробуйте уменьшить браузер и вы наглядно увидите, как работает гамбургер меню на JS
Продолжение следует..
- Создано 22.03.2018 12:06:00
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru//images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
myrusakov.ru
Универсальное меню гамбургер при помощи CSS
Это отличное по стилистике меню, которое появляется по клику с правой стороны, где создано в темных тонах под навигацию по сайту. Когда вы нажимаете на него, многоуровневое навигационное меню открывается в модальном окне слева. Разработанные скользящие навигационные меню могут идеально вписываться в большинство макетов и стали популярным интерфейсом большинства пользователей смартфонов. Обратите внимание, что эта статья не будет обсуждать преимущества и недостатки использования гамбургерных меню.Небольшой экскурс по материалу:
Значки гамбургеров — это те маленькие значки с тремя барами, которые вы видите в углу многих веб-сайтов и мобильных приложений. Они в первую очередь запускают передвижную навигационную панель, содержащую ссылки на страницы по всему веб-сайту. Навигационные меню с выдвижными ящиками отлично подходят для гибкого дизайна, но они также могут быть сложными для реализации. Эти советы помогут дизайнерам прийти к соглашению с самыми популярными решениями для дизайна меню.
Вообще говоря, настоящие нарушители спокойствия будут старыми смартфонами или обесцененными браузерами, такими как Internet Explorer 6 или Firefox 2. Хотя эти старые браузеры поддерживают JavaScript, они могут не поддерживать CSS рендеринг для меню поверх контента или скользящей анимации.
Примеры гамбургер-меню:
Выбор формата значка
Меню навигации для сенсорного экрана для ваших мобильных веб-приложений.
Одно из многих меню
Но в какой то момент вам придется принять, какие браузеры поддерживают а какие нет. Можно создать резервную копию с использованием условий IE, где скользящий ящик становится строковым списком ссылок.
Ваша цель должна заключаться в поддержке самого широкого разнообразия браузеров без ущерба для дизайна. Возможно, будет невозможно поддерживать IE6, но вы должны стремиться к подавляющему большинству мобильных операционных систем вместе со всеми существующими браузерами. Также попробуйте использовать Google Analytics для отслеживания того какие браузеры чаще всего используются посетителями в течение длительного периода времени.
Большинство современных браузеров поддерживают чистые CSS-меню и в основном поддерживают JavaScript. Поэтому хорошей идеей может быть использование чистого CSS для анимации с JavaScript в качестве резервной копии.
Также можете скачать архив, где будет код и стили на такой формат навигаций, где можете на бемонстраций изначально посмотреть.
Все создано при помощи базовых стилей и javascript здесь не пременяется.
Демонстрация:
zornet.ru
Коллекция из 10+ анимированных «иконок-гамбургеров» для меню — CODYSHOP
Иконка-гамбургер — стала наиболее популярным решением для отображения меню на мобильных устройствах. Благодаря компактности и оригинальным анимациям, пользоваться таким меню не только удобно, но и приятно. Здесь я буду собирать самые интересные на мой взгляд готовые решения. В будущем, список иконок для мобильного меню будет пополняться. Я постарался собрать разнообразные иконки по форме, цвету и анимации. Если вы обладаете базовыми навыками верстки, интегрировать на свой сайт не составит большого труда.
к содержанию ↑
- Одна из особенностей иконки — анимация выполнена на чистом CSS.
- Демо
- Скачать
- Экспериментальное меню-гамбургер, основанное на растяжении элементов. Изменение значения и внешнего вида кнопки отображается и сменой цвета.
- Демо
- Скачать
- При наведении, ‘гамбургер’ превращается в анимированную иконку атома. Думаю, что такая реализация подходит для сайтов образовательной тематики.
Демо- Скачать
- Особенность этой иконки — нижний элемент выполнен в виде текста. Смотрится очень оригинально.
- Демо
- Скачать
- Анимирован не только сам переключатель, но и рамка.
- Демо
- Скачать
- Простая анимация, основанная на исчезновении/появлении средней линии и смене угла наклона верхней и нижней.
- Демо
- Скачать
Drawn Hamburger Transition
- Плавный переход иконки из одного состояния в другое.
- Демо
- Скачать
- Анимация заключается в слиянии полос иконки и смены угла их наклона.
- Демо
- Скачать
- Пожалуй, одна из самых интересных реализаций. Средняя полоса плавно переходит в круглую рамку, а две крайние в кнопку закрытия.
- Демо
- Скачать
Hamburger Animation
codyshop.ru
Leave a Comment