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

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

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

В бутстрапе 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 (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;
        }
    }
});

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

 

Записи по теме
Кнопки бутстрап
кнопки Кнопки в css-фреймворке Bootstrap. Цвета и размеры кнопок с примерами и готовыми HTML-кодами.
Модальное окно в Joomla
модальное окно Инструкция как в Joomla делать модальное (всплывающее) окно для шаблонов работающих на Bootstrap (Aurora, Protostar и др.) Скопируйте код и пропишите своё содержимое.
Пагинация с разметкой Bootstrap 4
пагинация Как в October CMS сделать так, чтобы пагинация выводилась с html-разметкой для Bootstrap 4. Не самое лучшее, но всё таки решение которое я нашёл для этого.

 

 

Комментарии 0

*** чтобы писать комментарии.