Bootstrap dropdown on hover

В стандартной версии Bootstrap3 для активизации выпадающего меню нужно кликнуть по кнопке.

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown 
        <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Dropdown link</a></li>
        <li><a href="#">Dropdown link</a></li>
    </ul>
</div>

Подробнее по ссылке:

getbootstrap.com/components

Для того чтоб наше выпадающее меню появлялось при наведении на ссылку нам понадобятся дополнительные файлы:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>

Эти файлы можно добавить через bower

bower install bootstrap-hover-dropdown

Вот ссылка на git

github.com/CWSpear/bootstrap-hover-dropdown

Также в коде вам нужно будет добавить некоторые опции, а именно: после data-toggle=»dropdown» добавить data-hover=»dropdown» и при необходимости установить некоторые опции. Пример:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Здесь вы можете видеть некоторые настройки:

data-delay=»1000″ — задержка в миллисекундах. Это время, чтобы подождать, прежде чем закрыть выпадающее меню, когда курсор уже не на кнопке, активировавшей его.

data-close-others=»false» — опция, с помощью которой мы устанавливаем будут ли у нас закрываться все остальные выпадающие меню или нет. В данном случае они не будут закрываться. Это хорошо , когда у вас есть выпадающие меню близко друг к другу, что могут перекрываться. По умолчанию это «true» — закрывать.

data-hoverDelay — задержка перед открытием в миллисекундах. По умолчанию 0.

Альтернативный способ — инициализация при помощи js

$('.dropdown-toggle').dropdownHover(options);

Демонстрацию кода можно посмотреть здесь:

bootstrap-hover-dropdown Demo

bootstrap, dropdown, hover, наведение, фреймворк