menuMDUIDocs
color_lens
Новый mdui 2 на базе Material Design 3 и Web Components уже здесь. Перейти к документации mdui 2.

Меню

Меню делятся на простые и каскадные. Простые меню подходят для мобильных телефонов и планшетов, а каскадные — для настольных устройств.

Использование

  1. Вызов через атрибуты
  2. Вызов через JavaScript

Связанное чтение

Рекомендации по дизайну Material Design: Компоненты - Меню

Стиль

Простое меню

Вы можете отключить пункт меню, добавив к нему атрибут disabled.

Добавление элемента <li class="mdui-divider"></li> позволяет вставить разделительную линию.

codeplay_arrow
Пример
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Простое меню с иконками

codeplay_arrow
Пример
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >remove_red_eye</i
      >Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >file_download</i
      >Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i
      >Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

Каскадное меню

Добавление класса .mdui-menu-cascade к элементу <ul class="mdui-menu"> превращает его в каскадное меню, подходящее для настольных устройств.

Вложенность меню может быть реализована путем добавления еще одного меню внутрь элемента <li class="mdui-menu-item"></li>. Теоретически поддерживается неограниченный уровень вложенности.

Элемент <span class="mdui-menu-item-helper"></span> добавляет краткое описание (подсказку) к пункту меню.

Элемент <span class="mdui-menu-item-more"></span> добавляет стрелку вправо к пункту меню, используемую для пунктов с подменю.

codeplay_arrow
Пример
<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

Использование

Вызов через атрибуты

Для этого способа не требуется писать JavaScript-код. Достаточно добавить атрибут mdui-menu="options" к управляющему элементу (например, к кнопке). При вызове через атрибуты данных требуется дополнительный параметр target для указания управляемого меню, значением которого является CSS-селектор целевого меню.

Примечание: Для правильного позиционирования меню и элемент, вызывающий его, должны находиться на одном уровне внутри одного и того же родительского элемента.

codeplay_arrow
Пример
<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#example-attr'}"
>
  open
</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>
codeplay_arrow
Пример
<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#demo-attr-cascade'}"
>
  cascade menu
</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space before paragraph</a
        >
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space after paragraph</a
        >
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Вызов через JavaScript

Инициализация компонента:

// anchorSelector — CSS-селектор или DOM-элемент элемента, вызывающего меню.
// menuSelector — CSS-селектор или DOM-элемент меню.
// options — параметры конфигурации компонента, см. список параметров ниже.
var inst = new mdui.Menu(anchorSelector, menuSelector, options);
Запуск

Параметр

Имя параметраТипПо умолчаниюОписание
positionstringautoПоложение меню относительно вызывающего его элемента.
  • top: Меню находится над вызывающим элементом.
  • bottom: Меню находится под вызывающим элементом.
  • center: Меню центрируется по вертикали в окне.
  • auto: Автоматическое определение положения. Приоритет: bottom > top > center.
alignstringautoВыравнивание меню относительно вызывающего его элемента.
  • left: Меню выравнивается по левому краю вызывающего элемента.
  • right: Меню выравнивается по правому краю вызывающего элемента.
  • center: Меню центрируется по горизонтали в окне.
  • auto: Автоматическое определение положения. Приоритет: left > right > center.
gutterint16Минимальное расстояние между меню и краем окна (в пикселях).
fixedbooleanfalseСпособ позиционирования меню.
  • true: Меню использует фиксированное позиционирование (fixed). При прокрутке страницы меню остается на месте.
  • false: Меню использует абсолютное позиционирование (absolute). При прокрутке страницы меню перемещается вместе со страницей.
coveredbooleanautoПерекрывает ли меню вызывающий его элемент.
  • true: Меню перекрывает вызывающий элемент.
  • false: Меню не перекрывает вызывающий элемент.
  • auto: Простое меню перекрывает вызывающий элемент, каскадное — нет.
subMenuTriggerstringhoverСпособ вызова подменю.
  • click: Подменю открывается при клике.
  • hover: Подменю открывается при наведении мыши.
subMenuDelayint200Задержка появления подменю (в миллисекундах). Работает только при subMenuTrigger: hover.

Метод

Имя методаОписание
open()Открыть меню.
close()Закрыть меню.
toggle()Переключить состояние меню (открыть/закрыть).

Событие

Имя событияОписаниеЦельПараметры
open.mdui.menuСобытие генерируется в начале анимации открытия меню.<ul class="mdui-menu"></ul>event._detail.inst: Экземпляр
opened.mdui.menuСобытие генерируется в конце анимации открытия меню.
close.mdui.menuСобытие генерируется в начале анимации закрытия меню.
closed.mdui.menuСобытие генерируется в конце анимации закрытия меню.

Список CSS-классов

Имя классаОписание
.mdui-menuОпределяет компонент меню.
.mdui-menu-cascadeОпределяет каскадное меню.
.mdui-menu-itemОпределяет пункт меню.
.mdui-menu-item-iconОпределяет иконку меню.
.mdui-menu-item-helperОпределяет пояснительный текст для пункта меню.
.mdui-menu-item-moreСтрелка вправо для пунктов меню с подменю.
arrow_backPrevious
Диалоги
arrow_forwardNext
Индикаторы прогресса