javascript — Выпадающее меню при наведении на вышестоящее меню
Есть код
<div>
<div>
<ul>
<div>
<div>
<span>
<span>
<button data-toggle="dropdown" data-target="#menu" type="button">
<span></span>
<span></span>
<span></span>
</button>
</span>
<span><div>КАТАЛОГ ТОВАРОВ</div></span>
</span>
</div>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Прайс</a></li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a></li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</div>
</ul>
</div>
</div>В результате подменю
отображается сразу при загрузке, а не при наведении на вышестоящий пункт меню — Услуги.
Как добиться отображение подменю при наведении на вышестоящий пункт меню?
- javascript
- html
- css
В первом приближении так, но у вас, судя по классам, все это дело должен делать скрипт из коробки! Бутстрап (CSS+JS) подключен? И кнопка-бутерброд обычно ВНЕ списка, вомзожно у вас ошибка в верстке.
.left-menu ul ul {display:none}
.left-menu ul li:hover > ul{display:block}<div>
<div>
<ul>
<div>
<div>
<span>
<span>
<button data-toggle="dropdown" data-target="#menu" type="button">
<span></span>
<span></span>
<span></span>
</button>
</span>
<span><div>КАТАЛОГ ТОВАРОВ</div></span>
</span>
</div>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Прайс</a></li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a></li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</div>
</ul>
</div>
</div>Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Выпадающее меню на Bootstrap 4 при наведении (событие hover)
org/BreadcrumbList»>- Информация о материале
- Bootstrap
Как известно, стандартный dropdown список раскрывается только при нажатии на главный пункт меню. По умолчанию выпадающий список имеет свойство «display: block;», когда срабатывает событие click и на оборот — чтобы скрыть, нужно опять нажать на меню.
На примере меню из документации Bootstrap 4:
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div>
<ul>
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Один</a>
</li>
<li>
<a href="#">Два</a>
</li>
<li>
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Три</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a href="#">Три один</a>
<a href="#">Три два</a>
<a href="#">Три три</a>
</div>
</li>
</ul>
</div>
</nav>
В данном варианте, если вы просто поместите это меню на сайте, подключите все необходимые библиотеки, меню будет работать по клику.
Чтобы меню раскрывалось и скрывалось при наведении (событие hover), достаточно чуть подправить css файл bootstrap 4 или прописать это в своем файле стилей:
nav.navbar .dropdown:hover > .dropdown-menu {
display: block;
}
Теперь при наведении, нашему списку будет присваиваться свойство «block» и он раскроется. Вот так легко это делается, не правда ли?
Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover. Я рекомендую прописать ниже еще вот такой код:
@media only screen and (max-device-width: 992px){
nav.navbar .dropdown:hover .dropdown-menu{
display: none;
}
}
Учтите, что этим вы не отменяете событие click – раскрытие меню по клику. Оно будет так же работать наравне и с наведением.
Как отключить событие click и оставить только событие hover, вы можете прочитать в этой статье:
Переход по ссылке главного (верхнего) меню раскрывающегося списка в Bootstrap 4
Всем удачи!
Добавить комментарий
Выпадающий список | Webflow University
Выпадающее меню — это встроенный элемент навигации, который можно добавить практически в любую область сайта. Чаще всего вы увидите раскрывающийся список на панели навигации веб-сайта.
Добавление раскрывающегося меню
, чтобы добавить раскрывающееся меню на ваш сайт:
- Open Добавить панель > Компоненты
- Перетащите выпадающий .0005
В раскрывающемся меню есть два дочерних элемента: переключатель раскрывающегося списка и раскрывающийся список.
Переключатель раскрывающегося списка состоит из текстового блока и значка стрелки.Настройки раскрывающегося списка
Раскрывающийся список не отображается, пока не будет нажат раскрывающийся список, но вы можете сделать его видимым, выбрав раскрывающийся список, затем перейдя на панель настроек и нажав Меню > Показать .
По умолчанию раскрывающийся список появляется, когда пользователь щелкает переключатель раскрывающегося списка, но вы можете сделать так, чтобы он отображался, когда пользователь наводит указатель мыши на переключатель раскрывающегося списка, включив Открыть меню при наведении опция. Время задержки закрытия — время, необходимое для закрытия раскрывающегося списка после наведения курсора на раскрывающееся меню — можно настроить в миллисекундах.
Примечание: Если вы используете Открыть меню при наведении и ваш раскрывающийся список закрывается до того, как вы наведете на него курсор, есть 2 варианта исправить это. Вы можете удалить верхние поля в раскрывающемся списке или нижние поля в раскрывающемся списке или , вы можете добавить задержку закрытия.Ссылки внутри раскрывающегося списка
В раскрывающемся списке есть три раскрывающихся ссылки. Вы можете просмотреть и отредактировать их, выбрав раскрывающееся меню, перейдя на панель настроек и нажав Меню > Открыть . Вы можете дважды щелкнуть внутри выпадающих ссылок, чтобы отредактировать текст — это также отрегулирует ширину ссылки.
Вы можете перемещать ссылки, щелкая и перетаскивая их на холсте. Кроме того, вы можете щелкнуть панель «Навигатор» и перетащить оттуда раскрывающиеся ссылки.
Вы можете выбрать, куда будет вести каждая ссылка, через панель настроек . Вы также можете добавить другую ссылку, нажав кнопку Добавить ссылку , или вы можете продублировать ссылку, скопировав и вставив ее.
Пользовательский переключатель раскрывающегося списка
Чтобы раскрывающийся список переключал ссылку:
- Перетащите текстовый блок из панели Добавьте панель в раскрывающийся блок0011
- Добавьте отступ (например, 20 пикселей) к каждой из 4 сторон нового текстового блока , чтобы увеличить интерактивную область
- Установите левый отступ раскрывающегося списка на 0 этот настраиваемый переключатель раскрывающегося списка, текстовая часть действует как ссылка, а часть со стрелкой открывает раскрывающийся список.
Если вы хотите, чтобы весь раскрывающийся список был ссылкой, узнайте, как создать собственный раскрывающийся список и используйте блок ссылок для создания переключателя раскрывающегося списка вместо использования блока div. Обратите внимание, что в этом случае вам нужно будет вызвать раскрывающееся меню при наведении курсора, поскольку нажатие на триггер перенаправит вас к связанному источнику.
Стилизация раскрывающегося списка и ссылок
Стилизация раскрывающегося списка работает так же, как и стилизация других элементов — сначала присвойте каждому элементу имя класса, а затем начните стилизацию.
Выпадающий список может находиться в двух состояниях — Скрыть и Показать . Состояние Скрыть — это состояние по умолчанию, когда раскрывающийся список закрыт, а состояние Показать — это когда раскрывающийся список отображается. Если у вас включен Показать на панели настроек и внесите изменения в стиль переключателя раскрывающегося списка или , добавьте к нему класс, в поле «Селектор» автоматически добавляется специальный класс «Открыть», который позволяет настраивать это состояние.
Вы также можете отредактировать состояние Hover для состояний Hide и Show , щелкнув раскрывающееся поле Selector и выбрав состояние, которое вы хотите стилизовать.
Чтобы отредактировать или оформить раскрывающуюся ссылку, выберите ее в навигаторе. В качестве альтернативы установите раскрывающийся список на Покажите , затем выберите его на холсте.
Вы также можете добавить эффект наведения к раскрывающимся ссылкам:
- Выберите раскрывающуюся ссылку
- Открыть Панель стилей > Поле выбора и открыть раскрывающееся меню
- После выбора появится класс «Hover». Любые изменения, сделанные с выбранным состоянием Hover , будут видны только при наведении курсора на раскрывающуюся ссылку. Полезно знать: По умолчанию текст раскрывающегося списка не переносится и может переполнить элемент раскрывающегося списка и страницу на небольших устройствах. Чтобы предотвратить это, выберите раскрывающийся текст, откройте Панель стилей > Типографика > Дополнительные параметры текста и установите разрыв на предварительная обертка .
Попробуйте Webflow — это бесплатно
Был ли этот урок полезен? Дайте нам знать!Спасибо за отзыв! Это поможет нам улучшить наш контент.
Свяжитесь с нашим сообществом
Свяжитесь со службой поддержки
Что-то пошло не так при отправке формы.
Связаться со службой поддержки
У вас есть предложение по уроку? Дайте нам знать
Спасибо! Ваша заявка принята!
Ой! Что-то пошло не так при отправке формы.
Как создать выпадающее меню при наведении с помощью HTML и CSS | Ндубуиси Агбанду
Фото: Line25.comВероятно, вы сталкивались с веб-страницей с подобными вещами, и вам интересно, как это было сделано?
На самом деле я собираюсь показать вам процесс, который я лично использую для этого.
Но учтите, очень важно, чтобы вы понимали логику, стоящую за этим, а не просто копировали и писали код. Итак, не теряя много времени, давайте перейдем к коду…..Программирование основано на логике, а не на коде: потому что для получения одного и того же результата можно использовать разные коды и подходы.
ШАГИ
#1. Откройте текстовый редактор и введите в нем обычный HTML-код. Например, doctype, html, head и т. д.
#2. В элементе body откройте div с элементом внутри него. Элемент может быть элементом кнопки, элементом привязки (a) и т. д. а затем дайте ему имя класса.
#3. Откройте другой div с именем класса внутри первого div. Именно внутри этого div вы поместите свое выпадающее содержимое. См. код ниже…
Учебное пособие по выпадающему меню при наведении
css">
CSS ШАГИ
- Придайте контейнеру отображение встроенного блока и положение относительно всего экрана, используя приведенный ниже код:
.dropdown {
display: inline-block;
позиция: относительная;
}2. Дайте другому div(.dropdown-content) внутри первого контейнера display: none и position: absolute, используя код ниже:
.dropdown-content {
display: none;
позиция: блок;
}3. Контейнер должен иметь наведение, указывающее на его содержимое.
.dropdown: hover .dropdown-content {
display: block;
}4. Элементы привязки (a) внутри содержимого раскрывающегося списка должны отображаться в виде блока. См.
Переключатель раскрывающегося списка состоит из текстового блока и значка стрелки.
Вы можете удалить верхние поля в раскрывающемся списке или нижние поля в раскрывающемся списке или , вы можете добавить задержку закрытия.
Чтобы предотвратить это, выберите раскрывающийся текст, откройте Панель стилей > Типографика > Дополнительные параметры текста и установите разрыв на предварительная обертка .
Но учтите, очень важно, чтобы вы понимали логику, стоящую за этим, а не просто копировали и писали код. Итак, не теряя много времени, давайте перейдем к коду…..