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

0 237

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

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

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

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

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

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

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

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

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

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

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

С помощью вашего любимого текстового редактора, например 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 без JavaScript

Добавление 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 без JavaScript

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

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;}

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

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

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

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

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

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

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

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 без JavaScript

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

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 без JavaScript

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

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 без JavaScript

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

Мы можем сделать приложение отзывчивым, используя медиа-запросы для условного включения свойств 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, чтобы скрыть значок меню гамбургера. Вот полностью стилизованное приложение:

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

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

Заключение

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

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

Автор: Ivy Walobwa

Источник: webformyself.com

Оставьте ответ

Ваш электронный адрес не будет опубликован.