Как создавать и настраивать выпадающие меню и навигацию с использованием CSS?

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

CSS — это язык стилей, который позволяет веб-разработчикам создавать стильные и адаптивные веб-страницы. В CSS есть несколько способов создания выпадающего меню, и в этой статье мы рассмотрим несколько из них.

#### Создание простого выпадающего меню

Для создания простого выпадающего меню мы будем использовать список `

` и стили CSS. Вот пример HTML-кода для создания такого меню:

«`html

• Главная
• О нас
  • История
  • Команда
  • Клиенты
• Услуги
• Контакты

«`

Здесь мы создали список `

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

  Теперь, чтобы стилизовать это меню с помощью CSS, мы можем использовать следующий код:

  «`css
  .menu {
  list-style: none;
  background-color: #f1f1f1;
  padding: 0;
  }

  .menu li {
  display: inline-block;
  }

  .menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  }

  .menu li:hover {
  background-color: #ccc;
  }

  .menu li ul {
  display: none;
  position: absolute;
  background-color: #fff;
  }

  .menu li:hover > ul {
  display: inherit;
  }

  .menu li ul li {
  display: block;
  }
  «`

  В этом коде мы задаем стили для списка меню и его пунктов, а также для вложенного меню. Основной пункт меню имеет состояние `:hover`, при наведении на него отображается подменю.

  #### Создание адаптивного выпадающего меню

  Адаптивность очень важна в современных веб-сайтах, так как многие пользователи просматривают их на мобильных устройствах. Для создания адаптивного выпадающего меню мы можем использовать медиа-запросы CSS.

  Ниже приведен пример HTML-кода для адаптивного меню:

  «`html

  «`

  В этом примере мы использовали маркер «гамбургер» и метку `` для создания иконки меню. Вложенное меню также содержит маркер «гамбургер» для управления отображением подменю на мобильных устройствах.

  Соответствующие стили CSS для этого адаптивного меню могут выглядеть следующим образом:

  «`css
  .menu {
  background-color: #f1f1f1;
  padding: 0;
  }

  .menu-icon {
  display: none;
  }

  .menu-items {
  list-style: none;
  display: flex;
  }

  .menu-items li {
  flex-grow: 1;
  }

  .menu-items li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  }

  .sub-menu-items {
  display: none;
  }

  .menu-items li:hover .sub-menu-items {
  display: block;
  }

  /* Медиа-запрос для мобильных устройств */
  @media (max-width: 768px) {
  .menu-icon {
  display: inline-block;
  cursor: pointer;
  }

  .menu-items {
  display: none;
  }

  #menu-toggle:checked ~ .menu-items {
  display: block;
  }

  .sub-menu-items {
  display: none;
  }

  #sub-menu-toggle:checked ~ .sub-menu-items {
  display: block;
  }
  }
  «`

  В этом коде мы использовали медиа-запрос `@media` для установки стилей для мобильных устройств с максимальной шириной 768px. При нажатии на иконку меню (`#menu-toggle`) или иконку подменю (`#sub-menu-toggle`), соответствующие меню будут отображаться или скрываться.

  #### Заключение

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