Выпадающие меню, активируемые при наведении курсора мыши, в Twitter Bootstrap

Многие пользователи предпочитают, чтобы их меню Bootstrap раскрывались при наведении курсора, что устраняет необходимость в явных кликах . В этой статье рассматриваются как функции наведения, так и удаление значков со стрелками рядом с заголовками меню.

Выпадающий список, активируемый при наведении

Чтобы включить автоматическое раскрывающееся меню при наведении, используйте CSS для выберите скрытую опцию меню. Добавьте следующий код в свой CSS:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

Для адаптивного дизайна оберните код в медиа-запрос:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Удаление значка стрелки

• Bootstrap 3: Удалите HTML из элемента привязки .dropdown-toggle.
• Bootstrap 2 и ниже: Назначьте и удалите стрелки, используя этот CSS селектор:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Включив эти модификации CSS, вы можете создать раскрывающиеся меню, активируемые при наведении, и исключить значки со стрелками, улучшая взаимодействие с пользователем и настраивая меню Bootstrap по своему желанию.