Меню бургер 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
  Подписаться  
Уведомление о