Кликабельный родитель в меню на Bootstrap 4

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

Я делаю много прототипов на Bootstrap, кроме того использую данный фреймворк при создании тем WordPress.

Удивительно, но поведение меню в Бутстрапе ведет себя не так как многие привыкли. Так как фреймворк заточен под адаптив и под мобильные устройства, то родительский элемент меню клике на него показывает выпадающий список, а второй клик его закрывает.

Но что, если нам нужно сделать так, чтобы родительский пункт меню тоже был бы ссылкой? В таком случае правильное решение — это сделать так, чтобы выпадающий список появлялся при наведении, а не при клике на родительский пункт.

По умолчанию выпадающее меню в Bootstrap открывается по щелчку мыши, а ссылка на родительский пункт больше не работает, так как родительский пункт просто используется для запуска выпадающего меню. Но Javascript-код и CSS-стили помогут нам открыть выпадающий список при наведении, а также активирует ссылку на родительский пункт меню.

<script>
jQuery(function($) {
    if($(window).width()>769){
        $('.navbar .dropdown').hover(function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

        }, function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

        });

        $('.navbar .dropdown > a').click(function(){
            location.href = this.href;
        });

    }
});
</script>

Или вы можете использовать следующий CSS:

<style>
@media only screen and (min-width:769px) {
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative !important;
}

.dropdown-submenu>.dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -6px !important;
    margin-left: -1px !important;
    border-radius: 0 !important;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block !important;
}

.dropdown-submenu>a:after {
    display: block;
    content: "\f105";
    font-family: 'FontAwesome';
    margin-top: -18px;
    right: 15px;
    position: absolute;
    font-weight: 300;
}
}
</style>

Решение рабочее для десктопного браузера. Для мобильных поведение останется стандартным для Bootstrap. Держите это в голове, когда будете верстать свой сайт на Bootstrap.

Сергей Ермилов