Меню гамбургер css: Как создать гамбургер меню, используя только CSS и HTML | by Андрей Крохин

Содержание

Гамбургер меню на 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-код ссылки для форумов (например, можете поставить её в подписи):

    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

МЕНЮ-ГАМБУРГЕР, коллекция из 10+ анимированных иконок

Иконка-гамбургер — стала наиболее популярным решением для отображения меню на мобильных устройствах. Благодаря компактности и оригинальным анимациям, пользоваться таким меню не только удобно, но и приятно. Здесь я буду собирать самые интересные на мой взгляд готовые решения. В будущем, список иконок для мобильного меню будет пополняться. Я постарался собрать разнообразные иконки по форме, цвету и анимации. Если вы обладаете базовыми навыками верстки, интегрировать на свой сайт не составит большого труда.

Меню Header Navigation

Одна из особенностей иконки — анимация выполнена на чистом CSS.

Демо

Скачать

Click me! Hamburger menu

Экспериментальное меню-гамбургер, основанное на растяжении элементов. Изменение значения и внешнего вида кнопки отображается и сменой цвета.

Демо

Скачать

Atomic Hamburger Menu CSS

При наведении, ‘гамбургер’ превращается в анимированную иконку атома. Думаю, что такая реализация подходит для сайтов образовательной тематики.

Демо

Скачать

Hamburger Menu Elastic

Особенность этой иконки — нижний элемент выполнен в виде текста. Смотрится очень оригинально.

Демо

Скачать

Animated Menu Icon

Анимирован не только сам переключатель, но и рамка.

Демо

Скачать

Simple Navbar Toggle To X (Vanilla JS)

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

Демо

Скачать

Drawn Hamburger Transition

Плавный переход иконки из одного состояния в другое.

Демо

Скачать

Animated Hamburger Menu

Анимация заключается в слиянии полос иконки и смены угла их наклона.

Демо

Скачать

SVG CSS3 Menu / Burger Button

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

Демо

Скачать

Hamburger Animation

Menu «Hamburger» Icon Animations

Сразу два варианта реализации.

Демо

Скачать

CSS/HTML-меню гамбургеров с CSS — CodeRoad

Для моего класса HTML/CSS мне было поручено сделать веб-страницу и сделать ее отзывчивой. Одно из условий заключается в том, что мы должны сделать меню в стиле гамбургера, когда размер экрана соответствует размеру мобильного экрана.

Ну, я понял все, кроме того, как я буду делать выпадающее меню пунктов меню по щелчку мыши (вероятно, это невозможно только с css, так что :active или :hover будет делать). Нам не разрешается использовать какие-либо JavaScript..

Я хотел бы знать, как изменить свойство отображения списка на блокировку, когда IMG равно hovered/active.

Соответствующая часть HTML:

    <div>
    <img src="img/hamburger.png" alt="menu"/>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Last</a></li>
    </ul><!-- Einde menu items -->
    </div><!-- Einde nav -->

В CSS для экранов мобильных телефонов:

@media screen and (max-width: 500px) {

.mobile-collapse {
    width: auto;
    float: none;
}
.hide-mobile {
    display: none;
}
.nav {
    padding-left: 0%;
}
.nav ul li {
    display: none;
}
.nav img {
    display: block;
    height: 50px;
}
}

Итак, подводя итог, я хотел бы знать, как я могу изменить .nav ul li на display:block , когда .nav img завис..

html

css

Поделиться

Источник


Laurens Mäkel    

08 марта 2017 в 09:30

2 ответа




3

Я хотел бы знать, как я могу изменить .nav ul li на display:block, когда
.nav img завис

Вы должны использовать селектор братьев и сестер, тильда которого равна ~ .

Ваш код должен быть таким…

.nav img:hover ~ ul li {
  display: block;
}

Попробуй. Хорошее объяснение тильды в CSS.

Поделиться


Unknown    

08 марта 2017 в 09:34


Поделиться


nashcheez    

08 марта 2017 в 09:42


Похожие вопросы:

Ссылки не активны в меню гамбургеров CSS-only toggle-down

Я создал меню гамбургеров с переключателем CSS только для мобильных браузеров. Ссылки в меню не активны, они не кликабельны. Я подозреваю, что это какая-то проблема непрозрачности. Меню можно…

многоуровневое меню с css &html?

Я хочу создать многоуровневое меню с чистым css & html. положение меню должно контролироваться css. Кто-нибудь может мне помочь?

Изменить Положение Меню Гамбургеров CSS

Привет, я использую меню html5 off canvas, которое я получил здесь —> http://callmenick.com/_development/material-menu / В css меню гамбургеров устанавливается фиксированным в левом верхнем углу…

Я пытаюсь использовать меню гамбургеров на bulma css, но это не работает. Что случилось?

Я новичок на бульме css http://bulma.io / Я пытаюсь использовать меню гамбургеров для мобильного пользователя. Я просто следовал инструкциям на этой странице:…

Почему мое меню гамбургеров не остается правильным при нажатии?

Смотрите мой сайт: https://www.baswijdenes.com/powershell/ я не могу заставить свое меню гамбургеров оставаться правым, когда оно открыто, и меню слева от меню гамбургеров. Мне кажется, что я что-то…

Закрытие меню гамбургеров с CSS

У меня есть меню гамбургеров, встроенное в CSS, но мне нужно, чтобы оно закрывалось, когда вы нажимаете на ссылку. Это всего лишь 1-страничный сайт с anchor ссылками. Я пытался следить за проблемой…

Как настроить меню типа гамбургера с помощью CSS

Может ли кто-нибудь указать мне, как это сделать, или пример того, как настроить страницу html/css, на которой есть меню гамбургеров. Ниже у меня есть скриншоты сайта, где это было сделано. Введите…

CSS мобильные устройства и меню гамбургеров

Я разработал веб-сайт, который использует меню гамбургеров CSS для активации слайдбара со ссылками на различные веб-страницы на сайте. Я также написал приложения iPhone/andriod, которые должны иметь…

Чистое меню гамбургеров HTML и CSS не работает

Я сейчас делаю меню гамбургеров с html и css (без js), и :checked + .something не работает. Я ищу решения около 3 часов, но не могу их найти. Если бы вы помогли мне, это было бы здорово. Может быть,…

CSS: как превратить навигацию в меню гамбургеров для мобильных устройств

Я относительно новичок в современном CSS, поэтому хотел бы попросить у вас совета относительно того, как действовать, если я хочу преобразовать многоуровневое навигационное меню в меню гамбургеров…

Когда лучше использовать Меню Гамбургер?

Меню гамбургер – это иконка с тремя горизонтальными линиями (две булочки и котлета в середине), которая используется для обозначения меню. Клик/нажатие на иконку открывает навигацию.

Огромное количество постов было написано про гамбургер меню, в основном дизайнерами, которые выступают против него. Если вы всё пропустили, то почитайте статью Hidden Navigation Hurt UX Metrics, написанную NNGroup. В целом, она не о самой иконке, а о скрытии навигации за иконкой. 

Однако, в некоторых случаях гамбургер меню может стать хорошим решением.

Гамбургер в роли Второстепенной навигации

Так как главным недостатком такого меню является его незаметность, оно не рекомендуется к использованию в качестве основного. Однако, при разработке второстепенной навигации эта модель может стать подходящим решением. Если основная навигация представляет собой Call to Action кнопки на экране (или нечто подобное), то гамбургер меню может стать неплохим местом для второстепенной навигации.

Посмотрите на главный экран Uber’а в качестве примера:

Карта и поиск — самые главные элементы навигации на экране, поэтому они всегда видны.

Так как всё на главном экране предназначено для вызова такси, такие второстепенные опции как “История” и “Настройки” могут быть скрыты за “гамбургером” (эти функции вряд ли будут регулярно использоваться пользователем приложения). Иконка гамбургер не отвлекает пользователей от основной задачи и все равно предоставляет доступ к дополнительным функциям.

В этом случае:

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

В общем, если вы решаете, использовать гамбургер или нет, то вспомните “правило 80%”. Функции, которые вы собираетесь поместить за иконку гамбургера, используются реже чем в 80% обычного использования? Если ответ положительный, то добавлять их в меню вполне нормально.

Заключение

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


Перевод статьи When To Use a Hamburger Menu

Автор оригинального текста Nick Babich

Фиксированное гамбургер-меню

.mobile div {

    display: block;

    position: fixed;

    bottom: 16px;

    right: 16px;

    background-color: #337AB7;

    height: 50px;

    width: 50px;

    border-radius: 50%;

    z-index: 9999999;

    border: 4px solid #BFE2FF;

    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);

    cursor: pointer;

    box-sizing: content-box;

}

.mobile div span {

    display: block;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 30px;

    height: 4px;

    background-color: #fff;

    border-radius: 13px;

    transition-duration: .4s;

}

.mobile div span:nth-child(1) {

    top: 14px;

}

.mobile div span:nth-child(2) {

    top: 23px;

}

.mobile div span:nth-child(3) {

    bottom: 14px;

}

.mobile div.active span:nth-child(1) {

    transform: translate(-15px, 9px) rotate(-45deg);

}

.mobile div.active span:nth-child(2) {

    transition-duration: 0s;

    opacity: 0;

}

.mobile div.active span:nth-child(3) {

    transform: translate(-15px, -9px) rotate(45deg);

}

.mobile nav {

    display: block;

    position: fixed;

    bottom: 16px;

    right: 16px;

    height: 50px;

    width: 50px;

    border-radius: 50%;

    z-index: 9999990;

    transition-duration: .4s;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.mobile nav.open {

    background-color: rgba(0, 0, 0, 0.9);

    width: 100vw;

    height: 100vh;

    right: 0px;

    bottom: 0px;

    border-radius: 0;

}

.mobile nav ul {

    display: none;

}

.mobile nav ul.show {

    display: flex;

    flex-direction: column;

    list-style: none;

    margin: 0;

    padding: 0;

}

.mobile ul li {

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: transparent;

    width: 100%;

    opacity: 0;

    animation-name: fadein;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}

.mobile ul li:not(:last-child) {

    margin-bottom: 22px;

}

.mobile ul li a {

    font-size: 24px;

    font-family: ‘Roboto Condensed’, sans-serif;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    text-decoration: none;

    color: #fff;

}

@keyframes fadein {

    0% {

        opacity: 0;

        

    }

    100% {

        opacity: 1;

    }

}

Адаптивное меню CSS — 20 полезных сниппетов

Приведенные в этой статье сниппеты адаптивного кода идеально подойдут для любого типа макетов. Вы найдете в этом перечне вертикальные и горизонтальные меню для сайта, выпадающие и боковые меню с различными анимационными эффектами. Адаптивный дизайн является техникой, в которой каждый год появляются новые тенденции. Эти сниппеты послужат дизайнерам в качестве отправной точки для многих веб-проектов.

Кроме дизайна этот сниппет задает адаптивное выпадающее меню. Панель навигации при стандартном окне занимает обычное горизонтальное положение.
На меньших контрольных точках меню располагается на весь экран. При наведении курсора на основные элементы меню на экран выводятся пункты подменю, имеющие более светлый серый фон. Это решение идеально подойдет для сайтов, на которых не слишком много ссылок на разделы. Таким образом они смогут отображаться на странице, как блок элементов.

Этот полностью адаптивный макет портфолио включает в себя простую, но эффективную панель навигации. Когда окно просмотра уменьшается до определенной контрольной точки, пункты адаптивного меню для сайта скрываются, на экране остается только кнопка переключения меню. Пользователь может нажать на нее, чтобы развернуть или скрыть меню, которое разворачивается внизу под заголовком.

Этот сниппет кода содержит несколько контрольных точек и устанавливается поверх Bootstrap.
При больших размерах окна просмотра ссылки навигации располагаются рядом с логотипом, а на меньших контрольных точках они смещаются вниз в собственную панель. Когда окно просмотра становится еще меньше, ссылки «прячутся» под переключатель меню. Это распространенный метод работает во всех браузерах.

Эта плоская адаптивная панель навигации с выпадающими меню создана на чистом CSS. В адаптивном состоянии панель навигации превращается в плавающее меню, в котором ссылки выводятся в виде блока. Каждое внутреннее выпадающее меню также может быть переключено, чтобы предоставить доступ к пунктам подменю.

Это выпадающее меню для сайта является одним из самых уникальных примеров навигации. Вы видите светло-зеленую вкладку, при нажатии на которую вверху разворачивается панель навигации со ссылками меню. Каждая ссылка имеет плавающую ширину и подстраивается под любой размер экрана.
На небольших экранах используется тот же эффект, но меню отображается вертикально, а не горизонтально. Обратите внимание на красивый эффект анимации, который управляется с помощью класса CSS .active.

На первый взгляд это меню кажется стандартным: традиционные ссылки, гамбургер-переключатель меню и плоская цветовая гамма. Хотя оно лишено гламурного блеска, меню работает и работает удобно и просто. Весь его код написан на Haml и SASS.

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

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

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

Флексбокс CSS3 — это термин, используемый разработчиками, чтобы обозначить гибкую модель макетов CSS3. Мы уже публиковали полное руководство по Flexbox, с которым я советую вам ознакомиться.
Это меню построено на Flexbox, в котором ссылки распределяются в панели равномерно, независимо от размера экрана. Весь код написан на чистом HTML и CSS, реализована поддержка выпадающих меню для сайта.

Если вы любите эффекты анимации, то можете воспользоваться этим решением. По умолчанию ссылки выравниваются рядом, поддерживаются выпадающие подменю.
После уменьшения окна просмотра панель навигации скрывается под ссылкой переключения. Меню преобразуется в большой блок, который после выводится на экран с помощью анимации.

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

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

«Хлебные крошки» не слишком популярны среди дизайнеров и разработчиков, но их вполне можно использовать для интерфейса навигации. Эти хлебные крошки реализованы без эффектов анимации, зато написаны на чистом CSS.

Посмотреть демо

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

Разработка многоуровневой навигации требует тщательного планирования. Этот сниппет является не только работоспособным, но и поддерживает адаптивные эффекты через CSS. Когда панель навигации уменьшается, пользователь может кликнуть по иконке, расположенной рядом с определенным пунктом меню и отобразить скрытое подменю. Эта техника позволяет поддерживать управляемость кода.

Интерфейс меню был разработан как имитация стандартного решения iOS с панелями навигации в верхней и нижней частях экрана. В этом сниппете был использован CSS-флексбокс, с помощью которого ссылки многоуровневого меню для сайта и элементы страницы пропорционально изменяют свой размер, чтобы соответствовать размеру окна браузера.

Этот интерфейс содержит равные по ширине блоки ссылок панели навигации. Каждая ссылка занимает одинаковый процент экрана по горизонтали до тех пор, пока не будет достигнута определенная малая контрольная точка. После этого панель меню скрывается под иконкой переключателя. Компактный, красивый и функциональный код.

В этом сниппете тот же эффект был воспроизведен в сочетании адаптивной функцией. Это меню удивительно гибкое и достаточно уникальное по сравнению с другими примерами адаптивных решений.

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

Посмотреть демо

Удивительное разнообразие форм и элементов, доступных в адаптивном дизайне, способно привести в волнение даже самого искушенного разработчика. Система навигации часто является одной из самых сложных областей адаптивного веб-дизайна, но эти сниппеты станут для вас отправной точкой, отталкиваясь от которой вы сможете генерировать собственные идеи.

Данная публикация является переводом статьи «20 Useful CSS Snippets for Responsive Menus» , подготовленная редакцией проекта.

Анимированная иконка «Гамбургер» на CSS


Автор admin На чтение 3 мин. Просмотров 335 Опубликовано

Вы можете воспользоваться 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

17

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, чтобы перевернуть псевдо-элементы и скрыть среднюю плитку  для  создания нашей формы Примечание:  Я использую transition и transform, которые поддерживаются в IE10 + и других браузерах. Если вы хотите поддержку старых браузеров  IE, то вы можете использовать запасной вариант JQuery или другие решения JavaScript .

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.active span {

    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);

}

 

Примечание: CodePen использует -prefix-free,  автоматически добавляя необходимые префиксы.

Для того чтобы анимировать иконку мы воспользуемся JavaScript чтобы переключать  класс гамбургера когда пользователь на него нажимает.

Примечание:  classList c ограниченной поддержкой ( IE10 + и другие браузеры ) . Вы можете использовать jQuery snippet или воспользоваться полифилом  HTML5 Please. Ниже приведен пример  «гамбургера»  вместе с  анимацией. Вам нужно нажать на гамбургер, чтобы вызвать анимацию.

See the Pen XjqzPg by Ruslan (@rkaliev) on CodePen.0

 Надеюсь,  вам понравился  этот краткий обзор с псевдо-элементами и анимацией. Я не стал вдаваться в подробности, как именно все вместе организовано. Для того чтобы узнать глубже эти понятия  вы можете посмотреть следующие ресурсы :

  1.  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

3 шага Простое отзывчивое меню гамбургеров на чистом CSS

Добро пожаловать в руководство о том, как создать простое адаптивное гамбургер-меню на чистом CSS. Да, в Интернете есть множество других гамбургерных меню, но некоторые из них все еще требуют использования Javascript. Итак, вот оно, меню, основанное исключительно на CSS, а не на одной строчке Javascript. Читайте дальше, чтобы узнать, как его построить!

ⓘ Я включил zip-файл со всем исходным кодом в начале этого руководства, так что вам не нужно копировать и вставлять все… Или, если вы просто хотите погрузиться прямо сейчас.

СОДЕРЖАНИЕ

СКАЧАТЬ И ПРИМЕЧАНИЯ

Во-первых, вот ссылка для загрузки кода примера, как и было обещано.

ПРИМЕР КОДА СКАЧАТЬ

Щелкните здесь, чтобы загрузить исходный код, я выпустил его под лицензией MIT, так что не стесняйтесь создавать на его основе или использовать в своем собственном проекте.

БЫСТРЫЕ СООБЩЕНИЯ

Если вы заметили ошибку, пожалуйста, оставьте комментарий ниже.Я тоже стараюсь отвечать на вопросы, но это один человек против всего мира … Если вам срочно нужны ответы, просмотрите мой список веб-сайтов, чтобы получить помощь в программировании.

ГАМБУРГЕР МЕНЮ ДЕМО

Вперед. Измените размер окна и посмотрите, как работает гамбургер-меню.

КАК СОЗДАТЬ ГАМБУРГЕРНОЕ МЕНЮ

В наши дни создать гамбургер-меню с помощью современного CSS не так уж и сложно…

ШАГ 1) HTML

Индекс

.html

  

  

Часть HTML должна быть довольно простой:

  1. Сначала мы создаем оболочку для меню навигации
  2. Далее следует использование и в качестве кнопки гамбургера. Для новичков: & # 9776; — это HTML-символ «трехстрочного значка гамбургера».
  3. Наконец, мы помещаем пункты меню внутрь оболочки
    .

Вот и все, без использования JavaScript.

ШАГ 2) CSS ДЛЯ БОЛЬШИХ ЭКРАНОВ

ветчина-меню.css

  / * [НА БОЛЬШОМ ЭКРАНЕ] * /
/ * (A) ОБЕРТКА * /
#hamnav {
  ширина: 100%;
  фон: # 000;
}

/ * (B) ЭЛЕМЕНТЫ ГОРИЗОНТАЛЬНОГО МЕНЮ * /
#hamitems {display: flex; }
#hamitems a {
  flex-grow: 1;
  гибкая основа: 0;
  отступ: 10 пикселей;
  цвет белый;
  текстовое оформление: нет;
  выравнивание текста: центр;
}
#hamitems a: hover {background: # 401408; }

/ * (C) СКРЫТЬ ГАМБУРГЕР * /
#hamnav label, #hamburger {display: none; }
  

CSS — это то место, где происходит вся магия. Это может показаться немного сложным, но давайте рассмотрим его шаг за шагом.Начнем с того, как отобразить «обычную строку меню» на больших экранах:

  1. Не требующее пояснений, полноразмерное меню навигации.
  2. Затем мы устанавливаем #hamitems на display: flex . Добавление flex-grow: 1 и flex-base: 0 к пунктам меню автоматически распределяет их одинаково.
  3. Поскольку нам не нужен значок гамбургера на большом экране, мы скрываем его, прикрепляя дисплей : нет к #hamnav label и #hamburger .

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

ШАГ 3) АКТИВНЫЙ CSS ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ

ham-menu.css

  / * [НА МАЛЕНЬКИХ ЭКРАНАХ] * /
@media screen и (max-width: 768 пикселей) {
  / * (A) ПЕРЕРЫВ В ВЕРТИКАЛЬНОЕ МЕНЮ * /
  #hamitems a {
    размер коробки: рамка-рамка;
    дисплей: блок;
    ширина: 100%;
    граница-верх: твердое тело 1px # 333;
  }
  / * (B) ПОКАЗАТЬ ЗНАЧОК ГАМБУРГЕРА * /
  #hamnav label {
    дисплей: встроенный блок;
    цвет белый;
    фон: # a02620;
    стиль шрифта: нормальный;
    размер шрифта: 1.2em;
    отступ: 10 пикселей;
  }

  / * (C) ПЕРЕКЛЮЧЕНИЕ ПОКАЗАТЬ / СКРЫТЬ МЕНЮ * /
  #hamitems {display: none; }
  #hamnav input: проверено ~ #hamitems {display: block; }
}  

Наконец, мы добавляем некоторые изменения стиля на маленьком экране, чтобы творить магию реагирования:

  1. Преобразуйте горизонтальное меню в вертикальное, добавив #hamitems a {width: 100%}
  2. Показать значок гамбургера с меткой #hamnav {display: inline-block} .
    • Обратите внимание — мы показываем только ярлык для гамбургера , флажок остается скрытым.
    • Флажок по-прежнему будет работать, когда пользователь щелкнет ярлык .
  3. Немного сбивает с толку, но именно здесь происходит волшебство.
    • По умолчанию #hamitems {display: none; } скроет пункты меню.
    • #hamnav input: проверено ~ #hamitems {display: block; } на простом английском - отображать пункты меню, когда установлен скрытый флажок .

КЛЕЙКАЯ ПАНЕЛЬ МЕНЮ

Хотите, чтобы строка меню была постоянно закреплена в верхней части экрана, когда пользователь прокручивает ваш сайт вниз? Просто добавьте позицию : липкий на панель навигации, и это должно творить чудеса.

theme.css

  #hamnav {
  положение: липкое;
  верх: 0;
}  

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

ГАМБУРГЕР БОЛЬШЕ?

Значок гамбургера - это символ HTML. Да, изменить размер так же просто, как установить label [for = "hamburger"] {font-size: XX em} .

YOUTUBE TUTORIAL

ИНФОГРАФИЧЕСКИЙ ЛИСТ

Гамбургерное меню на чистом CSS (нажмите, чтобы увеличить)

КОНЕЦ

Спасибо, что прочитали, и мы подошли к концу этого руководства.Я надеюсь, что это помогло вам создать лучшую систему меню для вашего проекта, и если вам есть что добавить к этому руководству, не стесняйтесь оставлять комментарии ниже. Удачи и удачного кодирования!

Cool CSS Hamburger Menu Icons и их анимация

Дизайнеры веб-сайтов всегда хотят модернизировать, минимизировать и делать свои веб-сайты более привлекательными. Одним из элементов дизайна, который вошел в большинство макетов веб-сайтов, является гамбургер-меню CSS.

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

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

Значки меню «Гамбургер» - отличная концепция дизайна, экономит место .

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

Это также отличный элемент дизайна для современных веб-сайтов и веб-сайтов с минималистичным дизайном. Хотя это всего три строки, дизайнеры могут добавлять различные анимации и создавать разные варианты .

Если вы хотите внедрить на своем веб-сайте гамбургер-меню CSS, обратите внимание на следующие варианты. Они предлагают уникальные гамбургер-меню, которые обязательно понравятся посетителям.

Автор: Filippo

В этом значке меню в виде гамбургера используются HTML, CSS и JavaScript.Он имеет анимированный эффект, чтобы повернул три строки в X и обратно в три строки.

Анимация, созданная с использованием velocity.js, гладкая и чистая.

Кнопка # 3

Автор: Amli

Амли также создал кнопку меню HTML, CSS и JavaScript. В нем две строки вместо трех, которые исчезают и появляется X.

Автор: Тамино Мартиниус

Кодовое перо предлагает четыре различных анимации гамбургер-меню.

Два превращают кнопку в крестик. Два других превращают их в стрелки.

Открыть Закрыть

Автор: Vineeth.TR

Этот автор предоставляет два анимированных варианта гамбургер-меню на чистом CSS.

Гамбургер Икона

Автор: Пранджал Саксена

Это кодовое перо предлагает отзывчивый значок гамбургера и меню с анимированным отскоком .

Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

WoW ваших клиентов, создавая инновационные и быстро реагирующие веб-сайты
без опыта программирования.Slider Revolution
позволяет привлечь к вам поток клиентов за модным дизайном веб-сайтов.

Автор: rosalieelphick

Вот четыре меню на чистом HTML и CSS, которые крутятся, крутятся и переключаются.

Бургеры Flippin ’

Автор: Микаэль Айналем

Эти варианты меню для гамбургеров выглядят так, будто кто-то переворачивает бургеры на гриле .

Автор: Джесси Коуч

Jesse Couch предлагает четыре значка гамбургер-меню с этим кодовым пером.

Автор: Youri Pailloux

Это гамбургер-меню превращается в в меню строки заголовка. Он имеет цвет фона наполовину белый и наполовину синий.

Автор: Джек Томсон

Джек Томсон добавляет немного особого изюминки этой кнопочке для гамбургера. Он прыгает в воздух и попадает в положение X.

CSS Challenge - День 2

Автор: Елица Димитрова

Используя JS, HTML и CSS, эта кнопка имеет забавную анимацию и приятный цвет фона.

Автор: Рис Мэтью П

Вот простая кнопка меню гамбургера. Он использует псевдоэлемент: after, который создает эффект выделения .

Автор: Джошуа Уорд

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

Автор: Зои Гилленуотер

Это кодовое перо предлагает кнопку с изображением гамбургера и меню. Он использует flexbox для изменения размера содержимого , чтобы поле меню не мешало просмотру страницы содержимого.

Гамбургер анимация

Автор: Аарон Икер

Аарон Икер предлагает совершенно новый вид кнопки меню гамбургеров. Трехстрочный значок вращается, образуя круг, содержащий X.

Автор: Джош Фабин

Вот еще один простой вариант значка меню гамбургера.

Автор: Брендан Палмер

Это значок вращающегося гамбургер-меню на чистом CSS с меню, заполняющим всю страницу.

Автор: Himalaya Singh

Когда пользователи взаимодействуют с этой кнопкой, слово «меню» происходит от традиционного значка гамбургера.

Автор: Мэтью Блод

Это кодовое перо включает в себя тринадцать гамбургерных меню, все в разных вариантах.

Автор: Лейф Риксхайм

Эта ручка с чистым кодом CSS помещает значок меню гамбургера в правый верхний угол с боковой панелью скользящего меню .

Автор: Yacine

Вот гамбургер-меню с мини-анимацией. Это код HTML и CSS, но его можно использовать с JavaScript.

Кнопка меню и анимация преобразования горизонтального многоточия

Автор: Himalaya Singh

Это кодовое перо превращает три строки значка меню гамбургера в три точки .

Автор: Каталин Рошу

Catalin Rosu представляет собой гибкое раскрывающееся меню с этой кодовой ручкой.

Автор: Лукас Беббер

Это кодовое перо отображает круглый значок меню гамбургера. Одним щелчком мыши он расширяется в на несколько кружков с параметрами меню.

Гамбургерное меню - CSS и jQuery

Автор: rv7

Представленная здесь кнопка гамбургера включает всплывающее меню. Он находится в левом верхнем углу веб-сайта.

Звездные войны Toggle Icon Animation

Автор: Риза Сельчук Сайдам

Вот кнопка для гамбургера в стиле «Звездных войн», состоящая из световых мечей .

Автор: jun xu

Это традиционная кнопка меню гамбургера с рамкой круга и ярко-красным крестиком. Она использует HTML, CSS и JavaScript, чтобы она работала плавно.

Анимированная иконка «Гамбургер»

Автор: Стивен Фабр

Вот еще один простой значок меню гамбургера с анимацией, которая переключает его с трехстрочного на X.

Эффект переключения Frosty Nav

Автор: Грэм Уилсдон

Значок гамбургера Frosty nav, представленный здесь, был специально создан для мобильных устройств. Когда пользователи щелкают по значку, меню застывает на странице .

Анимация гамбургера и тройной цвет фона с использованием CSS

Автор: Himalaya Singh

Когда пользователи нажимают на эту кнопку гамбургера, она превращается в X. Это также меняет цвет фона всего интерфейса.

Автор: Тамино Мартиниус

Используя HTML, CSS и JS, эта анимированная кнопка гамбургера в формате SVG довольно забавна.

Автор: Evren

В то время как другие стили кнопок гамбургера имеют анимацию только при нажатии, у этого она есть при наведении на .

Нарисованный гамбургер Transition

Автор: Джесси Коуч

Это гамбургер-меню с медленным и плавным переходом и элегантными цветами лучше всего подходит для стильных веб-сайтов.

Автор: Елена Йованович

Вот значок гамбургер-меню на чистом CSS с левым скользящим меню вне холста. Такой дизайн позволяет разработчикам добавлять содержимое подменю.

Автор: Арьян Джассал

Традиционный трехстрочный значок меню «купается» на белом фоне. Дизайн отображает его в правом нижнем углу заголовка веб-сайта.

Гамбургер

Автор: Микаэль Айналем

Без JavaScript, это вращающаяся кнопка гамбургер-меню на чистом HTML и CSS.

Автор: Alex Coven

У этой кнопки атомарного гамбургера есть две анимации.

При наведении курсора три линии превращаются в атомную частицу . Если пользователь нажимает и удерживает, он превращается в X.

Автор: Ахмед Хамед

В правом углу находится значок меню гамбургера. Когда пользователь нажимает на нее, цвет фона страницы становится черным.

Автор: Bilal.Rizwaan

Эта кнопка-гамбургер использует CSS для преобразования трех строк в X при наведении курсора.

гамбургер (версия 1)

Автор: Тамино Мартинус

Это еще одна кнопка гамбургера, которая превращается в X при наведении курсора.

Автор: Майкл Леонард

Это выглядит просто, но в этом дизайне используется много слоев анимации и переходов. Он использует HTML, CSS и JavaScript для бесперебойной работы.

Значок меню гамбургера отображается в левом углу экрана. При наведении курсора появляется меню.

Полноэкранная навигация

Автор: Маркус Бизал

Используя эффекты наложения , эта кнопка-гамбургер превращает весь интерфейс в красочное меню.

Автор: Чарльз

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

При щелчке превращается в картофель фри.

Автор: Микаэль Айналем

Это простая кнопка-гамбургер с чистым CSS.

Автор: Imgonzalves

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

При нажатии кнопка превращается в кнопку выхода, так как она также открывает меню.

CSS анимированный значок гамбургера

Автор: Elijah Manor

Elijah Manor представляет собой простую и классическую черно-белую кнопку меню гамбургера. Он использует HTML, CSS и JavaScript.

Автор: Серджио Андраде

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

Автор: Сил ван Дипен

Вот четыре кнопки меню на чистом CSS с разной анимацией.

CSS анимированный значок гамбургера

Автор: Брайан

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

Автор: Майкл Смарт

Если вы согласны с Майклом Смартом и не думаете, что три линии точно представляют гамбургер, используйте вместо этого эту кнопку меню.

Автор: Vikram

Используя анимацию CSS и SVG, эти кнопки меню по-разному реагируют на взаимодействие.

Анимация значков гамбургеров

Автор: Rosa

Если вы еще не видели достаточно разнообразия, ознакомьтесь с этими двенадцатью анимациями гамбургер-меню CSS.

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

Мы также писали о нескольких связанных предметах, таких как карточки CSS, текстовая анимация CSS, меню HTML и CSS, вкладки HTML и CSS, примеры флажков CSS, конструкции окон поиска CSS, шаблоны форм входа в систему Bootstrap, эффекты наведения курсора CSS и формы HTML и CSS.

51 CSS Hamburger Menu Icons

Free HTML and CSS hamburger menu icons . Обновление коллекции за март 2019 года. 13 новинок.

  1. Значки и наборы значков CSS
  2. CSS Пунктирные значки меню
  3. CSS Иконки социальных сетей
  4. 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

Преобразование гамбургера в 3D с помощью HTML, CSS и JS.

Демо-изображение: Click Me! Гамбургерное меню

Click Me! Гамбургер Меню

Оригинальный снимок https://dribbble.com/shots/3323188-Experimental-Hamburger-Menue
Изготовил Александр Изуменко
2 марта 2017 г.

Автор
  • Курт Петрек
О коде

Помощник по приготовлению гамбургеров на полсекунды

Витрина гамбургер-меню.

Демонстрационное изображение: Анимация значка гамбургера

Анимация значка гамбургера

12 анимаций иконок гамбургеров.
Сделано Rosa
6 ноября 2016 г.

Демонстрационное изображение: Меню атомного гамбургера CSS

Меню атомного гамбургера CSS

Атомарное гамбургер-меню HTML и CSS.
Сделано Alex Coven
10 октября 2016 г.

Демонстрационное изображение: Анимация значка гамбургера

Анимация значка гамбургера

Анимация иконок для гамбургеров в HTML, CSS и JavaScript.
Сделано Карлосом
13 августа 2016

Демонстрационное изображение: Анимированный бургер / Значок меню

Анимированный бургер / Значок меню

HTML, CSS и JavaScript анимированный значок бургера / меню.
Сделано Николасом Смитом
31 июля 2016 г.

Демо-изображение: Эластичное меню для гамбургеров

Эластичное меню для гамбургеров

Эластичное меню гамбургера с HTML, CSS и JavaScript.
Сделано Давиде Кантелли
6 июля 2016 г.

Демо-изображение: 20 кнопок меню для гамбургера

20 кнопок меню для гамбургера

Кнопка меню для гамбургера.Стилизовано и анимировано с помощью чистого CSS.
Сделано Иньси Чен
5 июня 2016 г.

Демонстрационное изображение: Анимированный значок меню

Анимированный значок меню

Анимированный значок меню, переключающийся между гамбургером для открытия и X для выхода.
Сделано Эриком Грюча
27 мая 2016 г.

Демонстрационное изображение: Простое переключение панели навигации на X (Vanilla JS)

Простое переключение панели навигации на X (Vanilla JS)

Простое решение CSS и JS для превращения стандартного «гамбургера» Navbar в X при нажатии, а затем обратно в гамбургер при нажатии.Не требует зависимостей, написан на ванильном JS.
Сделано Джозефом Дженгареллой
3 апреля 2016 г.

Демонстрационное изображение: Анимация значка меню

Анимация значка меню

Анимация значков меню с помощью HTML, CSS и JavaScript.
Сделано Мариусом Балаем
23 марта 2016 г.

Демонстрационное изображение: CSS (SASS) Анимация гамбургерного меню

CSS (SASS) Анимация гамбургерного меню

Небольшая анимация при наведении курсора на значок меню гамбургера.
Сделано Дереком Морашем
11 января 2016 г.

Демонстрационное изображение: Значок меню SVG

Значок меню SVG

Значок меню Codrops SVG с всплывающим сообщением.
Сделано в Popmotion
12 ноября 2015 г.

Демонстрационное изображение: Расширяющийся значок навигации по гамбургеру

Расширяющийся значок навигации по гамбургеру

Расширяющееся меню гамбургера, которое отображает назначение кнопки более четко, чем типичный значок меню гамбургера.
Сделано Райаном Кэнфилдом
11 мая 2015 г.

Демонстрационное изображение: Анимация гамбургерного меню

Анимация гамбургерного меню

Еще одна анимация гамбургер-меню.
Сделано Себастьяном Поппом
2 апреля 2015 г.

Демонстрационное изображение: переход отрисованного гамбургера

Переход отрисованного гамбургера

Больше удовольствия с переходами значков гамбургера.
Сделано Джесси Коуч
4 сентября 2014 г.

Адаптивное меню гамбургеров вне холста на чистом CSS | автор: Марк Карон

Создание прогрессивно улучшенного мобильного меню, работающего без 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 у вас есть несколько вариантов:

  1. Использовать радио или флажки
  2. Используйте псевдокласс : 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, разработке и тестировании доступности в целом, я понял несколько вещей:

  1. JavaScript определенно имеет свое место и должен быть частью любого надежного пользовательского шаблона доступности.
  2. За исключением ориентиров ARIA, для правильного использования ARIA требуется JavaScript. И многие из атрибутов, которые я использовал, например [aria-extended] , лучше оставить для JavaScript, чтобы добавить его после загрузки, а не добавлять его непосредственно в разметку.Эта концепция следует хорошей практике прогрессивного улучшения - состояния и свойства ARIA вместе с JavaScript являются обновлением и должны обрабатываться на отдельном уровне.
  3. Раньше я не обрабатывал фокус должным образом, так как фокус исчезал при переходе по визуально скрытым ссылкам (при свертывании). Я добавил дисплей : нет; в меню CSS, чтобы исправить это.

Итак, если вы реализовали предыдущую версию моего гамбургерного меню на чистом CSS Off-Canvas, пожалуйста, подумайте об обновлении ее до этой более простой и доступной версии!

Отзывы / критические замечания, комментарии и вопросы всегда приветствуются.

Bootstrap 4 Гамбургерное меню - примеры и руководство. Базовое и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

    

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    

Создание морфируемого гамбургерного меню с помощью CSS - Scotch.io

Недавно я нашел этот потрясающий дриблинг Виталия Рубцова, и я не мог удержаться от желания попробовать его реализовать 🙂

В этом руководстве я объясню весь процесс того, как сделать это только с помощью CSS, без использования единой строчки JavaScript.Итак, мы увидим некоторые приемы CSS (и SCSS), которые позволят нам добиться почти такой же плавности анимации, как анимированный gif.

Вот CodePen того, что мы построим:

Начнем со структуры HTML, которую мы будем использовать. См. Комментарии для лучшего понимания.

    

Теперь давайте добавим несколько основных стилей, чтобы добиться желаемого внешнего вида.Код довольно прост.

 

* {
  размер коробки: рамка-рамка;
}

html, body {
  маржа: 0;
}

тело {
  семейство шрифтов: без засечек;
  цвет фона: # F6C390;
}

a {
  текстовое оформление: нет;
}

.container {
  положение: относительное;
  маржа: 35 пикселей авто 0;
  ширина: 300 пикселей;
  высота: 534 пикселей;
  цвет фона: # 533557;
  переполнение: скрыто;
}  

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

Нужный нам HTML уже на месте. И стиль, в котором это работает, может быть примерно таким:

 
#переключать {
  дисплей: нет;
}


#toggle: checked {
  

  
  & ~ .nav {
  }
}  

Чтобы создать закрытое состояние, нам нужно преобразовать пункты меню в строки, чтобы составить значок меню гамбургера. Мы можем придумать несколько способов осуществить это преобразование. Мы решили сделать это так:

Начать с JavaScript
бесплатно!

И это код, чтобы заставить его работать:

  $ продолжительность перехода: 0.5 с;


.nav-item {
  положение: относительное;
  дисплей: встроенный блок;
  плыть налево;
  ясно: оба;
  цвет: прозрачный;
  размер шрифта: 14 пикселей;
  межбуквенный интервал: -6,2 пикселей;
  высота: 7 пикселей;
  высота строки: 7 пикселей;
  текст-преобразование: прописные буквы;
  белое пространство: nowrap;
  преобразовать: scaleY (0,2);
  переход: $ transition-duration, непрозрачность 1 с;

  
  &: nth-child (1) {
    межбуквенный интервал: -8 пикселей;
  }

  
  &: nth-child (2) {
    межбуквенный интервал: -7 пикселей;
  }

  
  &: nth-child (n + 4) {
    межбуквенный интервал: -8 пикселей;
    маржа сверху: -7 пикселей;
    непрозрачность: 0;
  }

  
  &:до {
    позиция: абсолютная;
    содержание: '';
    верх: 50%;
    слева: 0;
    ширина: 100%;
    высота: 2 пикселя;
    цвет фона: # EC7263;
    преобразовать: translateY (-50%) scaleY (5);
    переход: $ transition-duration;
  }
}  

Обратите внимание, что здесь мы разместили только основные стили для элементов навигации, что является самой важной частью.Вы можете найти полный код на Github.

Чтобы создать открытое меню, нам необходимо восстановить элементы навигации со строк до обычных текстовых ссылок, среди других незначительных изменений. Посмотрим, как это сделать:

  $ Длительность перехода: 0,5 с;

#toggle: checked {

  
  & ~ .nav {

    
    .nav-item {
      цвет: # EC7263;
      межбуквенный интервал: 0;
      высота: 40 пикселей;
      высота строки: 40 пикселей;
      margin-top: 0;
      непрозрачность: 1;
      преобразовать: scaleY (1);
      переход: $ transition-duration, непрозрачность 0.1с;

      
      &:до {
        непрозрачность: 0;
      }
    }
  }
}  

Если мы присмотримся к гифке, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать это и в CSS! В основном нам нужно выбрать каждый элемент (используя : nth-child ) и установить постепенно увеличивающуюся задержку перехода . Но это, безусловно, повторяющаяся работа. А что, если у нас будет больше предметов? Не волнуйтесь, мы можем сделать это лучше с помощью магии SCSS:

  $ Товаров: 4;
$ transition-delay: 0.05с;

.nav-item {

  
  @ for $ i от 1 до $ items {
    &: nth-child (# {$ i}) {
      $ delay: ($ i - 1) * $ transition-delay;
      задержка перехода: $ delay;
      &:до {
        задержка перехода: $ delay;
      }
    }
  }
}  

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

Обратите внимание, что с помощью этого кода мы получим желаемое поведение смещения для анимации close .Нам нужно вычислить задержку $ , немного отличающуюся для открытой анимации , чтобы получить обратно смещенный переход. Просто так:

  $ delay: ($ items - $ i) * $ transition-delay;  

И мы закончили с нашим модным меню! Мы также добавили несколько фиктивных элементов, как в анимированной гифке, и здесь вы можете увидеть финальную ДЕМО.

Пока что мы создали классное и функциональное меню только с помощью CSS. Однако, если вы не поддерживаете систему переключения CSS, ее можно без особых усилий заменить несколькими строками JavaScript.

Вы можете найти полный код в репозитории Github, а также поиграть с ним прямо на Codepen.

Мы надеемся, что это руководство вам понравилось и вы сочли его полезным!

Понравилась эта статья?

Подпишитесь на @lmgonzalves в Twitter

Что такое кнопка гамбургера и как она работает?

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

Теперь уже знакомая функция на веб-сайтах по всему миру, продолжаются дискуссии о преимуществах и потенциальных недостатках этой кнопки, похожей на бургер, в дизайне веб-сайтов.

Итак, в этом руководстве мы углубимся в детали и поместим кнопку бургера под решетку: что такое кнопка гамбургера? Для чего его использовать? Зачем возиться с этим стилем кнопки и как сделать его с помощью CSS? Давайте копаться.

Что такое кнопка гамбургера?

Кнопка гамбургера, названная так из-за визуального сходства с продуктом питания, представляет собой тип кнопки, распространенный на веб-сайтах и ​​в приложениях, особенно в мобильных средах.Это значок, состоящий из трех параллельных горизонтальных линий, часто закругленных на концах.

Кнопки гамбургера обычно размещаются в верхнем углу пользовательского интерфейса. При нажатии на кнопку открывается ранее скрытое меню (также называемое «гамбургер-меню»). Это меню может «выпадать» из положения кнопки, отображаться как модальное окно или выдвигаться сверху, сбоку или снизу экрана.

Основное назначение кнопки гамбургера - сохранить пространство на экране, скрывая элементы навигации.Сам значок небольшой и подразумевает скрытый список, который можно открыть щелчком или нажатием.

История кнопки гамбургера

Кнопка для бургеров появилась в 1981 году, когда дизайнер Норм Кокс поработал над персональной рабочей станцией Xerox. Он пробовал и другие варианты, в том числе стрелку, указывающую вниз, звездочку и символ плюса, но ни одна из них не предлагала такой же простоты использования, как этот простой помощник по гамбургеру.

Пользователи быстро поняли концепцию: нажмите кнопку, чтобы открыть раскрывающееся меню с навигационными ссылками или ссылками на функции.Однако, помимо первоначального запуска в Xerox, дизайнеры особо не беспокоились о гамбургере - до тех пор, пока Twitter не начал использовать его в 2008 году. Год спустя он появился в iOS, и сегодня это основной продукт веб-дизайна, часто появляющийся в топе. в левом или верхнем правом углу веб-страниц и предоставляет удобное место для хранения больших меню.

Булочки для гамбургеров и недостатки

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

  • Отсутствие универсальности - Несмотря на широкую известность, не каждый пользователь знает, что такое кнопка гамбургера и что она делает, поэтому маловероятно, что они нажмут, чтобы увидеть другие варианты веб-сайта.
  • Низкое взаимодействие - Панели навигации с четкими значками меню легко увидеть, распознать и использовать. Кнопки-гамбургеры не выделяются и не привлекают пользователей одинакового уровня.
  • Отсутствие важности - Гамбургеры говорят о том, что все, что стоит за гамбургером, не так важно, как все остальное на вашем сайте, иначе это нашло бы место на первой странице.

Но есть и преимущества развертывания меню на основе булочек на вашем сайте, в том числе:

  • Чистый вид - Кнопка бургера почти не занимает места, поэтому ее легко разместить в любом месте страницы, не отвлекаясь от других ключевых элементов.Пользователи знают, как это выглядит, а это значит, что вы можете потратить больше времени и усилий на другие элементы дизайна.
  • Последовательная функция - Это трехстрочное меню отлично справляется с одной задачей. Это делает его отличным дополнением к единообразию в дизайне веб-сайтов - хотя он может и не показаться кричащим, он предлагает солидную функциональность.
  • Четкая цель - Не все должно быть на главной странице вашего веб-сайта. В гамбургер-меню предусмотрено заранее определенное место для элементов навигации, которые не являются приоритетными, но их все же стоит держать под рукой.

Примеры кнопок для гамбургеров

Кнопки

Hamburger можно найти по всему Интернету - вот несколько примеров, чтобы продемонстрировать, как они могут выглядеть.

Кнопка гамбургера в приложении для Android

Начнем со стандартного примера гамбургер-меню в приложении. Главный экран приложения Gmail выглядит так - обратите внимание на кнопку гамбургера в левом верхнем углу.

Источник изображения

При нажатии на значок меню появляется слева.

Источник изображения

Кнопка гамбургера на сайте

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

Источник изображения

При нажатии на значок открывается меню навигации, которое складывается из верхней части экрана. Это забавный, умный эффект, который добавляет сайту ощущение ремесленничества и погружает мобильных пользователей в опыт.

Источник изображения

Креативная кнопка для гамбургера

Есть также множество творческих вариаций кнопок гамбургера, которые вы можете найти в Интернете, если хотите добавить щепотку дополнительных деталей. Вот один отличный анимированный значок кнопки от пользователя CodePen Данило - попробуйте щелкнуть значок в приведенном ниже примере и посмотреть, что произойдет.

См. Меню Pen Animated от Danilo (@ Danilo06) на CodePen.

Как сделать кнопку гамбургера с помощью CSS

К счастью, создать кнопку гамбургера в CSS не так уж сложно.Если вы предпочитаете создавать код CSS в автономном редакторе, попробуйте такие варианты, как RapidCSS или Stylizer. RapidCSS быстрый, легкий и хорошо подходит для пользователей, имеющих некоторый опыт работы с CSS. Stylizer предлагает больший формат графического интерфейса пользователя и поставляется с параметрами немедленного предварительного просмотра, чтобы гарантировать, что код, который вы пишете, дает желаемые результаты.

Если вы предпочитаете кодировать внутри платформы, одним из самых простых вариантов является WordPress. Сначала войдите в свою учетную запись, найдите «Внешний вид» на левой боковой панели и нажмите «Настроить».

Источник изображения

Перейдите в нижнюю часть нового меню слева и выберите «Дополнительные CSS».

Источник изображения

Наконец, вы увидите страницу редактора CSS, которая позволяет вам ввести и протестировать код CSS, прежде чем отправлять его на свой сайт.

Источник изображения

Пришло время приготовить этот бургер. Допустим, вы хотите создать статический значок. Согласно W3Schools, лучше всего начать с HTML:

.

Этот код является основой для кнопки гамбургера.

Затем добавьте свой CSS:

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

Приготовление динамической иконки кнопки гамбургера с помощью CSS

Если вы хотите попробовать свои силы в чем-то более сложном, подумайте о анимированной кнопке меню, которая при нажатии превращается в значок «отменить». Вот как это начинается:

Щелкните, чтобы открыть меню, и оно превратится в следующее:

Выгода здесь? Пользователи не только получают доступ к вашему меню, основанному на бургерах, но и понимают, как заставить его исчезнуть, используя универсальный значок «X» для отмены.

Чтобы создать этот динамический вариант, начните с вашего HTML:

Теперь добавьте свой CSS:

Наконец, добавьте немного JavaScript:

Создание кнопки бургера без кода

Конечно, не все хотят тратить время и силы на создание кнопки гамбургера, на которую пользователи могут или не могут нажимать. Некоторым владельцам веб-сайтов просто не нравится кодирование CSS и HTML, в то время как другие предпочитают отдавать приоритет созданию контента или макету главной страницы.

Если вы предпочитаете, рассмотрите инструменты для создания веб-сайтов, которые предлагают встроенные опции для гамбургеров.

1. Концентратор CMS

С помощью CMS Hub вы можете создать отличный веб-сайт, соответствующий вашим потребностям и охватывающий ваш целевой рынок. Убедитесь, что все работает, как задумано, с помощью мониторинга трафика и интеграции маркетинговых кампаний. Кнопки для гамбургеров входят в стандартную комплектацию.

2. Squarespace

Создавайте чистые, свежие дизайны с помощью шаблонов Squarespace и используйте их простые гамбургер-меню, чтобы поддерживать возможности навигации второго уровня.

3. Webnode

40 миллионов пользователей создали сайты с помощью Webnode - добавляйте или изменяйте контент всего несколькими щелчками мыши и быстро настраивайте размещение и раскрывающиеся параметры любого гамбургер-меню.

4. Зона 123

Simple - так называется игра для этого конструктора веб-сайтов. Site123 не является чем-то необычным - он бесплатный и позволяет легко интегрировать гамбургер-меню в ваш веб-дизайн.

Хэмминг

Не всем нравится кнопка гамбургера.

Это имеет смысл; меню может вызвать путаницу или сделать важные параметры навигации недоступными. Но есть и преимущества бургера: создание собственной кнопки или использование инструмента для создания веб-сайтов позволяет вам решать, где это меню оказывает наибольшее влияние, и дает вам полный контроль над навигацией по вашему сайту.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *