От автора: эй! Вам нужно создать навигацию для сайта, и вы будете работать с мобильным поведением. Какой шаблон вы выбираете? Если вы похожи на большинство людей, то, вероятно, это меню «гамбургер», при нажатии которого используется небольшой JavaScript для расширения вертикального списка навигационных ссылок. Но это не единственный вариант.
В зависимости от контекста и содержимого навигации может существовать метод без JavaScript, который выполняет работу, обеспечивая при этом более доступный интерфейс.
Рекомендуется использовать подход прогрессивного улучшения, сначала создавая веб-страницы для пользователей с самой старой и наименее функциональной технологией, а затем вводя дополнительные улучшения, если это позволяет поддержка. Если вы можете обеспечить качественный опыт для пользователей с основными технологиями, то вы можете подумать, требует ли ваша веб-страница вообще функциональности JavaScript. Исключение JavaScript из навигации может гарантировать, что пользователи смогут перемещаться по вашему веб-сайту, даже если JavaScript отключен или проблемы с сетью мешают загрузке скриптов — что, безусловно, преимущество.
Давайте рассмотрим три альтернативных шаблона для меню гамбургеров на основе JavaScript.
Альтернатива 1: Разместить меню на отдельной странице
Кто сказал, что навигация должна быть в заголовке каждой страницы? Если ваш интерфейс очень легкий или у вас есть длинный список пунктов меню для отображения в навигации, наиболее практичным способом может быть создание отдельной страницы, чтобы перечислить их все. Облегченная тема WordPress Susty использует этот метод для навигации.
Этот шаблон особенно полезен для статических сайтов, которые используют маршрутизацию файловой системы. Если проект построен с использованием статического генератора сайтов, загрузка страницы может быть незаметной для пользователя и иметь дополнительное преимущество, заключающееся в том, что ваши шаблоны будут максимально модульными.
Все, что для этого нужно, — это просто заменить кнопку «Меню» на кнопку закрытия, когда пользователь находится на странице меню. При нажатии мы можем вернуть пользователя на последнюю страницу, на которой он находился, несколькими способами. Если мы используем серверную CMS, такую как WordPress, тогда мы можем получить последний URL-адрес $_SERVER[‘HTTP_REFERER’] и установить его в качестве URL-адреса кнопки «закрыть».
Но если мы не используем настройку на стороне сервера, тогда, возможно, нам понадобится несколько строк JavaScript, чтобы получить этот последний URL-адрес.
<a href="https://MyHomePage.com" onclick="handleClick(event)">×</a>
<script> function handleClick(event) { // Don't follow the link event.preventDefault(); // Go back to last visited page window.history.back(); // Bail out of the function return false; }
</script>Поэтому, хотя мне нравятся этот метод и шаблон, в зависимости от проекта может потребоваться JavaScript.
Альтернатива 2: Горизонтальный скроллер
Этот подход идеально подходит для более коротких списков ссылок и позволяет пользователям получать доступ ко всем элементам навигации, не открывая что-либо и не щелкая мышью вне их местоположения. GitHub использует этот подход для подменю.
Использование flexbox в сочетании с переполнением прокрутки в CSS поможет!
Альтернатива 3: Меню гамбургера на чистом CSS
Тот факт, что шаблон меню гамбургера часто делается с помощью JavaScript, не означает, что мы должны использовать JavaScript. Применяя псевдо-селекторы CSS и HTML input, мы можем создать функциональное мобильное меню и не использовать JavaScript.
Видите? Тот факт, что соглашение популярно, не означает, что это единственный способ сделать что-то. Часто существуют более простые и доступные методы, особенно когда речь идет о навигации. Создать функциональную, легкую, захватывающую навигацию без JavaScript не так уж и сложно, и мы получим некоторые приятные преимущества от этого. Если вы создали какие-либо интересные шаблоны навигации на чистом CSS, я хотел бы их увидеть — пожалуйста, поделитесь в комментариях!
Автор: Blake Lundquist
Источник: https://css-tricks.com
Редакция: Команда webformyself.