Material Design Lite. Меню
Рассмотрим примеры с меню.
Классы для работы с меню
- mdl-button - кнопка меню. Обязательно
- mdl-js-button - задает поведение для кнопки меню. Обязательно
- mdl-button--icon - значок для меню (три точки). Обязательно
- material-icons - выводит значок меню. Внутри кнопки добавить элемент i. Обязательно
- mdl-menu - список ul. Обязательно
- mdl-js-menu - задает поведение для ul. Обязательно
- mdl-menu__item - для пункта меню. Обязательно
- mdl-menu__item--full-bleed-divider - разделитель. Необязательно
- mdl-js-ripple-effect - эффект ряби для пункта меню. Необязательно
- mdl-menu--top-left - позиция меню. Необязательно
- (none) - по умолчанию. Выводит меню под кнопкой
- mdl-menu--top-right - выводит меню над кнопкой. Необязательно
- mdl-menu--bottom-right - выводит меню под кнопкой. Необязательно
Для меню нужно создать элемент button, который при нажатии будет показывать или скрывать пункты меню. Включите идентификатор или атрибут data-mdl-for для связи с неупорядоченным списком. Внутри кнопки используйте элемент i или span для значка меню.
<button id="menu1">
<i></i>
</button>
Используйте список ul для элементов списка с атрибутом for, в котором нужно указать идентификатор кнопки меню.
<ul for="menu1">
</ul>
Пункты меню формируются стандартными элементами li.
<ul for="menu1">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ul>
Осталось добавить специфические классы меню.
<button id="menu1" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
А также для пунктов меню.
<ul class="mdl-menu mdl-js-menu" for="menu1">
<li class="mdl-menu__item">Первый</li>
<li class="mdl-menu__item">Второй</li>
<li class="mdl-menu__item">Третий</li>
</ul>
Примеры
| Lower Left Menu | Lower Right Menu |
|
|
|
| Top Left Menu | Top Right Menu |
|
|
|
Вернуться на общую страницу Material Design Lite