Inter-Net.PRO

Сделать открывание списка при наведении в Bootstrap 4

  • 404 104
28 июнь 2019 12:02 #1 от Inter-Net PRO
В бутстрапе 4 в навбар можно добавлять выпадающие списки dropdown. Имеют они следующую вёрстку:
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</li>
Здесь вёрстка не всего навбара, а только пункта меню с выпадающим списком. Это фрагмент пункта Dropdown link из официальной документации   https://getbootstrap.com/docs/4.3/components/navbar/#nav  (3-ий вариант).

По умолчанию список из подпунктов меню отображается только при клике на родительский пункт меню. Чтобы сделать так, чтобы список открывался при наведении курсора мышки, нужно сделать следующие действия:
В CSS добавляем:
@media only screen and (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
Это всё. Единственное, возможно вам нужно будет почистить кеш браузера чтобы увидеть изменения.
Теперь выпадающее меню будет выводится при наведении курсора на родительский пункт находящийся в навбаре.

Чтобы при клике на родительский пункт у которого есть выпадающий список выполнялся переход по ссылке указанной в атрибуте href, а не просто открывался выпадающий список, как это сделано в бутстрапе по умолчанию, в js-файл подключённый после библиотеки JQuery добавляем следующий код:
$('.dropdown-toggle').click(function(e) {
    if ($(document).width() > 768) {
        e.preventDefault();
        var url = $(this).attr('href'); 
        if (url !== '#') { 
            window.location.href = url;
        }
    }
});
Теперь при клике по пункту меню с выпадающим списком будет выполняться переход.

Авторизация

Войти через соцсети: