menuMDUIDocs
color_lens
O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Menu

Os menus são divididos em menus simples e menus em cascata. Menus simples são adequados para celulares e tablets, enquanto menus em cascata são adequados para desktops.

Como usar

  1. Chamar via atributos personalizados
  2. Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Menu

Estilo

Menu simples

Adicionar o atributo disabled a um item de menu o desabilita.

Adicionar o elemento <li class="mdui-divider"></li> adiciona um divisor.

codeplay_arrow
Exemplo
<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>

Menu simples com ícones

codeplay_arrow
Exemplo
<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>

Menu em cascata

Adicionar a classe .mdui-menu-cascade ao elemento <ul class="mdui-menu"> transforma o menu em um menu em cascata adequado para desktops.

O aninhamento de menus pode ser alcançado adicionando outro menu dentro de um elemento <li class="mdui-menu-item"></li>, suportando teoricamente níveis infinitos de aninhamento.

O elemento <span class="mdui-menu-item-helper"></span> adiciona uma dica curta ao item de menu.

O elemento <span class="mdui-menu-item-more"></span> adiciona uma seta para a direita ao item de menu, usada em itens que possuem submenus.

codeplay_arrow
Exemplo
<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>

Como usar

Chamar via atributos personalizados

Com este método, não é necessário escrever código JavaScript. Basta adicionar o atributo mdui-menu="options" a um elemento de controle (por exemplo, um botão). Ao usar atributos personalizados, um parâmetro target adicional deve ser adicionado para especificar o menu controlado, usando um seletor CSS.

Nota: Para que o menu seja posicionado corretamente, o menu e o elemento que o dispara devem estar sob o mesmo elemento pai, no mesmo nível.

codeplay_arrow
Exemplo
<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
Exemplo
<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>

Chamar via JavaScript

Instanciar o componente:

// anchorSelector indica o seletor CSS ou elemento DOM que dispara o menu
// menuSelector indica o seletor CSS ou elemento DOM do menu
// options indica os parâmetros de configuração do componente, veja a lista de parâmetros abaixo
var inst = new mdui.Menu(anchorSelector, menuSelector, options);
Executar

Parâmetro

Nome do parâmetroTipoValor padrãoDescrição
positionstringautoPosição do menu em relação ao elemento que o disparou.
  • top: o menu fica acima do elemento disparador.
  • bottom: o menu fica abaixo do elemento disparador.
  • center: o menu fica centralizado verticalmente na janela.
  • auto: determina a posição automaticamente. A ordem de prioridade é: bottom > top > center.
alignstringautoAlinhamento do menu em relação ao elemento que o disparou.
  • left: o menu é alinhado à esquerda com o elemento disparador.
  • right: o menu é alinhado à direita com o elemento disparador.
  • center: o menu é centralizado horizontalmente na janela.
  • auto: determina o alinhamento automaticamente. A ordem de prioridade é: left > right > center.
gutterint16Distância mínima entre o menu e as bordas da janela, em px.
fixedbooleanfalseMétodo de posicionamento do menu
  • true: o menu usa posicionamento fixo. Ao rolar a página, o menu permanecerá fixo na janela.
  • false: o menu usa posicionamento absoluto. Ao rolar a página, o menu rolará junto com ela.
coveredbooleanautoSe o menu deve cobrir o elemento que o disparou.
  • true: faz o menu cobrir o elemento disparador.
  • false: faz o menu não cobrir o elemento disparador.
  • auto: menus simples cobrem o elemento disparador. Menus em cascata não o cobrem.
subMenuTriggerstringhoverMétodo de acionamento do submenu.
  • click: aciona o submenu ao clicar.
  • hover: aciona o submenu ao passar o mouse.
subMenuDelayint200Atraso para acionar o submenu (em milissegundos); este parâmetro só é válido quando subMenuTrigger for hover.

Método

Nome do métodoDescrição
open()Abre o menu.
close()Fecha o menu.
toggle()Alterna o estado de abertura do menu.

Evento

Nome do eventoDescriçãoAlvoParâmetros
open.mdui.menuO evento será disparado quando a animação de abertura do menu começar.<ul class="mdui-menu"></ul>event._detail.inst: Instância
opened.mdui.menuO evento será disparado quando a animação de abertura do menu terminar.
close.mdui.menuO evento será disparado quando a animação de fechamento do menu começar.
closed.mdui.menuO evento será disparado quando a animação de fechamento do menu terminar.

Lista de classes CSS

Nome da classeDescrição
.mdui-menuDefine um componente de menu.
.mdui-menu-cascadeDefine um menu em cascata.
.mdui-menu-itemDefine um item de menu.
.mdui-menu-item-iconDefine um ícone de menu.
.mdui-menu-item-helperDefine o texto de ajuda do menu.
.mdui-menu-item-moreSeta para a direita para itens de menu com submenus.
arrow_backPrevious
Diálogo
arrow_forwardNext
Barra de progresso