El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Menús

Los menús se dividen en menús simples y menús en cascada. Los menús simples son adecuados para teléfonos y tabletas, mientras que los menús en cascada son adecuados para equipos de escritorio.

Modo de uso

Llamada vía atributos
Llamada vía JavaScript

Lectura relacionada

Pautas de diseño de Material Design: componentes - Menú

Estilo

Menú simple

Añadir el atributo disabled a un elemento del menú deshabilita ese elemento.

Añadir un elemento <li class="mdui-divider"></li> agrega una línea separadora.

Ejemplo

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

Menú simple con iconos

Ejemplo

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

Menú en cascada

Añadir la clase .mdui-menu-cascade al elemento <ul class="mdui-menu"> convierte el menú en un menú en cascada para equipos de escritorio.

Se puede crear un menú anidado añadiendo otro menú dentro de un elemento <li class="mdui-menu-item"></li>. En teoría, se admite un número ilimitado de niveles.

El elemento <span class="mdui-menu-item-helper"></span> añade una breve descripción a un elemento del menú.

El elemento <span class="mdui-menu-item-more"></span> añade una flecha hacia la derecha a los elementos del menú que contienen submenús.

Ejemplo

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

Modo de uso

Llamada vía atributos

Con este método no necesitas escribir JavaScript. Solo añade el atributo mdui-menu="options" a un elemento que actúe como activador, como un botón (por ejemplo, un botón). Cuando se invoca mediante un atributo personalizado, también debes añadir un parámetro target para indicar el menú controlado, cuyo valor es el selector CSS del menú controlado.

Nota: para que el menú se posicione correctamente, el menú y el elemento que lo activa deben estar en el mismo nivel dentro del mismo elemento padre.

Ejemplo

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

Ejemplo

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

Llamada vía JavaScript

Instanciar el componente:

// anchorSelector representa el selector CSS o el elemento DOM que activa el menú
// menuSelector representa el selector CSS o el elemento DOM del menú
// options representa los parámetros de configuración del componente; consúltalos en la lista de parámetros de abajo
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

Ejecutar

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`position`	`string`	`auto`	La posición del menú respecto al elemento que lo activa. `top`: el menú se muestra encima del elemento que lo activa. `bottom`: el menú se muestra debajo del elemento que lo activa. `center`: el menú se centra verticalmente en la ventana. `auto`: la posición se determina automáticamente. La prioridad es `bottom` > `top` > `center`.
`align`	`string`	`auto`	La alineación del menú respecto al elemento que lo activa. `left`: el menú se alinea a la izquierda del elemento que lo activa. `right`: el menú se alinea a la derecha del elemento que lo activa. `center`: el menú se centra horizontalmente en la ventana. `auto`: la posición se determina automáticamente. La prioridad es `left` > `right` > `center`.
`gutter`	`int`	`16`	El espacio mínimo entre el menú y el borde de la ventana, en píxeles.
`fixed`	`boolean`	`false`	El método de posicionamiento del menú `true`: el menú usa posicionamiento `fixed`. Cuando la página se desplaza, el menú permanece en una posición fija de la ventana, sin moverse con la barra de desplazamiento. `false`: el menú usa posicionamiento `absolute`. Cuando la página se desplaza, el menú se mueve con la página.
`covered`	`boolean`	`auto`	Si el menú se superpone al elemento que lo activa. `true`: hace que el menú se superponga al elemento que lo activa. `false`: hace que el menú no se superponga al elemento que lo activa. `auto`: los menús simples se superponen al elemento que los activa; los menús en cascada no.
`subMenuTrigger`	`string`	`hover`	La forma en que se activa el submenú. `click`: el submenú se activa al hacer clic. `hover`: el submenú se activa al pasar el cursor por encima.
`subMenuDelay`	`int`	`200`	El tiempo de retardo para abrir el submenú (en milisegundos); solo tiene efecto cuando <code>subMenuTrigger: hover</code>.

Método

Nombre del método	Descripción
`open()`	Abrir el menú.
`close()`	Cerrar el menú.
`toggle()`	Alternar el estado abierto del menú.

Evento

Nombre del evento	Descripción	Objetivo	Parámetros
`open.mdui.menu`	Se dispara cuando comienza la animación de apertura del menú.	`<ul class="mdui-menu"></ul>`	`event._detail.inst`: instancia
`opened.mdui.menu`	Se dispara cuando termina la animación de apertura del menú.
`close.mdui.menu`	Se dispara cuando comienza la animación de cierre del menú.
`closed.mdui.menu`	Se dispara cuando termina la animación de cierre del menú.

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-menu`	Definir un componente de menú.
`.mdui-menu-cascade`	Definir un menú en cascada.
`.mdui-menu-item`	Definir un elemento de menú.
`.mdui-menu-item-icon`	Definir un icono de menú.
`.mdui-menu-item-helper`	Definir el texto de ayuda del menú.
`.mdui-menu-item-more`	La flecha hacia la derecha para elementos del menú que contienen submenús.

Diálogos

Progreso