Выпадающее меню в CSS

Материал из Викижурнал
Выпадающее меню в CSS
Выпадающее меню в CSS
Выпадающее меню в CSS
Тематические порталы

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

Подготовка меню

За основу мы возьмём всё тот же HTML список и немного его дополним самим выпадающим списком:

<ul>
  <li><a href="#home">Главная страница</a></li>
  <li><a href="#news">Новости</a></li>
  <li class="dropdown"><a href="#" class="dropbtn">Выпадающее меню</a>
    <div class="dropdown-content">
      <a href="#">Ссылка 1</a>
      <a href="#">Ссылка 2</a>
      <a href="#">Ссылка 3</a>
    </div>
  </li>
</ul>
  • Как видите в список <li> добавлен блок с ссылками, к которому дополнительно будут применены CSS настройки,

CSS настройки выпадающего меню

Рис. 1. Выпадающее меню, созданное при помощи CSS

После этого к данному списку используем CSS код, который уже делали для горизонтальной навигационной панели, и добавляем к нему дополнительные настройки, оформляющие внешний вид выпадающего меню:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 100%;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Настройки при наведении курсора на кнопку */
li a:hover {
  background-color: #555;
  color: white;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
  • li a, .dropbtn - применяем настройки к выпадающему меню, настраиваем тип отображения, цвет фона, отступы и т.д.
  • li a:hover, .dropdown:hover .dropbtn - настраиваем фон кнопки при наведении курсора.
  • .dropdown-content - настраиваем блок выпадающего меню, задаём ему расположение, цвет фона, отступы и настройки тени.
  • .dropdown-content a:hover - устанавливаем параметры при наведении курсора в выпадающем меню.
  • .dropdown:hover .dropdown-content - устанавливаем вид выпадающего меню при наведении курсора.

Примечание

В целом здесь мы применяем тот же принцип настройки меню, только лишь добавляем блок с ссылками в выпадающем окне и задаём ему параметры. Эти параметры можно настроить под свой вкус, дизайн сайта. Исходный файл можно скачать здесь.

Свои варианты настройки выпадающего меню, вопросы, комментарии можно оставить на странице обсуждения статьи.

Другие статьи о CSS