Бургер меню CSS: создание адаптивного меню на сайте

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

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

Вот пример HTML-кода для бургер меню:

    `<div class="burger-menu">`
  `<div class="burger-icon">`
    `<div class="bar">`
    `<div class="bar">`
    `<div class="bar">`
  `</div>`
  `<ul class="menu">`
    `<li>``<a href="#">`Главная`</a>``</li>`
    `<li>``<a href="#">`О нас`</a>``</li>`
    `<li>``<a href="#">`Услуги`</a>``</li>`
    `<li>``<a href="#">`Контакты`</a>``</li>`
  `</ul>`
`</div>`
  

В этом примере мы создали элементы div для иконки бургер меню (burger-icon) и навигационного меню (menu), а также несколько элементов списка для пунктов меню.

Используя CSS, мы зададим стили для этих элементов:

    `.burger-icon {`
  `  width: 30px;`
  `  height: 20px;`
  `  position: relative;`
  `  cursor: pointer;`
  `  display: flex;`
  `  flex-direction: column;`
  `  justify-content: space-between;`
`}`


`.bar {`
  `  width: 100%;`
  `  height: 3px;`
  `  background-color: #000;`
`}`

`.menu {`
  `  display: none;`
  `  list-style: none;`
  `  padding: 0;`
  `  margin: 0;`
`}`

`.menu li {`
  `  padding: 10px;`
`}`

`.burger-menu.active .menu {`
  `  display: block;`
`}`
  

В этом CSS-коде мы задали стили для блока .burger-icon, который представляет собой контейнер для трех горизонтальных полосок. Задав ширину, высоту и позицию, а также использовав flexbox, мы создали иконку бургер меню. Пункты меню скрыты с помощью свойства display: none; и становятся видимыми только когда добавляется класс "active" к родительскому элементу .burger-menu.

Теперь, чтобы добавить поведение при нажатии на иконку бургер меню, мы можем использовать JavaScript или jQuery:

    `$(".burger-menu").click(function() {`
  `  $(this).toggleClass("active");`
`});`
  

Этот пример использования jQuery позволяет нам добавить/удалить класс "active" при клике на элемент .burger-menu. Далее, с помощью CSS, мы определяем, какие элементы должны быть видимыми, когда класс "active" присутствует.

Все приведенные примеры предоставляют базовую концепцию бургер меню с использованием HTML, CSS и JavaScript (в данном случае jQuery). Однако, существует множество вариаций и дополнительных возможностей для настройки и дизайна вашего бургер меню, включая анимации, различные эффекты переключения и мобильное оптимизированное поведение.

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