Как сделать выпадающее меню (Bootstrap Dropdown) по hover эффекту

По-умолчанию выпадающее меню (dropdown) в Twitter Bootstrap доступно только по клику. Но иногда требуется получить hover эффект. Магически решается парочкой CSS строчек:

Пример для Bootstrap Navbar

Пишите в комменты, если есть лучшее решение.

Пример сайта с dropdown bootstrap menu по hover.

UPD: На Github появился плагин, реализующий данный функционал https://github.com/CWSpear/bootstrap-hover-dropdown
Подходит как для Bootstrap 2, так и для Bootstrap 3. Пример его использования.

13 комментариев, подписаться на rss

Владимир Ответить

Если в выпадающем меню будут подменю, то такая реализация покажет и все пункты субменю. А как по hover выводить без субменю?

Денис Ответить

Спасибо тебе чувак)) по клику у меня вообще не работало. а твой код добавил и заработало. Выручил)

    Владимир Ответить

    Спасибо — работает.
    Вот только как это будет вести себя на девайсах с пальцем вместо мышки?

      Hyperc0der Ответить

      У меня на iPad 2 выпадающее меню работает по тапу как и раньше.

Павел Ответить

Спасибо. Работает.
Владимир, на девайсах никак) Поэтому спорное решение, кому-то нужно, кому-то нет.

    Hyperc0der Ответить

    По тапу открывает через javascript, на устройствах с поддержкой js должно работать.

      Андрей Ответить

      как сделать с ява-скриптом? объясни плиз. на офф сайте трабла с этим.

Hyperc0der Ответить

Добавил пример сайта, где реализовано выпадающее меню bootstrap по hover. Можете потестировать на мобильных устройствах.

Mamba Ответить

Если тут http://gotogames.net/ кликнуть на Игры, а потом увести мышь с меню, то выпадающее меню не пропадает.

    Hyperc0der Ответить

    Это сделано для мобильных платформ, т.к. там нет hover эффекта.

Incomeseo Ответить

Нашел такое решение, вроде работает.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}

Hyperc0der Ответить

UPD: Добавил ссылку на репозиторий Github плагина, реализующий данный функционал.

Сергей Ответить

Вот решение отмены работы стилей для очень узких экранов
@media (min-width: 768px) {
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
margin: 0;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
}

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

Антибот *