Разработка и продвижение проектов

теги:

Категории

Рубрики
от 43000 
Наши специалисты помогут вам разобраться с возможностями Elementor. Также мы легко решим проблемы с ошибками, такими как 500, 502 при сохранении страниц и пр.
от 650 

Как сделать гамбургер в css

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

Пример:

HTML:

<div class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS:

.hamburger {
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
  cursor: pointer;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #333;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: ease-in-out 0.2s;
}

.hamburger span:nth-child(1) {
  top: 0px;
}

.hamburger span:nth-child(2), .hamburger span:nth-child(3) {
  top: 8px;
}

.hamburger span:nth-child(4) {
  top: 16px;
}

.hamburger.active span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

.hamburger.active span:nth-child(2) {
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.hamburger.active span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

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

Далее мы стилизуем каждый блок span. Свойство opacity устанавливает прозрачность элемента, transform: rotate позволяет повернуть блок на определенный угол, а transition задает эффект плавного перехода при изменении различных свойств элемента.

Чтобы сделать иконку гамбургер активной, мы добавляем класс active к контейнеру hamburger, и при помощи селектора .hamburger.active настраиваем стили всех блоков span в зависимости от их порядкового номера (nth-child).

Вот как выглядит иконка гамбургер с классом active:

<div class="hamburger active">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

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

Поделиться:

Комментарии

Оставьте комментарий

Смотрите также

Сотрудничество

Если вы нуждаетесь в дополнительных специалистах для реализации ваших проектов, то мы можем сотрудничать на выгодных условиях.

В данный момент мы предлагаем:

  • Интернет-маркетинг
  • Услуги SEO специалиста
  • Разработка сайтов на Wordpress, Bitrix, а также самописных на React
  • Разработка нативных приложений для iOS и Android
  • Разработка игр для мобильных платформ
  • UX/UI дизайн

Ждем и ваших предложений в форме ниже

Оставьте заявку для сотрудничества с командой Lion Digital Agency

Отправляя заявку вы даете согласие на обработку персональных данных.

Задать вопрос

Мы ответим в ближайшее время!

Отправляя заявку вы даете согласие на обработку персональных данных.

Быстрый заказ

Как сделать гамбургер в css

Отправляя заявку вы даете согласие на обработку персональных данных.