Спадаюче меню, webreference

Такий тип меню міцно завоював місце в операційних системах і програмах. На сайтах також застосовується досить часто через свою компактність і ієрархічної структури - кожен пункт меню може містити підміню, а той в свою чергу ще одне. Втім, через це є деякі проблеми пов'язані зі зручністю сприйняття. По виду меню неможливо відразу зрозуміти скільки пунктів воно містить, а вкладені підміню ускладнюють навігацію. З цих причин Microsoft в деяких своїх програмах відмовилася від спадаючого меню на користь стрічкового інтерфейсу, як у Word. Але головне, є інструмент, а вже як ним користуватися вирішувати вам, виходячи зі своїх завдань.

У Bootstrap саме меню і кнопка для його виклику - це два різних елемента об'єднаних в один блок з класом dropdown. Всередину додаємо кнопку з атрибутом data-toggle і значенням dropdown.

Традиційно біля тексту вказується невелика стрілка вниз - вона означає, що користувач має справу саме з спадаючим меню, а не зі звичайною кнопкою або текстом. Для її створення просто вставте після написи на кнопці (приклад 1).

Приклад 1. спадаючі меню

Нижче кнопки ми додаємо список з пунктами меню і пишемо клас dropdown-menu. Все інше бере на себе Bootstrap, так що додаткових дій від нас не вимагається. В результаті отримаємо наступне меню (рис. 1).

роздільник

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

з класом divider. як показано в прикладі 2.

Приклад 2. Роздільник

Результат даного прикладу показаний на рис. 2.

Мал. 2. Застосування роздільник в меню

Блокування пунктів меню

Якщо деякі пункти меню потрібно заблокувати, то до елементу

слід додати клас disabled (приклад 3).

Приклад 3. Блокований пункт меню

Такий пункт меню буде видно, але він відображається іншим кольором, на нього не можна клацнути, а при наведенні на пункт курсора миші курсору набуде (рис. 3).

Мал. 3. Блокований пункт меню

Відкрите меню

Користувачеві можна відразу показати відкрите меню, тоді йому не доведеться зайвий раз клацати по ньому щоб подивитися, що за ним ховається. Просто додайте клас open до батьківського

.

вид кнопок

Крім додавання традиційних кнопок допустимо вставити кнопку, у якій стрілка від тексту візуально відокремлена (рис. 4).

Мал. 4. Форма кнопки зі стрілкою

Для створення такого елемента зробимо дві кнопки - одна з текстом, інша зі стрілкою і об'єднаємо їх в групу, додавши клас btn-group (приклад 4).

Приклад 4. Кнопка зі стрілкою

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

В даному випадку біла стрілка на зеленому тлі буде зліва від тексту «Меню».