Меню бургер css – Коллекция из 10+ анимированных «иконок-гамбургеров» для меню — CODYSHOP


22.02.2019 Facebook Twitter LinkedIn Google+ Советы художника



Гамбургер меню на CSS или JS? Часть 1

Вы здесь: Главная - JavaScript - jQuery - Гамбургер меню на CSS или JS? Часть 1

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

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

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах, позже я поясню что это.

Гамбургер меню на 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.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru//images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. 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.
  • Демо
  • Скачать
    Экспериментальное меню-гамбургер, основанное на растяжении элементов. Изменение значения и внешнего вида кнопки отображается и сменой цвета.
  • Демо
  • Скачать
    При наведении, 'гамбургер' превращается в анимированную иконку атома. Думаю, что такая реализация подходит для сайтов образовательной тематики.
  • Демо
  • Скачать
    Особенность этой иконки - нижний элемент выполнен в виде текста. Смотрится очень оригинально.
  • Демо
  • Скачать
    Анимирован не только сам переключатель, но и рамка.
  • Демо
  • Скачать

Simple Navbar Toggle To X (Vanilla JS)

    Простая анимация, основанная на исчезновении/появлении средней линии и смене угла наклона верхней и нижней.
  • Демо
  • Скачать

Drawn Hamburger Transition

    Плавный переход иконки из одного состояния в другое.
  • Демо
  • Скачать
    Анимация заключается в слиянии полос иконки и смены угла их наклона.
  • Демо
  • Скачать
    Пожалуй, одна из самых интересных реализаций. Средняя полоса плавно переходит в круглую рамку, а две крайние в кнопку закрытия.
  • Демо
  • Скачать

Hamburger Animation

codyshop.ru

Comments

Отправить ответ

avatar
  Подписаться  
Уведомление о