Всплывающее меню в html: Как сделать всплывающее меню при наведении | Дропшиппинг

Содержание

html — Не работает выпадающее меню через CSS (hover)

Задать вопрос

Вопрос задан 2 года 2 месяца назад

Изменён 2 года 2 месяца назад

Просмотрен 383 раза

Я только начала учиться, уже возникают небольшие проблемки:( Уже все перепробовала и перепроверила, не появляется выпадающее меню при наведении. Делала по уроку.

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}
.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}
.root:hover .dropdown {
  display: block;           // Вот тут не работает
  background-color: #ccc;
}
. dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}
.dropdown>li {
  cursor: pointer;
  list-style: none;
}
.dropdown>li:hover {
  color: aqua;
}

<body>
  <ul>
    <li>Меню</li>
    <ul>
      <li>1-й элемент</li>
      <li>2-й элемент</li>
    </ul>
    <li>Меню 2</li>
    <ul>
      <li>3-й элемент</li>
      <li>4-й элемент</li>
    </ul>
  </ul>
</body>

html
css
меню
hover

Нужно было вложить .dropdown в .root

.root {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background-color: #ccc;
  cursor: pointer;
}
.root:hover {
  position: relative;
  display: inline-block;
  background-color: aqua;
}
.
  root:hover .dropdown {
  display: block;
  background-color: #ccc;
}
.dropdown {
  display: none;
  position: absolute;
  top: 54px;
  left: 48px;
  box-sizing: border-box;
  background-color: aquamarine;
  padding: 10px;
  width: 100%;
}
.dropdown>li {
  cursor: pointer;
  list-style: none;
}
.dropdown>li:hover {
  color: aqua;
}

<body>
  <ul>
    <li>Меню
      <ul>  // .dropdown находится внутри .root
        <li>1-й элемент</li>
        <li>2-й элемент</li>
      </ul>
    </li>
    <li>Меню 2
      <ul>
        <li>3-й элемент</li>
        <li>4-й элемент</li>
      </ul>
    </li>
  </ul>
</body>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Выпадающие меню · Bootstrap на русском

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

Содержание

Содержание
Примеры
- Одиночная кнопка выпадающего меню
- Split кнопка с выпадающим меню
Изменение размера
Вариант списка сверху
Использование
- С помощью данных атрибутов
- Через JavaScript
- Варианты
- Методы
- События

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown, или другой элемент, который заявляет, position: relative;. Раскрывающиеся списки могут быть вызваны из <a> или <button> элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с <button> элементы:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

И с <a> элементами:

<div>
  <a href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое приятное, что вы можете сделать это с любым вариантом кнопки:

<!-- Пример одной кнопки опасности - >
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением . dropdown-toggle-split для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left, который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

<!-- Пример сплит опасности - >
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Изменение размера

Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.

<!-- Большие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>
<!-- Небольшие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    . 
  ..
  </div>
</div>

Вариант списка сверху

Вызвать выпадающее меню над элементами, добавив .dropup для родительского элемента.

<!-- Кнопка по умолчанию dropup -->
<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>
<!-- Кнопка сплит dropup -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>

Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать <button> элементы в раскрывающихся списках, а не просто <a>ы.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

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

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

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

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Отдельные группы связанных элементов меню с делителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.

На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.

Примечание: data-toggle="dropdown" атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.

С помощью данных атрибутов

Добавить data-toggle="dropdown" на ссылку или кнопку для переключения в меню.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Вызвать меню через JavaScript:

$('. dropdown-toggle').dropdown()

Варианты

None.

Методы

Способ	Описание
`$().dropdown('toggle')`	Переключает меню данной панели навигации и вкладок навигации.

События

Все выпадающие события обстреляли .dropdown-menu’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.

Событие	Описание
`show.bs.dropdown`	Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется.
`shown.bs.dropdown`	Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения).
`hide.bs.dropdown`	Это событие немедленно уволили, когда скрывать метод экземпляра называется.
`hidden.bs.dropdown`	Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения).

$('#myDropdown').on('show.bs.dropdown', function () {
  // сделать что-то...
})

Пример кнопки меню: Действия | Авторская практика WAI-ARIA 1.1

В этом примере реализован шаблон дизайна кнопки меню. для кнопки, которая обеспечивает доступ к меню действий. Когда элемент с ролью button имеет aria-haspopup="true" , браузеры сообщают вспомогательным технологиям, что кнопка является кнопкой меню. Это преобразование роли, вызванное aria-haspopup , происходит с любым элементом, который распознается как кнопка, в том числе HTML 9Кнопка 0003 и input[type="button"] элемента.

Аналогичные примеры включают:

Кнопка меню навигации: Элементы всплывающего меню состоят из и элементов и действуют как ссылки.

Пример

В этом примере показано всплывающее меню действий, которые можно использовать для изменения состояний в веб-приложении.

Последнее действие:

Поддержка клавиатуры

Кнопка меню

Ключ	Функция
`Стрелка вниз, Пробел, или Enter`	Открыть меню и переместить фокус на первый пункт меню
`Клавиша со стрелкой вверх`	Открыть `меню` и переместить фокус на предыдущий пункт меню

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

Ключ	Функция
`Пробел или ввод`	Активирует любое `событие click` , связанное с `пунктом меню` . В этом примере обновляется текстовое поле «Последнее действие». Перемещает фокус обратно на `кнопку меню` и затем закрывает `меню` . ПРИМЕЧАНИЕ. Эта последовательность важна, поскольку скрытие элемента с фокусом приведет к перемещению фокуса в начало страницы.
`Побег`	Закрывает всплывающее меню. Перемещает фокус на меню кнопки.
`Стрелка вверх`	Перемещает фокус на предыдущий элемент всплывающего меню. Если первый элемент всплывающего меню, фокус перемещается на последний элемент всплывающего меню.
`Стрелка вниз`	Перемещает фокус на следующий элемент всплывающего меню. Если последний элемент всплывающего меню, фокус перемещается на первый элемент всплывающего меню.
`Дом`	Перемещает фокус на первый элемент всплывающего меню.
`Конец`	Перемещает фокус на последний элемент всплывающего меню.
`А-Я, а-я`	Перемещает фокус на следующий всплывающий элемент, который начинается с этой буквы. Если ни один элемент всплывающего меню не начинается с этой буквы, фокус не перемещается.

Роль, свойство, состояние и атрибуты Tabindex

Виджет кнопки меню

Роль	Атрибут	Элемент	Применение
`кнопка`		`кнопка`	По умолчанию `роль` элемента `кнопки` — « `кнопка` », поэтому нет , необходимо установить атрибут `роли` . Доступное имя исходит из дочернего текстового содержимого элемента `кнопки` (например, «Действия»). Элемент `button` является частью порядка вкладок по умолчанию на странице (например, `tabindex=0` ), поэтому нет необходимо установить `tabindex` .
	`ария-haspopup="true"`	`кнопка`	Атрибут `aria-haspopup` определяет элемент с `role=button` в качестве шаблона дизайна кнопки меню ARIA и указывает, что действия кнопки заключаются в открытии и закрытии всплывающего меню.
	`ария-элементы управления = "IDREF"`	`кнопка`	Атрибут `aria-controls` служит указателем на всплывающее меню, управляемое кнопкой меню.
	`расширенная ария = "истина"`	`кнопка`	Указывает, что всплывающее меню открыто.
	`расширенная ария = "ложь"`	`кнопка`	Указывает, что всплывающее меню закрыто.

Всплывающее меню

Роль	Атрибут	Элемент	Применение
`меню`		`ул`	Атрибут `role="menu"` идентифицирует элемент `ul` как виджет меню ARIA `.` `Доступное имя виджета меню происходит от атрибута aria-labeledby .` `Виджет меню не нуждается в tabindex , поскольку элемент ul[role"menu"] никогда не получает фокус клавиатуры.`
	`aria-labeledby="[IDREF]"`	`ул`	Указатель на элемент с соответствующим `id="[IDREF]"` , который определяет доступное имя для меню , в данном примере "Действия".
`пункт меню`		`ли`	Атрибут `role="menuitem"` идентифицирует `li` элемент как виджет ARIA `menuitem` . Доступное имя для виджета `menuitem` происходит от дочернего текстового содержимого элемента `li` . Виджет `пункта меню` имеет `tabindex="-1"` .
	`tabindex="-1"`	`ли`	Идентифицирует каждый `li[role=menuitem]` как интерактивный элемент на странице (например, может получить фокус клавиатуры), но не является частью порядка вкладок на странице.

Исходный код Javascript и CSS

CSS: MenubuttonAction.css
Javascript: Menubutton.js
Javascript: MenuItemAction. js
Javascript: PopupMenuAction.js

Исходный код HTML

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

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

Вы узнаете, как создать всплывающее меню, которое:

Привлекательный, функциональный и красивый
Отзывчивый на мобильных устройствах

Дизайн всплывающего окна и его содержимого

Перейдите к Шаблоны > Всплывающие окна > Добавить новое всплывающее окно и дайте имя. (Альтернативный метод — нажать CMD+E или CTRL+E , чтобы открыть Finder , найти всплывающее окно, выбрать Добавить новое всплывающее окно и дать ему имя. )
Выберите предварительно разработанное всплывающее окно шаблон или закройте наложение библиотеки и создайте свое всплывающее окно с нуля. Для этого примера мы создадим свой собственный, но , вы также можете найти этот шаблон в своей библиотеке шаблонов всплывающих окон Elementor Pro . Просто найдите «меню» в библиотеке всплывающих окон, чтобы найти его.

Popup> Layout Tab

Ширина : SET 85VW
Оверлей : Hide
Входной анимация : FADE В
Antrance Animation : FADE В
Antrance Animation : FADE.
Popup
Box Shadow : Установите их по своему усмотрению.
Кнопка закрытия
1. Вертикальная позиция : 4
2. Color : установите цвет на #878787
3. Размер : 35
.
Теперь добавьте раздел с двумя столбцами.
Дизайн первого столбца
Раздел > Макет
1. Ширина содержимого : Полная ширина
2. Пробел между столбцами : Нет промежутка
Перетащите виджет «Внутренний раздел» в первый столбец.
Под Раздел > Макет > Зазор между столбцами , установите Нет зазора .
Под Section > Advanced , установите Padding на 70 пикселей по всему периметру.
Раздел > Дополнительно
Заполнение : 70 сверху, снизу, слева и справа.
Перетащите виджет «Заголовок» в первый столбец.
до 9 лет0223 Стиль > Типографика , установите размер 60, а под Вес установите 100.
Совет : Сейчас самое время настроить заголовки Мобильные настройки .
Создание остальных пунктов меню
1. Щелкните правой кнопкой мыши ручку виджета «Заголовок» и выберите «Дублировать».
2. Повторите дублирование для необходимого количества пунктов меню.
3. Отредактируйте текст заголовка для каждого виджета «Заголовок», чтобы правильно обозначить каждый пункт меню
Добавить кнопку в меню
Перетащите виджет «Кнопка» под пункты меню и настройте его по своему вкусу.
На вкладке Advanced > Margin , установите значение 70 для Top, а затем щелкните значок адаптивного окна просмотра , щелкните значок Mobile и установите для параметра Mobile Margin значение 40 для верхнего края.
Перетащите еще один виджет Inner Section в первый столбец под кнопкой.
1. Под Раздел > Макет > Ширина , установите Полная ширина .
2. Под Раздел > Макет > Зазор между столбцами, установить Без зазора .
3. В разделе «Раздел» > «Дополнительно» > «Отступы» установите 30 для верхнего края, 70 для правого, 50 для нижнего и 70 для левого.
4. Теперь щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
Добавить кнопки «Поделиться» в меню
Перетащите виджет «Кнопки общего доступа» (Pro) в столбец.
Кнопки «Поделиться» > «Контент»
1. При необходимости отредактируйте элементы социальных сетей.
2. Skin : минимальный
3. Выравнивание : слева
Кнопки обмена> Стиль
1. Размер кнопки : 1
2. Color : Custom Design ( ( ( (, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, 9049, , 9049. Второй столбец
  Щелкните правой кнопкой мыши маркер столбца, чтобы изменить его настройки.
  Column> Style
  Фон
  Фон Цвет : SET TO #000000 (черный)
  Второй цвет : SET TO #000000 (BLACK)
  Примечание : НОВАЯ ФОНА : НОВАЯ НОВАЯ ФОНА. установлен, вы его еще не увидите, потому что в колонке еще нет содержимого.
  Создать информационный бюллетень Подписаться на форму призыва к действию
  Перетащите виджет «Внутренний раздел» в этот столбец.
  Щелкните правой кнопкой мыши маркер столбца и выберите Удалить , чтобы удалить один из столбцов, оставив вам только один.
  Внутренняя секция > Дополнительно
  Поле : Установите значение 130 только для нижнего края
  Отступы : Установите значение 70 для верхнего края, 60 для правого края, 70 для нижнего края и 60 для левого перетаскивания
  90 90 Виджет в столбце
  Отрегулируйте текст заголовка (т.е. Подпишитесь на нашу рассылку), а также размер текста, цвет и т. д. по мере необходимости.
  Перетащите Форма Виджет (Pro) под заголовком
  Форма > Контент
  Поля формы
  Нажмите X справа от полей Имя и Сообщение, так как для этого примера нам нужен только адрес электронной почты.
  Input Size : Medium
  Email > Content > Column Width : 80%
  Submit Button
  Size : Medium
  Column Width : 20%
  Alignment : Right
  Icon : Long Arrow Right
  Form > Style
  Form
  Column Gap : 0
  Row Gap : 0
  Field
  Text Color : Белый
  Цвет фона : Прозрачный
  Цвет рамки : Белый
  Ширина границы : 1 только для нижнего края0507
  Кнопка
  ЦВЕТА ФОНА : Прозрачный
  Цвет текста : белый
  Граница : Сплошной
  . Отображение продуктов
  Перетащите еще один виджет «Внутренний раздел» в этот столбец под формой.
  Внутренняя секция > Дополнительно
  Прокладка : Установите значение 30 только для правого
  Responsive
  Hide On Mobile : Hide
  Inner Section > Layout
  Columns Gap : No Gap
  Right-click a column handle and select Delete to delete one of the столбцы, оставив вам только один.
  Редактировать столбец
  Столбец > Дополнительно
  Поле : Установите -60 (минус 60) только для левого края столбец
  Заголовок> Стиль
  Цвет текста : черный (#000000)
  Вес : 700
  .
  Фон
  Цвет : Белый (#ffffff)
  Граница
  Радиус границы : 5 для всех сторон
  90 0 4 1 9 0 9 0 4 5 0 9 9 0 4 5 0 94 Color : rgba(0,0,0,0. 21)
  Box Shadow > Horizontal : 0
  Box Shadow > Vertical : 10
  Box Shadow > Blur 90 7 0 : 2 30 Распространение : -10 (отрицательный 10)
  Положение : набросок
  Shadow Box (Hover)
  Color : RGBA (0,0,0,0,21)
  49444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444944444444444444444444444449н. 0
  Тень коробки > Вертикальная : 15
  Box Shadow> Blur : 40
  Box Shadow> Распространение : -10 (отрицательный 10)
  Положение : наброски
  Перетаскивание .
  Изображение
  Пока не выбирать изображение
  Размер изображения : Полный
  Выравнивание : Левый
  Выравнивание : Левый
  9000 дублированный виджет.
  Заголовок > Стиль
  Размер : 15
  Вес : 300
  Теперь измените формулировку для каждого.
  Щелкните правой кнопкой мыши дескриптор столбца и продублируйте его дважды, чтобы всего было 3 столбца.
  Отредактируйте столбец для среднего и последнего столбцов, изменив поля в столбце > Дополнительно на -40 для левого поля в среднем столбце и -20 для левого поля в последнем столбце.
  Для каждого столбца отредактируйте виджет Изображение, выбрав изображение. Здесь хорошо работают даже изображения .gif.
  При необходимости отрегулируйте текст и поля.
  Регулируйте для мобильных устройств
  Редактировать каждую из внутренних секций в левой колонке
  Внутренняя секция> Advanced
  Padding : 25 для всех сторон
  Click Click COG COG / Gear /995 COG / Gear /995 COG / Gear /95. в левом нижнем углу панели, чтобы вернуться к настройкам всплывающих окон.
  Настройки всплывающего окна > Макет
  Ширина : 100vw
  Форма
  Установите ширину поля электронной почты и кнопки отправки на 80% и 20% соответственно.
  Установка параметров публикации
  Нажмите кнопку Опубликовать . Для этого всплывающего окна нет условий , триггеров или расширенных правил , поэтому нажмите кнопку Сохранить и закрыть .
  Редактирование шаблона заголовка вашего сайта, созданного Elementor
  Перейдите к Шаблоны > Конструктор тем > Заголовки > Выберите заголовок и нажмите Редактировать с помощью Elementor
  Щелкните дескриптор виджета кнопки меню, чтобы отредактировать виджет, если он существует, или создать новый.
  Кнопка
  Ссылка : нажмите на значок и выберите Действия> Посчетный вечер
  Клипку на .

html — Не работает выпадающее меню через CSS (hover)

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Выпадающие меню · Bootstrap на русском

Содержание

Примеры

Одиночная кнопка выпадающего меню

Split кнопка с выпадающим меню

Изменение размера

Вариант списка сверху

Использование

С помощью данных атрибутов

Через JavaScript

Варианты

Методы

События

Пример кнопки меню: Действия | Авторская практика WAI-ARIA 1.1

Пример

Поддержка клавиатуры

Кнопка меню

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

Роль, свойство, состояние и атрибуты Tabindex

Виджет кнопки меню

Всплывающее меню

Исходный код Javascript и CSS

Исходный код HTML

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

Дизайн всплывающего окна и его содержимого

Popup> Layout Tab

Popup

Кнопка закрытия

.

Дизайн первого столбца

Раздел > Макет

Раздел > Дополнительно

Создание остальных пунктов меню

Добавить кнопку в меню

Добавить кнопки «Поделиться» в меню

Кнопки «Поделиться» > «Контент»

Кнопки обмена> Стиль

Column> Style

Фон

Создать информационный бюллетень Подписаться на форму призыва к действию

Внутренняя секция > Дополнительно

Форма > Контент

Поля формы

Submit Button

Form > Style

Form

Field

Кнопка

Внутренняя секция > Дополнительно

Responsive

Inner Section > Layout

Редактировать столбец

Столбец > Дополнительно

Заголовок> Стиль

.

Фон

Граница

Shadow Box (Hover)

Изображение

Заголовок > Стиль

Регулируйте для мобильных устройств

Внутренняя секция> Advanced

Настройки всплывающего окна > Макет

Форма

Установка параметров публикации

Редактирование шаблона заголовка вашего сайта, созданного Elementor

Кнопка

Добавить комментарий Отменить ответ