Сделать открывание списка при наведении в 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-кодами.

Пагинация с разметкой Bootstrap 4

Как в Winter CMS сделать так, чтобы пагинация выводилась с html-разметкой для Bootstrap 4. Не самое лучшее, но всё таки решение которое я нашёл для этого.

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

Юрій

15:37 14.12.2020 #

Спасибо!! А не подскажете как выровнять элементы вот здесь https://+++++

Admin

15:43 14.12.2020 #

Вам нужно в css добавить этим элементам свойства padding или margin.

Чтобы дать конкретный ответ - для этого нужна ссылка на сайт. Из браузера видно как выравнивать, для этого есть консоль разработчика. Можете оставить ссылку, я её потом затру, чтобы сохранить анонимность вашего сайта.

Юрій

15:47 14.12.2020 #

htt---сайт---

Admin

15:59 14.12.2020 #

Добавьте вот такой стиль в css :

#top-links.nav.pull-right {
    margin-top: 7px;
}

или

#top-links.nav.pull-right {
    padding-top: 7px;
}

Это выровняет блок ссылок где личный кабинет, корзина и т.д. по центру блока меню пользователя.

Если тема не обновляется, то можно это добавить в файл /catalog/view/theme/default/stylesheet/stylesheet.css. Если тема сайта обновляется, то лучше записать этот стиль в другое место, чтобы изменения не потерялись при обновлении темы.

Возможно чтобы увидеть изменения, нужно будет почистить кеш браузера.

Юрій

16:25 14.12.2020 #

Спасибо Вам. Сделал..

Admin

16:24 14.12.2020 #

И чтобы фон изменить в выпадающем списке где номера телефонов, добавьте ещё вот такой стиль:

#top ul.dropdown-menu {
    background: #3a3a3a;
}

Юрій

16:37 14.12.2020 #

Супер! Спасибо!!!

Admin

16:38 14.12.2020 #

Кнопки соцсетей случайно не у меня на этом сайте генерировали?

Нужно поправить? Могу подсказать.

Мне вот тоже кто бы подсказал как мне правильно сколы на авто подкрасить. У меня три скола, нужно лечить их, но как я сомневаюсь.

Юрій

17:15 14.12.2020 #

Да иконки у Вас генерировал.. А что нужно подправить?

Admin

17:19 14.12.2020 #

Я увидел там html некрасиво вставлен и сами кнопки с нижнего ряда наезжают на верхний.

Сейчас посмотрю.

Admin

17:22 14.12.2020 #

Перед кнопками у вас объявлен список, но он пустой. Его лучше удалить. Вот это:

<ul class="social-icons-2">

 </ul>

Сейчас продолжу.

Юрій

17:28 14.12.2020 #

Убрал..

Admin

17:48 14.12.2020 #

Теперь смотрите, нажмите на главной сайта комбинацию клавиш

Ctrl + U

откроется исходный код страницы. Начиная со строки 55 вы увидите такое:

<style type="text/css">
    .social{margin-top:-15px;}
    .social a{width:25px; height:25px; text-align:center; margin:0 2px; display:inline-block; font-size:20px; background:#777; color:#fff; border-radius:2px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
    .social a.facebook:hover{background:#39599f;}
    .social a.twitter:hover{background:#45b0e3;}
    .social a.instagram:hover{background:#e2415a;}
    .social a.google_plus:hover{background:#dc4a38;}
    .social a.vk:hover{background:#4d75a3;}
    .social a.odnoklassniki:hover{background:#f58220;}
    .social a.skype:hover{background:#45b0e3;}
    .social a.whatsapp:hover{background:#40c353;}
    .social a.telegram:hover{background:#289fd9;}
    .social a.viber:hover{background:#665ca7;}
</style>

где то вы в вашей cms-ке добавили эти стили. Их тоже удалить. Именно первая строчка .social{margin-top:-15px;} сделала так что кнопки с нижнего ряда начали налазить на верхние. Весь этот блок - удалить. Это вы наверное когда разные кнопки пробовали добавили.

Вместо этого лучше заменить на мои стили:

.social {display: inline-block;}
.social a {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 5px 5px 0;
    text-align: center;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.social a:hover {
    border-color: #888;
    opacity: .8;
}
.social svg {
    margin-top: 7px;
    width: 32px;
    height: 32px;
}
.facebook a{background:#3b5998}
.instagram a{background:#3f729b}
.messenger a{background:#009bff}
.telegram a{background:#249bd7}
.viber a{background:#7b519d}
.whatsapp a{background:#50b154}

А ещё лучше оптимизированный вариант в одну строчку:

.social{display:inline-block}.social a{display:block;width:48px;height:48px;margin:0 5px 5px 0;text-align:center;color:#fff;border:1px solid #ccc;border-radius:24px;box-shadow:0 2px 4px rgba(0,0,0,0.15)}.social a:hover{border-color:#888;opacity:.8}.social svg{margin-top:7px;width:32px;height:32px}.facebook a{background:#3b5998}.instagram a{background:#3f729b}.messenger a{background:#009bff}.telegram a{background:#249bd7}.viber a{background:#7b519d}.whatsapp a{background:#50b154}

И сейчас напишу по самому блоку с кнопками, как поправить.

Юрій

18:25 14.12.2020 #

не могу найти этот маргин-топ -15px

Admin

18:06 14.12.2020 #

А теперь блок кнопок. Смотрю вы стили кнопок в кнопку фейсбука запихали. Хоть и без ошибки синтаксиса, но лучше так не делать. Удалите из html код кнопок и вставьте так:

<div class="social-block">

</div>

Если вы не можете вставить стили вместо того блока что я в предыдущем комменте сказал, то можете вставить стили прям в html перед блоком с кнопками. Тогда всё вместе получится вот так:

<style>.social{display:inline-block}.social a{display:block;width:48px;height:48px;margin:0 5px 5px 0;text-align:center;color:#fff;border:1px solid #ccc;border-radius:24px;box-shadow:0 2px 4px rgba(0,0,0,0.15)}.social a:hover{border-color:#888;opacity:.8}.social svg{margin-top:7px;width:32px;height:32px}.facebook a{background:#3b5998}.instagram a{background:#3f729b}.messenger a{background:#009bff}.telegram a{background:#249bd7}.viber a{background:#7b519d}.whatsapp a{background:#50b154}</style>
<div class="social-block">

</div>

Я кнопки обернул в тег div с классом social-block, теперь можно будет при надобности подвинуть весь блок с кнопками, уменьшить или увеличить отступы.

Как код скопируете и вставите себе, маякните, я удалю чтобы не палить ваши соцсети в коде.

Юрій

18:25 14.12.2020 #

Вставил Ваш код..

Admin

18:14 14.12.2020 #

И ещё увидел. У вас в 54 строчке исходного кода файл css подключён:

<link href="catalog/view/javascript/font-awesome/css/fa-viber.css" rel="stylesheet" type="text/css" />

Удалите это подключение. И сам файл можно тоже удалить, это кусок стиля из иконочного шрифта font awesome для кнопки вайбера. Он вам не нужен - лишний мусор.

Юрій

18:24 14.12.2020 #

fa-viber удалил..

Admin

18:44 14.12.2020 #

Откройте главную сайта и нажмите на клавиатуре кнопки Ctrl + U

Начиная с 54 строки вы увидите:

<link href="catalog/view/javascript/font-awesome/css/fa-viber.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .social{margin-top:-15px;}
    .social a{width:25px; height:25px; text-align:center; margin:0 2px; display:inline-block; font-size:20px; background:#777; color:#fff; border-radius:2px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
    .social a.facebook:hover{background:#39599f;}
    .social a.twitter:hover{background:#45b0e3;}
    .social a.instagram:hover{background:#e2415a;}
    .social a.google_plus:hover{background:#dc4a38;}
    .social a.vk:hover{background:#4d75a3;}
    .social a.odnoklassniki:hover{background:#f58220;}
    .social a.skype:hover{background:#45b0e3;}
    .social a.whatsapp:hover{background:#40c353;}
    .social a.telegram:hover{background:#289fd9;}
    .social a.viber:hover{background:#665ca7;}
</style>

У вас подключён файл catalog/view/javascript/font-awesome/css/fa-viber.css. Сам файл вы удалили. нужно подключение удалить. Обычно это в файле index.php темы в блоке между тегами head прописано. Я на гитхабе посмотрел репозиторий этой cms-ки, там установочник структуру сайта расставляет. А так у меня сайта на этой cms-ке нету. Я последний раз в неё лет 7 назад рылся. Не помню как структура устроена чтобы подсказать что и где. Но там всё просто сделано. Это уже вы добавляли или кто то вам помогал.

И потом идут стили, их тоже нужно удалить. Может это в настройках темы пользовательские стили. Может в том же файле index.php темы. Но я думаю это в настройках где то добавляются пользовательские стили.

Юрій

18:53 14.12.2020 #

Все сделал!!! Это модуль был для соцсетей, но я его не использывал.. И не удалил..

Admin

18:58 14.12.2020 #

Теперь и код чище стал, и кнопки стоят ровно.

Я код с ссылками удалил. Удачных вам продаж!

Юрій

19:01 14.12.2020 #

Спасибо Вам! Вы очень помогли мне!

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