Як зробити на Bootstrap випадаюче меню?

Від автора: я вітаю вас. Сьогодні ми розглянемо, як зробити на Bootstrap випадаюче меню. З нуля для цього вам довелося б написати енну кількість коду, за допомогою фреймворку же це зробити набагато простіше.

Як завжди нам допоможе документація. Я вже не знаю, скільки разів я звертався до неї в цьому циклі статей. Але дійсно достатньо всього лише дивитися і в неї і копіювати звідти приклади. Наприклад, ось код для формування простого випадаючого меню, де обидва пункти є випадаючими:

Отже, за реалізацію одного випадаючого меню можна використовувати окремий блок з класом dropdown, в нього потрібно вкласти посилання або кнопку, при натисканні по якій буде безпосередньо розкриватися меню. Для посилання (або кнопки) обов’язковим атрибутом є data-toggle = dropdown, щоб меню коректно відкривалося.

Ну а самі пункти випадаючого меню формуються списком. Пункт списку з класом divider дозволяє намалювати красивий простий роздільник між пунктами.

Можливо, доведеться підкоригувати відображення пунктів, поставити їх в один ряд, тому що спочатку dropdown – блочний елемент. Я прописав деякі стилі для стилізації:

.dropdown{
float: left;
margin-right: -20px;
}
.dropdown>a{
background: #7AA437;
color: #fff;
text-decoration: none;
padding: 10px;
}
.dropdown .caret{
margin-right: 10px;
}

Пункти випадаючого списку меню також можна оформити по вашому розсуду.

Кнопка-випадаюче меню

Код підійде той же самий, тільки замість посилання вставити кнопку, а загальним контейнера замість класу dropdown вкажіть btn-group:

Міста

Відміну від кнопки посилання в тому, що кнопки не потрібно прописувати стилі, на відміну від посилання. Також розміри кнопки можна легко змінювати за допомогою класів btn-lg|md|sm|xs. Також випадаюче меню можна зробити з окремими кнопками, цей приклад ви можете подивитися в документації.

Випадаюче меню як частина горизонтального меню

Якщо вам потрібно зробити випадаюче меню в горизонтальній навігації, найбільш зручно буде використовувати такий код:

Таких пунктів в навігації ви можете розмістити кілька і вони будуть розташовуватися в один рядок, можете спробувати.

Як зробити Bootstrap випадаюче меню при наведенні на пункт?

На жаль, за замовчуванням в Bootstrap немає такої можливості всі випадають меню випадають тільки при кліці по пункту. Але не будемо забувати, що фреймворк має повністю відкритий вихідний код, тому можливість випадання при наведенні курсору ви можете додати у фреймворк самостійно.

У нас на сайті вже були статті про те, як зробити випадає навігацію при наведенні, можете почитати або знайти цю інформацію в інших джерелах.

Що ж, ну а я на цьому буду закінчувати сьогоднішню досить коротку статтю, приклади ми розібрали і я думаю, що для вас тепер не складе праці реалізовувати такі навігації за допомогою фреймворка.