Сайт веб-мастера Александра Климова
Меню

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 MenuLower Right Menu
  • Item #1
  • Item #2
  • Disabled Item
  • Item #1
  • Item #2
  • Disabled Item
Top Left MenuTop Right Menu
  • Item #1
  • Item #2
  • Disabled Item
  • Item #1
  • Item #2
  • Disabled Item

Вернуться на общую страницу Material Design Lite

Реклама