Реактивное (react) гамбургер-меню

Реактивное (react) гамбургер-меню

От автора: создайте свое собственное меню, используя React, хуки, TypeScript и styled-component. Я предпочитаю простое меню, которое не будет выглядеть навязчивым на странице, отвлекая внимание от контента — но в то же время доступное для моих пользователей. Вместе мы создадим простое липкое гамбургер-меню!

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

Я думаю, что название «гамбургер» — это просто слово для визуализации иконки меню, которая выглядит как гамбургер. Держу пари, что вы уже видели раньше значок с 3 линиями?

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

Технические ингредиенты

Думаю, начинать перечислять ингредиенты гамбургеров опасно — у каждого человека свои сильные личные предпочтения! То же самое касается ингредиентов технического стека. В любом случае, если вам не нравятся некоторые из моих ингредиентов, вы можете их убрать. Код написан с использованием компонентов React (16.13), TypeScript (3.8) и Styled (5.1).

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Если вы хотите добавить кетчуп или кожуру помидора, вы можете это сделать! Я не против.

Основные компоненты

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

С кодом, приведенным ниже, мы получаем минимальную базу для начала. Мы добавим мобильные настройки, переходы и хуки (события клика) позже. Я решила разделить код на Menu и Hamburger, после добавления основной части ваше меню должно выглядеть примерно так:

Menu

Menu — это коричневый фон, который действует как фактическое меню, содержащее ссылки навигации.

Hamburger — это пиктограмма самого меню, используемая для переключения между видимым и скрытым Menu.

Добавляем движение с помощью переходов

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

Чтобы максимально использовать возможности Hamburger, вы можете преобразовать его из значка гамбургера в знак крестика, когда Menu открыто — две иконки в одной! Теперь меню должно выглядеть примерно так:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

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

Настройка для мобильных устройств

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

На маленьком экране Menu должно покрывать всю страницу. Я думаю, что это добавляет ощущение приложения — вы не согласны? В своем приложении я создала контрольную точку на 600px, где Menu разворачивается весь экран. К настоящему времени наше меню должно выглядеть на маленьких экранах примерно так:

Для Menu нам просто нужно создать медиа-запрос, при котором ширина меню становится 100% области просмотра, вместо 30%, когда ширина экрана составляет 600 пикселей или меньше. Для Hamburger я хотела переместить значок крестика при открытии меню на мобильном телефоне вправо. Свойство left используется для перемещения крестика от левого края. Когда вы работаете на мобильном телефоне, я хочу, чтобы значок (то есть когда меню охватывает весь экран) был на расстоянии x от правой стороны. Это имеет смысл?

Хуки

Для Menu требуется отслеживать его состояние — оно должно быть открытым или закрытым? Это простой хук useState с логическим значением open и функцией setOpen для изменения состояния open. Это мы уже добавили к Menu, поскольку это важная часть для его работы.

Что произойдет, если пользователь кликает за пределами Menu? На данный момент ничего.

Если Menu открыто и пользователь кликает за его пределами, он ожидает, что он Menu закроется. Чтобы иметь возможность выяснить, нажимает ли пользователь внутри или снаружи меню, мы добавим ссылку на узел в Menu. Таким образом, мы сможем спросить: «Пользователь нажал на Menu или за его пределами?». Вместе с узлом мы можем использовать пользовательский хук useOnClickOutside. Он должен вести себя так:

Все ингредиенты собраны вместе — ваш стильный и реактивный гамбургер готов:

Я надеюсь, что вы нашли эту статью полезной!

Автор: Marte Løge

Источник: https://medium.com

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: