ниспадающее меню

Выпадающее меню

Плюсом использования псевдокласса :checked является то, что мы можем щёлкать по разным элементам и отслеживать их состояние — включено или нет. Этот механизм пригодится для создания выпадающего меню, которое можно привязать к определённому тексту. При щелчке по тексту появляется меню, ещё один щелчок это меню скрывает. На рис. 1 продемонстрировано, как это меню выглядит.

Выпадающее меню

Рис. 1. Выпадающее меню

Ниспадающее меню

Такой тип меню прочно завоевал место в операционных системах и программах. На сайтах также применяется довольно часто из-за своей компактности и иерархической структуры — каждый пункт меню может содержать подменю, а тот в свою очередь ещё одно. Впрочем, из-за этого имеются некоторые проблемы связанные с удобством восприятия. По виду меню невозможно сразу понять сколько пунктов оно содержит, а вложенные подменю затрудняют навигацию. По этим причинам Microsoft в некоторых своих программах отказалась от ниспадающего меню в пользу ленточного интерфейса, как у Word.

Работа с Bootstrap

Иконки из набора Font Awesome прекрасно сочетаются с фреймворками вроде Bootstrap. Хотя этот фреймворк уже содержит необходимый набор иконок, его можно расширить за счёт сторонних комплектов.