Как создать: навигационная панель с меню下拉

Узнайте, как создать навигационную панель с меню下拉.

Создание навигационной панели с меню下拉

Когда пользователь наводит курсор на элемент в навигационной панели, появляется меню下拉.

Шаг 1 - Добавление HTML:

<div class="navbar">
  <a href="#home">Главная</a>
  <a href="#news">Новости</a>
  <div class="dropdown">
    <button class="dropbtn">Дропдаун
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Ссылка 1</a>
      <a href="#">Ссылка 2</a>
      <a href="#">Ссылка 3</a>
    </div>
  </div>
</div>

Пример объяснения:

Используйте любой элемент для открытия меню下拉, например <button>, <a> или элемент <p>.

Создайте меню下拉 с помощью контейнерного элемента (например, <div>) и добавьте в него ссылки меню.

Оберните кнопку и еще один элемент <div>, чтобы использовать CSS для правильного позиционирования меню下拉.

Шаг 2 - Добавление CSS:

/* Контейнер навигационной панели */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Ссылки в навигационной панели */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Контейнер для下拉 */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Кнопка下拉 */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Для вертикального выравнивания на手机ах очень важно */
  margin: 0; /* Важно для вертикального выравнивания на телефонах */
}
/* Добавление красного фона к ссылке при наведении мыши на навигационную панель */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Содержимое выпадающего меню (по умолчанию скрыто) */
.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 {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Добавление серого фона к ссылке при наведении мыши на выпадающее меню */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Выпадающее меню отображается при наведении мыши */
.dropdown:hover .dropdown-content {
  display: block;
}

Попробуйте сами

Пример объяснения:

Мы уже установили стили фона, отступов и т.д. для навигационной панели и ссылок в навигационной панели.

Мы уже установили стили фона, отступов и т.д. для кнопки выпадающего меню.

.dropdown класс .dropdown-content контейнер. Поскольку это элемент <div>, а не <a>, мы должны сделать его плавающим, чтобы он оставался рядом с ссылкой.

.dropdown-content класс, содержащий фактическое выпадающее меню. По умолчанию он скрыт и отображается при наведении мыши (см. ниже). Обратите внимание, что минимальная ширина установлена в 160px. Вы можете свободно изменить это значение.

Мы не используем рамку, а используем box-shadow Свойство делает выпадающее меню похожим на "карточку". Мы также используем z-index Разместите выпадающее меню перед другими элементами.

:hover Выборщик используется для отображения выпадающего меню при наведении мыши на кнопку меню.

Кликабельное выпадающее меню в навигационной панели

Попробуйте сами

Соответствующие страницы

Урок:CSS下拉 меню

Урок:Как создать кликабельное выпадающее меню

Урок:CSS навигационная панель

Урок:Как создать отзывчивую верхнюю навигационную панель