От автора: экраны мобильных устройств не такие широкие, как экраны настольных компьютеров и ноутбуков. При создании веб-сайтов часто необходимо разработать средства для отображения меню сайта и навигации для пользователей мобильных устройств.
Существуют различные способы отображения пунктов меню на экране мобильного устройства. Один из самых популярных способов — скрывать меню с экрана и выводить его только при необходимости или запросе. Во многих случаях это происходит при нажатии на значок меню.
В этом руководстве мы покажем вам, как создавать мобильные меню, которые медленно появляются на экране и выглядят анимированными. Мы будем использовать только HTML и CSS.
Создание анимированного выдвижного бокового меню
Для начала нам нужно создать папку для проекта, затем мы создадим файлы index.html и styles.css в папке проекта. В HTML файл добавим начальный шаблон. Если вы используете VSCode, вы можете нажать ! и enter на клавиатуре, чтобы получить стартовый шаблон. Не забудьте импортировать файл styles.css в HTML-файл. Ниже приведен стартовый шаблон, с которым мы будем работать:
<!DOCTYPE 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"> <title>Document</title> <link rel="stylesheet" *href*="styles.css"> </head> <body> </body> </html>
Создание содержимого
Далее мы создадим мобильный экран и некоторый контент страницы. Добавьте следующие строки кода, и мы рассмотрим их вместе:
<div class="screen1_container"> <!-- The nav bar with logo and menu items--> <nav class="screen1_menu_container"> <h4>Logo</h4> <label for="screen1_menu_check" class="screen1_menu_btn"> <!-- checkbox to track when the hamburger menu is clicked on --> <input type="checkbox" id="screen1_menu_check" /> <!-- the hamburger menu --> <div class="screen1_menu_hamburger"></div> <!-- menu items --> <ul class="screen1_menu_items"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </label> </nav> <!-- The page body content --> <div class="page_content"> <h3>This is the first screen</h3> <p>We are creating animated mobile menus</p> </div> </div>
Самый внешний div представляет тело мобильного телефона, а также оболочку для строки меню и содержимого страницы. В нем есть два элемента: nav и еще один div, который содержит содержимое страницы.
Как и многие другие панели меню, наша будет иметь логотип и меню-гамбургер, выровненные по сторонам элемента nav.
В элементе nav у нас есть чекбокс, который будет использоваться для отслеживания того, был ли нажат гамбургер, div меню гамбургера и элементы навигации. Давайте посмотрим, как это выглядят:
Теперь давайте начнем стилизовать наш мобильный экран.
Стилизация экрана мобильного телефона
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} body{
display: flex;
justify-content: center;
align-items: center;
column-gap: 40px;
min-height: 100vh;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}Это общий стиль страницы. Теперь страница должна выглядеть так:
Теперь давайте стилизуем мобильный контейнер. Добавьте следующие строки кода в файл CSS:
.screen1_container{ width: 17em; height: 80vh; background-color: #533557; position: relative; overflow: hidden; border: 15px solid rgb(54, 53, 53); border-top: 30px solid rgb(54, 53, 53); border-bottom: 30px solid rgb(54, 53, 53); border-radius: 60px;
}Это мобильный контейнер начального экрана. Мы задали ему ширину и высоту, а также цвет фона. Мы также дали ему относительное позиционирование и добавили границы и радиус границы к контейнеру. Теперь это должно выглядеть так:
Давайте добавим color:white. Это даст лучший контраст странице, и мы сможем легко увидеть, над чем мы работаем.
Стилизация панели навигации
Чтобы стилизовать navbar, мы добавим следующие строки кода в файл styles.css:
.screen1_menu_container{ display: flex; align-items: center; justify-content: space-between; background-color: #f1d6f5; color: #533557; padding: 0 10px;
} .screen1_menu_btn{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; cursor: pointer; transition: all .5s ease-in-out;
}Мы добавили display:flex для панели навигации (.screen1menucontainer), чтобы элементы в ней имели горизонтальное расположение. Вот как это должно выглядеть сейчас:
Давайте пока скроем ul, чтобы мы могли стилизовать гамбургер, не отвлекаясь.
ul{display: none;}Создание гамбургера
Для стилизации нашего гамбургера давайте начнем с добавления следующих строк в styles.css:
.screen1_menu_hamburger{ width: 20px; height: 2px; background-color: #533557; border-radius: 5px; z-index: 10; transition: all .5s ease;
}Теперь мы должны увидеть что-то вроде этого на экране:
Пока у нас только одна полоса. Давайте напишем код, чтобы меню выглядело как гамбургер, который все мы знаем и любим.
.screen1_menu_hamburger::before,
.screen1_menu_hamburger::after{ content: ''; position: absolute; width: 20px; height: 2px; background: #533557; border-radius: 5px; transition: all .5s ease;
} .screen1_menu_hamburger::before{ transform: translateY(-6px);
} .screen1_menu_hamburger::after{ transform: translateY(6px);
}Мы использовали псевдоэлементы before и after, чтобы добавить верхнюю и нижнюю полосу гамбургера. Для верхней панели мы использовали translateY, чтобы поднять ее над гамбургером. Нижнюю панель мы поместили ниже гамбургера. Если вы сейчас проверите прогресс, то увидите типичный гамбургер, который мы все привыкли видеть на сайтах:
Стилизация пунктов меню
Чтобы стилизовать пункты меню на мобильном экране, добавим в следующие стили:
.screen1_menu_items{ background: #f1d6f5; color: #533557; position: absolute; height: 100%; width: 70%; padding-top: 70px; top: 0; transition: all .5s ease-in-out;
}Присвоение элементам меню высоты 100% означает, что они будут занимать всю длину экрана. Мы также задали ему абсолютную позицию и убедились, что между меню и верхней частью экрана нет пробела, используя top:0. Пока мы тут, давайте также стилизуем элементы списка.
Стилизация элементов списка в меню
Чтобы элементы списка выглядели презентабельно, добавим в наш файл styles.css следующие строки:
.screen1_menu_items li{ padding: 10px 0; text-align: center; list-style-type: none; transition: all .2s ease;
} .screen1_menu_items li:hover{ letter-spacing: 2px; opacity: .6;
}Мы добавили верхний и нижний отступы для элементов списка и выровняли их по центру контейнера. Мы также добавили эффект наведения для элементов списка в меню, увеличив расстояние между буквами при наведении на них курсора. Теперь давайте анимируем гамбургер.
Анимация гамбургера
Начнем со средины. Общая идея состоит в том, чтобы средина исчезала из поля зрения при нажатии, чтобы верхняя и нижняя полосы формировались со знаком выхода или закрытия. Как нам это сделать?
Мы можем отслеживать, когда нажимают на гамбургер, используя чекбокс. Если чекбокс задействован, мы добавляем нужные стили; если нет — стили не вступают в силу. Добавим в наш файл styles.css следующее:
.screen1_menu_btn input:checked ~.screen1_menu_hamburger{ transform: translateX(-50px); background: transparent; }Когда вы нажмете на меню гамбургера, вы заметите, что оно исчезает из поля зрения. Мы сделали это, переместив меню влево и сделав его прозрачным. Прогресс! Добавим стили для верхней и нижней панели:
.screen1_menu_btn input:checked ~.screen1_menu_hamburger::before{ transform: rotate(45deg) translate(35px, -35px);
} .screen1_menu_btn input:checked ~.screen1_menu_hamburger::after{ transform: rotate(-45deg) translate(35px);
}Если вы проверите проект, вы заметите, что верхняя и нижняя полосы образуют букву «X», когда гамбургер нажат. Это достигается путем поворота верхней полосы на 45 градусов и нижней -45 градусов, а значения translate должны предотвратить их перемещение влево со средней полосой гамбургера. Добавим последние штрихи в нашу работу.
Анимация пунктов меню
Добавьте следующую строку в .screen1_menu_items: left: 100%. Это выталкивает пункты меню за пределы экрана, когда гамбургер не нажат. Теперь код должен выглядеть так:
.screen1_menu_items{ background: #f1d6f5; color: #533557; position: absolute; left: 100%; height: 100%; width: 70%; padding-top: 70px; top: 0; transition: all .5s ease-in-out;
}Добавьте следующую строку, чтобы вернуть меню на экран при нажатии гамбургера:
.screen1_menu_btn input:checked ~.screen1_menu_items{ left: 40%;
}Заключительные шаги
Мы почти закончили! Теперь давайте скроем чекбокс и сделаем тело страницы более презентабельным:
.screen1_menu_btn input{ display: none;
} .page_content{ text-align: center; margin-top: 3em;
} .page_content h3{ padding-bottom: 10px;
}Вот и все! Мы успешно создали мобильное анимированное меню, которое выдвигается и исчезает. Мы также придали гамбургерам анимированный эффект при нажатии. Теперь наш экран должен выглядеть так:
Создание анимированного выпадающего меню
Для этого примера экран будет выглядеть как в первом примере, но разница будет заключаться в пунктах меню. Меню не будет скользить сбоку; скорее, он будет скатываться сверху вниз.
Создание содержимого мобильного экрана
В HTML-файл добавьте следующие строки кода:
<!-- screen two --> <div class="screen2_container"> <nav class="screen2_menu_container"> <h4>Logo</h4> <label for="screen2-menu_check" class="screen2_menu_btn"> <input type="checkbox" id="screen2-menu_check"/> <div class="screen2_menu_hamburger"></div> <ul class="screen2_menu_items"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </label> </nav> <div class="page_content"> <h3>This is the second screen</h3> <p>We are creating animated mobile menus</p> </div> </div>
Экран выглядит точно так же, как первый, потому что он имеет ту же необходимую разметку. Это все, что нам нужно для HTML. Теперь давайте стилизуем наше выпадающее меню.
Если вы проверите проект на локальном сервере, вы заметите, что отображается только чекбокс. Это потому, что мы сделали цвет страницы белым, когда работали над первым экраном. Давайте добавим стиль ко второму экранному контейнеру.
Стилизация экрана мобильного телефона
Добавьте следующие строки в ваш файл styles.css:
.screen2_container{ width: 17em; height: 80vh; position: relative; overflow: hidden; color: rgb(54, 53, 53); border: 15px solid rgb(54, 53, 53); border-top: 30px solid rgb(54, 53, 53); border-bottom: 30px solid rgb(54, 53, 53); border-radius: 60px;
}Приведенные выше стили создают контейнер экрана и позволяют нам сделать контент видимым, добавив к нему стиль темного цвета.
Контент на странице выглядит презентабельно благодаря стилям страницы, которые мы использовали на первом экране. Теперь экран должен выглядеть так:
Стилизация панели навигации
Чтобы стилизовать панель навигации, мы добавим следующие стили в наш файл styles.css:
.screen2_menu_container{ display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background-color: #533557; color: white;
}Стили изменяют цвет фона панели навигации, а также макет навигации на горизонтальный. Justify-content:space-between заставляет элементы внутри панели навигации оставаться на противоположных концах своего контейнера и оставлять пространство между ними. Теперь панель навигации должна выглядеть так:
Давайте скроем наш ul, чтобы мы могли сначала стилизовать наше гамбургер-меню. Мы сделаем это с помощью следующей строки кода:
ul{display: none;}Теперь добавьте эту строку, чтобы стилизовать обтекание меню гамбургера:
.screen2_menu_btn{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; cursor: pointer; transition: all .5s ease-in-out;
}Мы придали ему гибкость, добавили высоту и ширину и создали указатель курсора.
Стилизация гамбургера
Мы пока не видим гамбургер-баров. Давайте сделаем их видимыми, добавив следующие строки в наш styles.css:
.screen2_menu_hamburger{ width: 20px; height: 2px; background-color: white; border-radius: 5px; z-index: 10; transition: all .5s ease;
} .screen2_menu_hamburger::before,
.screen2_menu_hamburger::after{ content: ''; position: absolute; width: 20px; height: 2px; background: white; border-radius: 5px; transition: all .5s ease;
} .screen2_menu_hamburger::before{ transform: translateY(-6px);
} .screen2_menu_hamburger::after{ transform: translateY(6px);
}Как и при создании первого экрана, у нас есть разметка для средней панели, и мы использовали псевдоэлементы before и after чтобы добавить верхнюю и нижнюю панели. Мы также подняли верхнюю полосу и поместили нижнюю полосу под среднюю. Теперь это должно выглядеть так:
Анимация гамбургера
Чтобы анимировать гамбургер при нажатии, мы добавим следующие стили:
.screen2_menu_btn input:checked ~.screen2_menu_hamburger::before{ transform: rotate(45deg) translate(35px, -35px);
} .screen2_menu_btn input:checked ~.screen2_menu_hamburger::after{ transform: rotate(-45deg) translate(35px, 35px);
} .screen2_menu_btn input:checked ~.screen2_menu_hamburger{ transform: translateX(-50px); background: transparent;
}Как и на первом экране, мы убрали среднюю полосу из поля зрения и заставили верхнюю и нижнюю полоски образовывать знак «X» при нажатии. Они возвращаются к своим прежним позициям, когда чекбокс не активен. Вы можете попробовать проверить это на своем сервере, чтобы предварительно просмотреть эффекты при нажатии на меню.
Стилизация пунктов меню
Нам нужно удалить стили, которые мы использовали ранее, чтобы скрыть элемент ul, и добавить в таблицу стилей следующее:
.screen2_menu_items{ position: absolute; top: 0; background: #533557; height: 100%; width: 100%; left: 0; transition: all .5s ease-out; padding-top: 50px;
}Пункт меню позиционируется абсолютно в своем контейнере и делается на всю ширину. Мы также дали ему высоту 100% и добавили верхний отступ, чтобы создать пространство между меню и экраном. Мы присвоили ему верхнее значение 0, чтобы пункт меню привязывался к верху в целях стилизации. Теперь наше меню выглядит так:
Давайте стилизуем элементы в меню следующими строками:
.screen2_menu_items li{ border-bottom: .5px solid rgb(182, 181, 181); padding: 24px 0; text-align: center; transition: all .2s ease-out; }Добавим эффект наведения к элементам списка:
.screen2_menu_items li:hover{ letter-spacing: 2px; opacity: .6;
}Анимация пунктов меню
Теперь давайте вытесним пункты меню из поля зрения, чтобы мы могли видеть анимированный эффект при нажатии на меню гамбургера. Присвоим элементам экранного меню верхнее значение -500px. Теперь меню должно выглядеть так:
.screen2_menu_items{ position: absolute; top: -500px; background: #533557; height: 100%; width: 100%; left: 0; transition: all .5s ease-out; padding-top: 50px;
}Теперь наши пункты меню скрыты от просмотра. Мы заставим меню скользить вниз, когда нажимаем на гамбургер, и поднимать его, когда нажимаем знак закрытия. Добавьте следующие строки в файл styles.css:
.screen2_menu_btn input:checked ~.screen2_menu_items{ top:0;
}Помните, мы убрали меню из поля зрения. Теперь, с только что добавленной строкой кода, всякий раз, когда чекбокс активен, меню скользит вниз. Когда чекбокс не активен, оно скользит обратно вверх.
Заключительные шаги
Мы почти закончили со вторым экраном. Давайте добавим последний штрих, спрятав чекбокс с помощью следующих строк кода:
.screen2_menu_btn input{
display: none;
}Вот и все! Мы закончили со вторым экраном. При нажатии меню сползает вниз. При нажатии на значок закрытия оно исчезает из поля зрения. Готовое меню должно выглядеть так:
Посмотрите демонстрацию наших готовых примеров меню.
Заключение
Если вы дошли до этого момента, у вас должны быть все базовые знания, необходимые для создания двух типов анимированных меню только с помощью HTML и CSS — JavaScript не требуется.
Благодаря новым навыкам, которые вы приобрели, вы можете создавать различные виды мобильных меню с CSS и делать их такими красивыми, как вы хотите. Чтобы начать практиковаться, вы можете изменить те, которые мы создали вместе, и создать свою собственную магию.
Автор: Hafsah Emekoma
Источник: blog.logrocket.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен