Создание адаптивного мобильного меню на CSS без JavaScript
На момент написания этой статьи более 54 процентов веб-трафика во всем мире приходится на мобильные устройства. Благодаря адаптивному дизайну, ориентированному на мобильные устройства, разработчики начинают с наименьшего размера экрана, а затем постепенно увеличивают масштаб, добавляя дополнительные функции и функциональные возможности для экранов большего размера. Полученные веб-страницы будут автоматически подстраиваться под размер окна браузера пользователя.
Однако, как бы ни было важно адаптивное меню для UX веб-сайта, нет необходимости создавать его на JavaScript. В этом руководстве будет рассмотрено, как создать адаптивное меню для мобильных устройств, используя только HTML и CSS.
Адаптивное мобильное меню только с помощью CSS
Содержание статьи:
Существует множество методов создания адаптивных мобильных меню. Одной из распространенных практик является использование чистого CSS без единой строки JavaScript. Этот метод включает в себя использование простой структуры списка HTML для разработки меню ссылок, которые можно стилизовать и отображать по-разному в зависимости от размера экрана устройства.
В этом руководстве мы будем использовать CSS для создания адаптивного меню для мобильных устройств, планшетов и компьютеров:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Для небольших экранов пользователь должен кликать на значок гамбургера, чтобы открыть пункты меню. На больших экранах элементы меню будут отображаться на панели навигации. В этом уроке мы создадим адаптивное меню, включая значок гамбургера, полностью из чистого 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>
| 12345678910111213141516171819202122232425262728293031323334353637383940 | <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:
CSS /* 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; }
| 12345678910111213141516171819202122232425 | /* 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 для содержимого страницы. Вот результат, отображающий стилизованное содержимое и фон:
Стилизация заголовка и логотипа
CSS /* 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; }
| 123456789101112131415 | /* 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;} |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Этот код добавляет заголовку черный background-color и серый box-shadow. Чтобы заголовок оставался в верхней части экрана во время прокрутки, мы указываем фиксированную позицию и нулевое смещение сверху. Мы также настраиваем заголовок так, чтобы он растягивался по всей ширине устройства.
Стилизуем логотип, указав color, font-size и left-margin. Чтобы не путать с отступами, [margin] — это область вокруг логотипа, которая отделяет его от других элементов. Вот результат, отображающий стилизованный заголовок и логотип:
Стилизация меню навигации
CSS /* 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; }
| 123456789101112131415161718192021 | /* 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, равное нулю, чтобы скрыть элемент навигации по умолчанию, но показать его при нажатии на значок меню. Вот результат, отображающий стилизованное меню навигации:
Стилизация меню гамбургера
CSS /* 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 */
| 123456789101112131415161718192021222324252627282930313233343536 | /* 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). Вот результат, отображающий стилизованное меню гамбургера:
Стилизация значка переключаемого меню
CSS /* 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; }
| 123456789101112131415 | /* 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. Другими словами, свойства внутри медиа-запроса будут применяться к веб-странице только тогда, когда выполняется набор условий.
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; } }
| 12345678910111213141516171819202122 | /* 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
Источник: webformyself.com