Создание адаптивного мобильного меню на CSS без JavaScript

Создание адаптивного мобильного меню на CSS без JavaScript

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

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

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

Адаптивное мобильное меню только с помощью CSS

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

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

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

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

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

Создание адаптивного мобильного меню на CSS без JavaScript

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

Создание адаптивного мобильного меню на CSS без JavaScript

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

С помощью вашего любимого текстового редактора, например VS Code, создайте два файла в общей папке:

index.html для HTML-кода

style.css для кода CSS

Скопируйте путь к файлу index.html и вставьте его в адресную строку браузера, для просмотра приложения. Добавьте следующий код в файл index.html:

Этот код содержит структуру и содержимое веб-страницы. Он также включает ссылку на таблицу стилей CSS. Мы используем семантические теги header и main, чтобы отделить панель навигации от основного содержимого страницы.
Также, мы добавляем логотип, используя тег привязки <a>.

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

Мы используем тег label для определения значка меню гамбургера. Тег input используется для условного отображения меню в зависимости от состояния чекбокса (класс side-menu).

Затем мы добавляем пункты меню в виде элементов списка ссылок li, в неупорядоченный список ul. Тег nav служит контейнером списка. Вот результат нашего HTML кода:

Создание адаптивного мобильного меню на CSS без JavaScript

Добавление CSS

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

стилизации содержимого и фона

стилизации заголовка и логотипа

стилизации меню навигации

стилизации меню гамбургера

стилизации значка переключаемого меню

добавления отзывчивости

Стилизация содержимого и фона

Добавим следующий код в файл style.css, чтобы настроить внешний вид содержимого HTML:

Этот код импортирует шрифт Google Poppins для использования в приложении. Мы определяем переменные CSS для цветов, которые будут использоваться в приложении. Затем мы используем сброс CSS, чтобы удалить настройки браузера по умолчанию для margin, padding, box-sizing, text-decoration и list-style.

Мы также указываем background-color white и font-family Poppins для содержимого страницы. Вот результат, отображающий стилизованное содержимое и фон:

Создание адаптивного мобильного меню на CSS без JavaScript

Стилизация заголовка и логотипа

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

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

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

Этот код добавляет заголовку черный background-color и серый box-shadow. Чтобы заголовок оставался в верхней части экрана во время прокрутки, мы указываем фиксированную позицию и нулевое смещение сверху. Мы также настраиваем заголовок так, чтобы он растягивался по всей ширине устройства.

Стилизуем логотип, указав color, font-size и left-margin. Чтобы не путать с отступами, [margin] — это область вокруг логотипа, которая отделяет его от других элементов. Вот результат, отображающий стилизованный заголовок и логотип:

Создание адаптивного мобильного меню на CSS без JavaScript

Стилизация меню навигации

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

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

Наконец, мы используем свойство CSS [transition] и max-height, равное нулю, чтобы скрыть элемент навигации по умолчанию, но показать его при нажатии на значок меню. Вот результат, отображающий стилизованное меню навигации:

Создание адаптивного мобильного меню на CSS без JavaScript

Стилизация меню гамбургера

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

Мы используем псевдоэлементы CSS [::before] и [::after] для элемента span, чтобы определить три строки значков гамбургера. Селектор .hamb-line определяет центральную (или вторую) линию. .hamb-line::before и .hamb-line::after размещают первую и третью строки на 5 пикселей выше и ниже центральной линии соответственно.

Наконец, мы используем свойство display, чтобы скрыть чекбокс (.side-menu). Вот результат, отображающий стилизованное меню гамбургера:

Создание адаптивного мобильного меню на CSS без JavaScript

Стилизация значка переключаемого меню

Мы стилизуем значок меню гамбургера, чтобы изменить его внешний вид. Во-первых, указываем max-height элемента навигации когда чекбокс выбран (класс .side-menu:checked).

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

Создание адаптивного мобильного меню на CSS без JavaScript

Добавление отзывчивости

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

В этом коде мы добавляем правило @media для условия когда минимальая ширина устройства 768 пикселей. Мы хотим, чтобы такие устройства отображали полное меню навигации, а не гамбургер-меню. Мы удаляем свойство max-height элемента nav, установив для него значение none.

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

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

Создание адаптивного мобильного меню на CSS без JavaScript

Это видео демонстрирует адаптивный пользовательский интерфейс приложения:

Заключение

В этом руководстве мы спроектировали и создали адаптивное меню для мобильных устройств, используя только HTML и CSS без JavaScript. Полный код, используемый в этой статье, доступен на GitHub.

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

Автор: Ivy Walobwa

Источник: blog.logrocket.com

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

Читайте нас в Telegram, VK, Яндекс.Дзен

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

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

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

Верстка. Быстрый старт

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

Смотреть

Метки:

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

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

Комментирование закрыто.