Как создать: кнопку "Больше" в навигационной панели

Узнайте, как создать кнопку "Больше".

Кнопка "Больше" в навигационной панели

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

Создайте навигационную панель с меню "выпадение".

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

Шаг 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> в элемент <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 навигационная панель

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