Навигационная панель с выпадающим меню в CSS

Навигационная панель с выпадающим меню в CSS

Тематические порталы

Портал CSS • Портал Веб-разработчиков

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

Основы выпадающего меню

Выпадающее меню позволяет скрывать или показывать подменю при наведении курсора или клике на определённый элемент. Основная структура HTML для такого меню остаётся той же — используется список <ul> и <li>, но внутри элементов списка создаются вложенные списки. Пример HTML-кода:

<ul>
  <li><a href="index.html">Главная</a></li>
  <li><a href="services.html">Услуги</a>
    <ul>
      <li><a href="design.html">Веб-дизайн</a></li>
      <li><a href="development.html">Разработка</a></li>
      <li><a href="seo.html">SEO</a></li>
    </ul>
  </li>
  <li><a href="contact.html">Контакты</a></li>
  <li><a href="about.html">О нас</a></li>
</ul>

Здесь элемент «Услуги» содержит вложенный список с дополнительными пунктами меню.

CSS стили для выпадающего меню

Теперь создадим стили для навигационной панели и настроим выпадающее меню.

/* Основные стили навигационного меню */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

ul li {
  float: left;
  position: relative;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 20px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #555;
}

/* Стили для выпадающего меню */
ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  z-index: 1;
  background-color: #333;
}

ul li:hover > ul {
  display: block;
}

ul li ul li {
  float: none;
}

ul li ul li a {
  padding: 10px;
  white-space: nowrap;
}

ul li ul li a:hover {
  background-color: #777;
}

Пояснение к стилям

ul li:hover > ul — показывает подменю при наведении курсора на элемент списка. position: absolute и top: 100% — позволяют позиционировать подменю под родительским элементом. z-index: 1 — обеспечивает правильный порядок отображения элементов.

Добавление многоуровневого меню

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

 <li><a href="services.html">Услуги</a>
  <ul>
    <li><a href="design.html">Веб-дизайн</a></li>
    <li><a href="development.html">Разработка</a>
      <ul>
        <li><a href="frontend.html">Frontend</a></li>
        <li><a href="backend.html">Backend</a></li>
      </ul>
    </li>
    <li><a href="seo.html">SEO</a></li>
  </ul>
</li>
<li><a href="services.html">Услуги</a>  <ul>    <li><a href="design.html">Веб-дизайн</a></li>    <li><a href="development.html">Разработка</a>      <ul>        <li><a href="frontend.html">Frontend</a></li>        <li><a href="backend.html">Backend</a></li>      </ul>    </li>    <li><a href="seo.html">SEO</a></li>  </ul> </li>

И соответствующие CSS-стили:

 ul li ul li ul {
  left: 100%;
  top: 0;
}

ul li:hover ul li:hover > ul {
  display: block;
}

Вложенные подменю будут отображаться сбоку от родительского списка.

Пример в действии

Потестировать код на отдельной странице

Советы по улучшению меню

• Анимация: Можно добавить плавные переходы, используя transition.
• Мобильные устройства: Для адаптивности стоит добавить поддержку @media и реализовать раскрытие меню по клику.

Примечание

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