Три CSS альтернативы навигации в JavaScript

Три CSS альтернативы навигации в JavaScript

От автора: эй! Вам нужно создать навигацию для сайта, и вы будете работать с мобильным поведением. Какой шаблон вы выбираете? Если вы похожи на большинство людей, то, вероятно, это меню «гамбургер», при нажатии которого используется небольшой JavaScript для расширения вертикального списка навигационных ссылок. Но это не единственный вариант.

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

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

Давайте рассмотрим три альтернативных шаблона для меню гамбургеров на основе JavaScript.

Альтернатива 1: Разместить меню на отдельной странице

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Три CSS альтернативы навигации в JavaScript

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

Все, что для этого нужно, — это просто заменить кнопку «Меню» на кнопку закрытия, когда пользователь находится на странице меню. При нажатии мы можем вернуть пользователя на последнюю страницу, на которой он находился, несколькими способами. Если мы используем серверную CMS, такую как WordPress, тогда мы можем получить последний URL-адрес $_SERVER['HTTP_REFERER'] и установить его в качестве URL-адреса кнопки «закрыть».

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

Поэтому, хотя мне нравятся этот метод и шаблон, в зависимости от проекта может потребоваться JavaScript.

Альтернатива 2: Горизонтальный скроллер

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

Три CSS альтернативы навигации в JavaScript

Использование flexbox в сочетании с переполнением прокрутки в CSS поможет!

Альтернатива 3: Меню гамбургера на чистом CSS

Тот факт, что шаблон меню гамбургера часто делается с помощью JavaScript, не означает, что мы должны использовать JavaScript. Применяя псевдо-селекторы CSS и HTML input, мы можем создать функциональное мобильное меню и не использовать JavaScript.

Видите? Тот факт, что соглашение популярно, не означает, что это единственный способ сделать что-то. Часто существуют более простые и доступные методы, особенно когда речь идет о навигации. Создать функциональную, легкую, захватывающую навигацию без JavaScript не так уж и сложно, и мы получим некоторые приятные преимущества от этого. Если вы создали какие-либо интересные шаблоны навигации на чистом CSS, я хотел бы их увидеть — пожалуйста, поделитесь в комментариях!

Автор: Blake Lundquist

Источник: https://css-tricks.com

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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