Меню бургер css: Меняющееся гамбургер меню на CSS


29.04.2020 Facebook Twitter LinkedIn Google+ Разное


Содержание

Иконки гамбургер меню — примеры сайтов и анимации, скрипты

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

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

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

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

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

Star Wars

Интересная модификация меню с тематикой фильма Звездных Воен.

The Deepend Design

Outdated Browser

NewtonRunning

Brianhoff Design

Brooklyn Bridge Park

Часто при клике на «иконку гамбургера» полоска или блок меню выезжает сбоку или сверху. Эффект простой, но смотрится неплохо.

The Design Museum

Illusion

Xander

DeModern

Hooch Creative

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

Lalignerouge

Michaelvilleneuve

Chapoleone

Brand Junkie

Cofa Media

eWebDesign

Lequipe

Digital Deadly Sins

Buildin Amsterdam

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

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

Hamburger Button

Burger Menu2

MOARRRR

The Real Hamburger MenuIcon

Hamburger Icon

Wave

Menu Icon by Dave Gamez

BurgerIcon

Hi I’m Hamburger

Buttons by Nick Meloy

Hamburger Transformation

Open Close

HamburgerMenu by Tamas Kojo

Interactive Hamburger

Close Icon Animation

Dribbble Menu

Simple HamburgerMenu Animation

IconinFramer

Hamburger Icon Music

Menu Thing

Hamburger by Christian

OpenDADA

Это лишь часть материалов, на Dribbble их гораздо больше — заходите на сайт и ищите по ключу «hamburger«, можно даже без приставки «menu«. Напоследок парочка дополнительных сайтов.

TheNounProject

Про Noun Project мы когда-то уже писали в посте с необычными наборами иконок. Там содержится достаточно много монохромных объектов из любых сфер жизни.

Iconfinder

Когда будете использовать поиск иконок Iconfinder обязательно выбирайте в левом меню «Free» в графе Price, то есть бесплатную стоимость изображений.

Stickpng

Еще один интересный сервис — Stickpng, где публикуются PNG клипарты на прозрачном фоне. Не смотря на то, что картинок здесь мало, возможно, кому-то нужен именно PNG формат.

Скрипты гамбургер меню CSS / Javascript

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

21 Hamburger Animations Menu

15 Hamburger Icons in CSS 

Code My UI

CSS Animated Hamburgers

Font Awesome

Кстати, подходящая иконка есть и в популярном наборе Font Awesome.

Можете почитать заметку про использование шрифта Font Awesome в WordPress, если ваш проект реализован на этой CMS. Практически во всех остальных случаях из подборок вы найдете код и описание как сделать гамбургер меню в CSS и JS (в частности jQuery).

Вот парочка наиболее интересных решений:

Gooey Menu

Menu Toggle SVG Animation

Hamburger Icon + Morphing Menu

Pure CSS off-canvas Menu + flexbox

UI/UX Improvements with CSS

Toggle Menu by Vladislav

Итого в статье мы постарались собрать много разных материалов по теме: начиная с примеров сайтов с гамбургер меню, графическими наработками дизайнеров и заканчивая реальными скриптами гамбургер меню на CSS и Javascript. Всего вышло около 60-ти полезных ссылок. Надеемся вам они пригодятся.

Навигационное меню: 15 нестандартных дизайнерских решений

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

Разрабатывая инновационные способы навигации, помимо интерфейсных и функциональных аспектов нужно не забывать о лаконичности и эргономичности меню, логичности & понятности для пользователя. Так, экономящее пространство раскрывающееся (Drop-Down) меню позволит сделать сайт компактней, меню «гамбургер» популярностью обязано минимализму и мобильному юзабилити, нижнее расположение панели удобно для пользователей планшетов и т.д. Ищите вдохновения? Посмотрите примеры реализации навигационных идей, которые впечатляют интерфейсом и дизайном. Эти меню помогают лучше ориентироваться на сайте, удобны с точки зрения эргономики / UX.

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


Креативные идеи и нестандартные варианты навигационных меню


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


Ptchr

Впечатляющее вертикальное меню навигации. Примечательно, что сайт WEB & E-commerce агентства функционирует на бесплатном блоговом движке WordPress.


Agente

Дизайн навигации на сайте agente.ru (английская версия agentestudio.com) является примером лучших практик UX/UI. При переходе к страницам кейсов/услуг меню выводит ссылки тегов, поддиректорий и возврата.


Bulldog Studio

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

 


Кekselias

Очень эргономичный корпоративный сайт успешно совмещает анимационные эффекты и современные тренды с оригинальным оформлением вертикальной панели навигации.


NKI Studio

Нетипичное нижнее расположение ссылок меню, расширенный поиск по сайту с выдвигающимися панелями, оригинальные навигационные решения (см. раздел ABOUT US).


D.FY

Минималистичный сайт агентства с чистым и плоским дизайном на HTML5/CSS3/SVG оставляет приятное впечатление добротного веб-ресурса. Эффектная бесшовность навигационного меню смотрится круто, повышает UX и глубину просмотра сайта.


duotix.be

Бельгийское дизайн-маркетинговое агентство представлено «не совсем выровненным» сайтом с пересекающимся контентом и уникальным дизайном меню навигации. Направление популярно среди агентских сайтов, стартапов, малого бизнеса и eCommerce. В тренде стиль, который кажется более естественным. Добавьте сюда соответствующий визуал – непринужденные лица людей увлеченных беседой / занятых работой и т.д.


IC Creative

Корпоративный сайт британского дизайн-агентства использует WordPress/CSS3/HTML5 и отмечен в галерее Awwwards. Вертикальная панель для комбинированного меню во весь экран и пара кликабельных блоков с красивым эффектом на главной странице – неплохая идея для FLAT-дизайна, применяющего полноэкранные фоны и крупную жирную типографику.


Big Spaceship

Сайт Нью-Йоркского веб-дизайн агентства необычен центральным нижним расположением анимированной бургерной иконки с эффектно открываемым/закрываемым меню во весь экран. Дополнительно, ссылки и значки соцсетей привлекают внимание к навигационному меню.


Build in Amsterdam

Брендингвое агентство «зачётно» оформило навигацию по своему сайту на WordPress, дополнив полноэкранное меню элементами управления.

Nooflow

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

Заключительная мысль

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

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>

<style>
. menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0. 2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

Фиксированное мобильное меню с остановкой скролла

JS 1 min

Привет! Сегодня у&nbsp;нас лайтовенькая, но&nbsp;довольно важная статья. Покажу скрипт, который будет тормозить скролл сайта при открытии мобильного меню (и&nbsp;на&nbsp;iPhone тоже), ну&nbsp;а&nbsp;при закрытии&nbsp;&mdash; возобновлять. Все мы&nbsp;знаем, как непросто на&nbsp;iPhone скролл отключить, но&nbsp;тут максимально простая и&nbsp;рабочая фича. Поехали!

Итак, все делаем через position: fixed и простой скриптец. И да, конечно же, эта фича сработает только для мобильного меню (полноэкранного), ибо иначе будет некрасиво. HTML тут не супер важен, посмотрите на примере

CSS

.is-menu-open {
position: fixed;
overflow: hidden;
}

is-menu-open — класс, который будет добавляться когда меню открыто.

JS

const burger = document.querySelector('.burger');
const menuLinks = document.querySelectorAll('.mobile-menu a');
const mobileMenu = document.querySelector('.mobile-menu');

burger.addEventListener('click', (e) => {
e.preventDefault();

let pagePos = window.scrollY;
document.body.classList.add('is-menu-open');
document.setAttribute('data-scroll', pagePos);

mobileMenu.style.display = 'block';
});

menuLinks.forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault();

let pos = parseInt(document.body.getAttribute('data-scroll'));

mobileMenu.style. display = 'none';

document.body.classList.remove('is-menu-open');
document.setAttribute('data-scroll', '');

window.scrollTo(0, pos);
});
});

Собственно, по бургеру открываем меню (стандартные вещи) и сохраняем в переменную pagePos текущую позицию скролла. Затем, уже по закрытию меню мы скроллим сайт на эту же позицию, убирая класс, содержащий position: fixed. И, поскольку меню у нас с фоном (и выше) — внешне ничего не видно, но скролл сохраняется.

Вот такая вот мелочь, но довольно полезная мелочь. Надеюсь, кому-то помогло)

Об авторе блога

MaxGraph

Автор. Веб-разработчик. Фрилансер. Преподаватель в онлайн-университете.

Портфолио: https://maxgraph.ru/
Добавляйтесь в друзья VK! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика.

Bootstrap 4 — Navbar (основное меню)

Статья, в которой рассмотрим, как с помощью компонента Navbar создать вертикальное схлопывающееся меню для сайта.

Как с помощью Navbar создать основное вертикальное меню для сайта

Для создания основного вертикального меню необходимо:

  • подключить на страницу CSS код, который будет определять вид меню на больших экранах;
  • определённым образом организовать HTML код, который будет задавать нужное положение элементов.

HTML и CSS код вертикального меню для сайте на базе Navbar:


...
<!-- CSS -->
<style>
@media (min-width: 768px) {
  .navbar-container {
    position: sticky;
    top: 0;
    overflow-y: auto;
    height: 100vh;
  }
  .navbar-container .navbar {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    height: 100%;
  }
  .navbar-container .navbar-collapse {
    align-items: flex-start;
  }
  .navbar-container .nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  . navbar-container .navbar-nav {
    flex-direction: column !important;
  }
}
</style>
...
<!-- HTML -->
<body>
  <div>
    <div>
      <div>
        <!-- Вертикальное меню -->
        <nav>
          <a href="#">Navbar</a>
          <button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
          </button>
          <div>
            <!-- Пункты вертикального меню -->
            <ul>
              <li>
              <a href="#link-1">Ссылка 1</a>
              </li>
              <li>
              <a href="#link-2">Ссылка 2</a>
              </li>
              <li>
              <a href="#link-3">Ссылка 3</a>
              </li>
              <li>
              <a href="#link-4">Ссылка 4</a>
              </li>
              <li>
              <a href="#link-5">Ссылка 5</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div>
        <!-- Основной контент страницы  -->
        . ..
      </div>
    </div>
  </div>
</body>
...

Демо меню

Как изменить расположение кнопки «гамбургер»

Например, для того чтобы расположить кнопку «гамбургер» в левой части меню, достаточно её просто расположить до бренда:


<nav>
  <button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>  
  <a href="#">Navbar</a>          
  ...

Например, для того чтобы кнопку поместить по центру, оставшегося после бренда пространства в меню, к ней необходимо добавить классы ml-auto и mr-auto:


...
<button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
. ..

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

Выравнивание пунктов в мобильном представлении меню выполняется посредством добавления класса text-right или text-center к элементу с классом navbar-nav:


...
<!-- Выравнивание пунктов по правому краю -->
<ul>
...

...
<!-- Выравнивание пунктов по центру -->
<ul>
...

Полноэкранное мобильное меню

.menu-bar {

    transition: all 0.3s ease-in-out;

    transition-delay: 0.2s;

    background-color: #337AB7;

    border-radius: 50%;

    border: 4px solid #BFE2FF;

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

    position: fixed;

    bottom: 10px;

    right: 10px;

    width: 50px;

    height: 50px;

    z-index: 9999999;

    box-sizing: content-box;

}

.menu-bar span {

    transition: all 0. 3s ease-in-out;

    background-color: #fff;

    display: inline-block;

    height: 3px;

    position: absolute;

    top: 50%;

    left: 10px;

    width: 22px;

}

.menu-bar span:before,

.menu-bar span:after {

    transition: all 0.3s ease-in-out;

    background-color: #fff;

    content: »;

    display: block;

    height: 3px;

    position: absolute;

    width: 30px;

}

.menu-bar span:before {

    top: -8px;

}

.menu-bar span:after {

    top: 8px;

}

.triggered .menu-bar span {

    width: 0;

}

.triggered .menu-bar span:before {

    transform: rotate(45deg);

    top: 0;

}

.triggered .menu-bar span:after {

    transform: rotate(-45deg);

    top: 0;

}

.menu {

    transition: all 0.3s ease-in-out;

    background-color: #0b4f8a;

    height: 100vh;

    opacity: 0;

    padding: 15px;

    position: fixed;

    top: 0;

    left: 0;

    transform: translateY(-100%);

    width: 100vw;

    z-index: 9999998;

    overflow-y: auto;  

}

. menu ul {

    transition: all 0.3s ease-in-out;

    list-style: none;

    margin: 0;

    padding: 0;

}

.menu ul li {

    transition: all 0.3s ease-in-out;

}

.menu ul li a {

    color: #fff;

    display: inline-block;

    font-family: Verdana, sans-serif;  

    font-size: 20px;

    padding: 8px 15px;

    position: relative;

    text-decoration: none;

    outline: none;

}

.menu ul li span {

    display: inline-block;

    height: 24px;

    top: 5px;

    position: relative;

    width: 24px;

}

.menu ul li span:before,

.menu ul li span:after {

    background-color: #BFE2FF;

    content: »;

    display: block;

    height: 3px;

    position: absolute;

    width: 15px;

}

.menu ul li span:before {

    top: 50%;

    transform: translateY(-50%);

}

.menu ul li span:after {

    transition: all 0. 15s ease-in-out;

    top: 50%;

    transform: translateY(-50%) rotate(90deg);

}

.menu ul li span.subtriggered:after {

    transform: translateY(-50%) rotate(0);

}

.menu ul li ul li a {

    padding: 8px 30px;

    font-size: 18px;

    color: #BFE2FF;

}

.triggered .menu {

    opacity: 1;

    transform: translateY(0);

}

.menu ul ul {

    display: none;

}

.menu ul .subtriggered + ul {

    display: block;

}    

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

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

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

Адаптивное меню гамбургеров вне холста на чистом 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

Выглядит довольно стандартно, не так ли? У нас есть:

  • Наш родительский
    element
  • Значок гамбургера («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-expand ] для стилизации переключения с истинными / ложными значениями так же, как мы могли это делать в прошлом с классами.

А пока это прекрасно работает без 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, пожалуйста, подумайте об обновлении ее до этой более простой и доступной версии!

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

Создание морфируемого гамбургерного меню с помощью 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 {
  }
}  

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

Изучите Tailwind CSS с нуля

И это код для его работы:

  $ продолжительность перехода: 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 .Нам нужно вычислить задержку $ , немного отличающуюся для анимации open , чтобы получить обратно смещенный переход. Просто так:

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

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

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

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

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

Понравилась эта статья? Подпишитесь на @lmgonzalves в Twitter

20+ меню навигации гамбургеров на JavaScript и CSS

Навигация по сайту / приложению-гамбургеру, при нажатии на которую появляется горизонтальная панель навигации.

ДемоСкачать Теги: гамбургер-меню, всплывающее меню

Адаптивная система навигации по гамбургеру, которая превращает кнопку переключения гамбургера в полноэкранную навигацию с использованием небольшого количества переходов JavaScript и CSS и свойств clip-path.

ДемоСкачать Теги: гамбургер-меню

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

ДемоСкачать Теги: гамбургер-меню

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

ДемоСкачать Теги: гамбургер-меню, меню вне холста

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

ДемоСкачать Теги: гамбургер-меню

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

ДемоСкачать Теги: гамбургер-меню

Гамбургерное мегаменю с анимированным полноэкранным оверлеем, созданным с помощью JavaScript и CSS / CSS3.

ДемоСкачать Теги: гамбургер-меню, мега-меню

Гамбургерная навигация на чистом JavaScript / CSS, которая позволяет переключать внеэкранное меню боковой панели при нажатии на триггер гамбургера.

ДемоСкачать Теги: гамбургер-меню, меню вне холста

Этот пакет предоставляет коллекцию потрясающих анимаций переключения меню на основе SVG для навигации по вашему приложению.

ДемоСкачать Теги: гамбургер-меню

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

ДемоСкачать Теги: гамбургер-меню, меню вне холста, боковое меню

Что можно и чего нельзя делать при создании гамбургер-меню

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

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

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

Значок #

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

Многие используют знак Unicode для «IDENTICAL TO» (U + 2261) или знак «TRIGRAM FOR HEAVEN» (U + 2630), чтобы визуально показать три линии. Первая проблема с этим подходом к отображению значка заключается в том, что не все браузеры поддерживают эти знаки Unicode, а также не все шрифты, что означает, что эти пользователи будут видеть квадрат □ (также называемый тофу или заменяющим глифом вместо трех строк.

Более серьезная проблема с этим подходом заключается в том, что программы чтения с экрана могут объявить знак U + 2630 как «триграмму для небес».

Мы могли бы использовать что-то вроде:

    

, чтобы скрыть глиф для программ чтения с экрана, поэтому будет озвучено только слово «Меню», но мы все равно можем столкнуться с проблемами поддержки браузера / шрифтов. Другой подход, который многие использовали и, к сожалению, до сих пор используют, — это использование шрифта в виде значков.По этому поводу могу только сказать — серьезно, не используйте иконочные шрифты.

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

    

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

Другой подход — использовать SVG непосредственно в HTML. В этом случае вы должны установить aria-hidden = "true" и focusable = "false для элемента SVG, как описано здесь Сарой Суэйдан.

Действительно плохо : Используйте Unicode без скрытой арии. Используйте иконочный шрифт.
Все еще не очень хорошо : использовать значок Unicode со скрытым aria
Хорошо : использовать img, CSS или SVG и не использовать только значок

Кнопка переключения #

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