От автора: навигационное меню, которое является простым, лаконичным и интуитивно понятным, имеет важное значение для оптимизированного взаимодействия с пользователем веб-сайта. Отзывчивость меню также является ключевым фактором.
На момент написания этой статьи более 54 процентов веб-трафика во всем мире приходится на мобильные устройства. Благодаря адаптивному дизайну, ориентированному на мобильные устройства, разработчики начинают с наименьшего размера экрана, а затем постепенно увеличивают масштаб, добавляя дополнительные функции и функциональные возможности для экранов большего размера. Полученные веб-страницы будут автоматически подстраиваться под размер окна браузера пользователя.
Однако, как бы ни было важно адаптивное меню для UX веб-сайта, нет необходимости создавать его на JavaScript. В этом руководстве будет рассмотрено, как создать адаптивное меню для мобильных устройств, используя только HTML и CSS.
Адаптивное мобильное меню только с помощью CSS
Существует множество методов создания адаптивных мобильных меню. Одной из распространенных практик является использование чистого CSS без единой строки JavaScript. Этот метод включает в себя использование простой структуры списка HTML для разработки меню ссылок, которые можно стилизовать и отображать по-разному в зависимости от размера экрана устройства.
В этом руководстве мы будем использовать CSS для создания адаптивного меню для мобильных устройств, планшетов и компьютеров:
Для небольших экранов пользователь должен кликать на значок гамбургера, чтобы открыть пункты меню. На больших экранах элементы меню будут отображаться на панели навигации. В этом уроке мы создадим адаптивное меню, включая значок гамбургера, полностью из чистого HTML и CSS.
Вид мобильного устройства со значком гамбургера, открытым для отображения пунктов меню.
С помощью вашего любимого текстового редактора, например VS Code, создайте два файла в общей папке:
index.html для HTML-кода
style.css для кода CSS
Скопируйте путь к файлу index.html и вставьте его в адресную строку браузера, для просмотра приложения. Добавьте следующий код в файл index.html:
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- App title --> <title>Responsive Pure CSS Menu</title> <!-- Link CSS file --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Navigation bar --> <header class="header"> <!-- Logo --> <a href="#" class="logo">LR</a> <!-- Hamburger icon --> <input class="side-menu" type="checkbox" id="side-menu"/> <label class="hamb" for="side-menu"><span class="hamb-line"></span></label> <!-- Menu --> <nav class="nav"> <ul class="menu"> <li><a href="#">Gallery</a></li> <li><a href="#">Blog</a> </li> <li><a href="#">About</a></li> </ul> </nav> </header> <!-- Main content --> <main> <article> <h1> Some content </h1> <p> More Content </p> </article> </main> </body> </html>
Этот код содержит структуру и содержимое веб-страницы. Он также включает ссылку на таблицу стилей CSS. Мы используем семантические теги header и main, чтобы отделить панель навигации от основного содержимого страницы.
Также, мы добавляем логотип, используя тег привязки <a>.
Наконец, создаем гамбургер-меню, используя хак checkbox. С помощью этой стратегии мы можем стилизовать меню в зависимости от того, выбран ли чекбокс.
Мы используем тег label для определения значка меню гамбургера. Тег input используется для условного отображения меню в зависимости от состояния чекбокса (класс side-menu).
Затем мы добавляем пункты меню в виде элементов списка ссылок li, в неупорядоченный список ul. Тег nav служит контейнером списка. Вот результат нашего HTML кода:
Добавление CSS
Мы будем использовать CSS для стилизации различных компонентов и функций пользовательского интерфейса:
стилизации содержимого и фона
стилизации заголовка и логотипа
стилизации меню навигации
стилизации меню гамбургера
стилизации значка переключаемого меню
добавления отзывчивости
Стилизация содержимого и фона
Добавим следующий код в файл style.css, чтобы настроить внешний вид содержимого HTML:
/* Theming */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); /* import font */ :root{ --white: #f9f9f9; --black: #36383F; --gray: #85888C;
} /* variables*/ /* Reset */
*{ margin: 0; padding: 0; box-sizing: border-box;
}
body{ background-color: var(--white); font-family: "Poppins", sans-serif;
}
a{ text-decoration: none;
}
ul{ list-style: none;
}Этот код импортирует шрифт Google Poppins для использования в приложении. Мы определяем переменные CSS для цветов, которые будут использоваться в приложении. Затем мы используем сброс CSS, чтобы удалить настройки браузера по умолчанию для margin, padding, box-sizing, text-decoration и list-style.
Мы также указываем background-color white и font-family Poppins для содержимого страницы. Вот результат, отображающий стилизованное содержимое и фон:
Стилизация заголовка и логотипа
/* Header */
.header{ background-color: var(--black); box-shadow: 1px 1px 5px 0px var(--gray); position: sticky; top: 0; width: 100%;
}
/* Logo */
.logo{ display: inline-block; color: var(--white); font-size: 60px; margin-left: 10px;
}Этот код добавляет заголовку черный background-color и серый box-shadow. Чтобы заголовок оставался в верхней части экрана во время прокрутки, мы указываем фиксированную позицию и нулевое смещение сверху. Мы также настраиваем заголовок так, чтобы он растягивался по всей ширине устройства.
Стилизуем логотип, указав color, font-size и left-margin. Чтобы не путать с отступами, [margin] — это область вокруг логотипа, которая отделяет его от других элементов. Вот результат, отображающий стилизованный заголовок и логотип:
Стилизация меню навигации
/* Nav menu */
.nav{ width: 100%; height: 100%; position: fixed; background-color: var(--black); overflow: hidden; }
.menu a{ display: block; padding: 30px; color: var(--white);
}
.menu a:hover{ background-color: var(--gray);
}
.nav{ max-height: 0; transition: max-height .5s ease-out;
}В этом коде, для элемента навигации, мы устанавливаем свойствам width и height 100 процентнов, чтобы содержимое соответствовало размеру экрана. Затем мы указываем фиксированную позицию для наложения меню навигации поверх основного содержимого приложения. Мы также выбираем черный цвет фона для элемента навигации и указываем, что любое переполнение содержимого элемента навигации должно быть скрыто.
Для элементов ссылки меню мы указываем блочный формат отображения, добавляем отступы и цвет, а также меняем фоновый цвет с белого на серый при наведении.
Наконец, мы используем свойство CSS [transition] и max-height, равное нулю, чтобы скрыть элемент навигации по умолчанию, но показать его при нажатии на значок меню. Вот результат, отображающий стилизованное меню навигации:
Стилизация меню гамбургера
/* Menu Icon */
.hamb{ cursor: pointer; float: right; padding: 40px 20px;
}/* Style label tag */ .hamb-line { background: var(--white); display: block; height: 2px; position: relative; width: 24px; } /* Style span tag */ .hamb-line::before,
.hamb-line::after{ background: var(--white); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;
}
.hamb-line::before{ top: 5px;
}
.hamb-line::after{ top: -5px;
} .side-menu { display: none;
} /* Hide checkbox */В коде мы указываем, что указатель cursor должен отображаться, когда пользователь взаимодействует с гамбургер-меню. Мы позиционируем элемент label справа и добавляем отступ. Затем стилизуем элемент span, чтобы создать три линии значков меню.
Мы используем псевдоэлементы CSS [::before] и [::after] для элемента span, чтобы определить три строки значков гамбургера. Селектор .hamb-line определяет центральную (или вторую) линию. .hamb-line::before и .hamb-line::after размещают первую и третью строки на 5 пикселей выше и ниже центральной линии соответственно.
Наконец, мы используем свойство display, чтобы скрыть чекбокс (.side-menu). Вот результат, отображающий стилизованное меню гамбургера:
Стилизация значка переключаемого меню
/* Toggle menu icon */
.side-menu:checked ~ nav{ max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line { background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before { transform: rotate(-45deg); top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after { transform: rotate(45deg); top:0;
}Мы стилизуем значок меню гамбургера, чтобы изменить его внешний вид. Во-первых, указываем max-height элемента навигации когда чекбокс выбран (класс .side-menu:checked).
Затем мы следуем двухэтапному процессу, чтобы создать значок закрытия в форме «x». Во-первых, мы скрываем вторую строку значка гамбургера, установив для нее прозрачный фон. Затем мы поворачиваем первую и третью линии на -45 и 45 градусов соответственно, чтобы сформировать фигуру «x». Вот результат, отображающий переключаемое меню:
Добавление отзывчивости
Мы можем сделать приложение отзывчивым, используя медиа-запросы для условного включения свойств CSS. Другими словами, свойства внутри медиа-запроса будут применяться к веб-странице только тогда, когда выполняется набор условий.
/* Responsiveness */
@media (min-width: 768px) { .nav{ max-height: none; top: 0; position: relative; float: right; width: fit-content; } .menu li{ float: left; } .menu a:hover{ background-color: transparent; color: var(--gray); } .hamb{ display: none; }
}В этом коде мы добавляем правило @media для условия когда минимальая ширина устройства 768 пикселей. Мы хотим, чтобы такие устройства отображали полное меню навигации, а не гамбургер-меню. Мы удаляем свойство max-height элемента nav, установив для него значение none.
Размещаем элемент навигации в правом верхнем углу экрана и указываем его ширину равной fit-content. Размещаем элементы списка меню слева от навигации. Также, указываем, что цвет фона должен быть прозрачным, а элементы списка меню должны быть серыми при наведении.
Наконец, мы используем свойство display, чтобы скрыть значок меню гамбургера. Вот полностью стилизованное приложение:
Это видео демонстрирует адаптивный пользовательский интерфейс приложения:
Заключение
В этом руководстве мы спроектировали и создали адаптивное меню для мобильных устройств, используя только HTML и CSS без JavaScript. Полный код, используемый в этой статье, доступен на GitHub.
Техника, используемая в этой статье, является лишь одним из многих методов, которые можно использовать для создания адаптивного мобильного меню. Поэкспериментировав с разными методами, вы сможете решить, какой из них вам больше нравится. Удачного кодирования!
Автор: Ivy Walobwa
Источник: blog.logrocket.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен