Elemento menu

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento menu representa una lista de comandos. Este elemento ha sido diseñado para permitir a los autores crear sencillamente menús en un documento o aplicación, sin tener que recurrir a programas del lado cliente. Los comandos o ítems en un menu pueden ser insertados mediante los elementos menuitem o li, dependiendo del tipo de menú en que estén siendo declarados.

El comportamiento de un menu depende del valor de su atributo type. Este atributo puede tomar uno de dos valores, que son (insensibles a mayúsculas/minúsculas):

  • context: el menu deberá ser mostrado en respuesta a la interacción del usuario, como por medio un botón (button) o a través de la solicitud de un menú contextual. Este es el valor por defecto cuando el menu es hijo de otro menu con el valor "context" en su atributo type.
  • toolbar: el menu representa una barra de herramientas que puede tener una lista no ordenada de comandos (li) que el usuario puede activar. En tal caso, los ítems en el menu son representados por un elemento li conteniendo a un elemento button. Alternativamente, el contenido del menu puede carecer de elementos li y estar compuesto por contenido en prosa que provea una descripción acerca de los comandos disponibles.

El atributo label sólo puede ser declarado en un menu que es hijo de otro menu contextual. En tales situaciones, el valor en este atributo será usado por los navegadores para etiquetar al submenú en el menu padre.

Los ítems en un menú pueden ser temáticamente separados en grupos, insertando quiebres representados por el elemento hr.

Hasta el 27/03/2015, el soporte provisto por los navegadores para el elemento menu es casi inexistente. Los autores pueden tener que recurrir a programas para lograr los mismos efectos consistentemente, hasta que el soporte crezca.

Ejemplos

En nuestro primer ejemplo, crearemos un menú contextual para un párrafo (p). Este menú será mostrado por los navegadores que lo soporten cuando el usuario haga clic derecho sobre el párrafo.

Cada una de las opciones en el menu es representada por un elemento menuitem. Las acciones ejecutadas por estas opciones serán llevadas a cabo por un programa del lado cliente llamado en el atributo onclick.

<p id="parrafo1" contextmenu="menucontextual1">Un menú contextual a medida debería ser mostrado en los navegadores que lo soportan, cuando el usuario haga un clic derecho sobre este párrafo, permitiendo la selección del color de fondo.</p>
<menu id="menucontextual1" type="context">
  <menuitem label="Fondo rojo" onclick="menuCambiarColorA(1, 'rojo')"></menuitem>
  <menuitem label="Fondo verde" onclick="menuCambiarColorA(1, 'verde')"></menuitem>
  <menuitem label="Fondo azul" onclick="menuCambiarColorA(1, 'azul')"></menuitem>
</menu>

Un menú contextual a medida debería ser mostrado en los navegadores que lo soportan, cuando el usuario haga un clic derecho sobre este párrafo, permitiendo la selección del color de fondo.

Ahora crearemos un menú contextual anidado. En este ejemplo, el menu del ejemplo anterior será expandido para que presente un submenú con un par de opciones. El atributo type puede ser tranquilamente omitido en el menu interior debido a que "context" es el valor por defecto para un menu que es hijo de otro menú contextual.

En este caso, el atributo label juega un rol principal al proveer al menu padre un texto para mostrar en la opción que despliega el submenú cuando es activada.

<p id="parrafo2" contextmenu="menucontextual2">Albert Einstein fue un físico alemán de origen judío, nacionalizado después suizo y estadounidense. Es considerado como el científico más conocido y popular del siglo XX.</p>
<menu id="menucontextual2" type="context">
  <menuitem label="Fondo rojo" onclick="menuCambiarColorA(2, 'rojo')"></menuitem>
  <menuitem label="Fondo verde" onclick="menuCambiarColorA(2, 'verde')"></menuitem>
  <menuitem label="Fondo azul" onclick="menuCambiarColorA(2, 'azul')"></menuitem>
  <menu label="Fondos monocromáticos">
    <menuitem label="Fondo blanco" onclick="menuCambiarColorA(2, 'blanco')"></menuitem>
    <menuitem label="Fondo negro" onclick="menuCambiarColorA(2, 'negro')"></menuitem>
  </menu>
</menu>

Albert Einstein fue un físico alemán de origen judío, nacionalizado después suizo y estadounidense. Es considerado como el científico más conocido y popular del siglo XX.

En el siguiente ejemplo usaremos al elemento hr para separar temáticamente las opciones en el menu. Asimismo, retocaremos algunos atributos en los elemento menuitem para proveer opciones que se comportan como casillas de verificación y botones de opción.

Las funciones declaradas en el siguiente ejemplo no están diseñadas para funcionar. Este ejemplo apunta únicamente a probar la funcionalidad provista por los navegadores para menús.

<p contextmenu="menucontextual3">Stephen William Hawking es un físico teórico, astrofísico, cosmólogo autor y director de investigación en el Centro para la Cosmología Teórica en la Universidad de Cambridge.</p>
<menu id="menucontextual3" type="context">
  <menuitem label="Autocorrección" type="checkbox" onclick="alternarAutocorreccion()"></menuitem>
  <hr>
  <menuitem label="Inglés" type="radio" radiogroup="radiolenguaje" onclick="cambiarLenguajeA('ingles')"></menuitem>
  <menuitem label="Español" type="radio" radiogroup="radiolenguaje" onclick="cambiarLenguajeA('espanol')"></menuitem>
  <menuitem label="Francés" type="radio" radiogroup="radiolenguaje" onclick="cambiarLenguajeA('frances')"></menuitem>
</menu>

Stephen William Hawking es un físico teórico, astrofísico, cosmólogo autor y director de investigación en el Centro para la Cosmología Teórica en la Universidad de Cambridge.


En el siguiente ejemplo, insertaremos un menú de barra de herramientas que pretende ser la barra de menú de un editor de texto. Los comandos listados en este menú no ejecutarán ninguna acción, pero el ejemplo será de todos modos suficiente para mostrar la funcionalidad del elemento menu. Como ha sido dicho anteriormente, cada ítem en el menu es representado por un ítem de lista (elemento li) conteniendo a un botón (elemento button).

Como puedes ver, el atributo type es omitido en el menu. Esto se debe a que "toolbar" es el valor por defecto para el atributo cuando el menu no es hijo de otro menu de tipo contextual.

<menu>
  <li><button onclick="nuevo()">Nuevo...</button></li>
  <li><button onclick="abrir()">Abrir...</button></li>
  <li><button onclick="guardar()">Guardar</button></li>
  <li><button onclick="guardarcomo()">Guardar como...</button></li>
</menu>
  • El propósito del elemento menu en barras de herramientas es más que nada semántico. La aplicación de estilos en tales casos es dejada en manos de los autores.

    Atributos

    Atributos específicos

    type

    Uno de dos valores predefinidos que determinan el comportamiento y/o propósito del menu. Los dos valores posibles (insensibles a mayúsculas/minúsculas) son:

    • context: el menu deberá ser mostrado en respuesta a la interacción del usuario, como por medio un botón (button) o a través de la solicitud de un menú contextual. Este es el valor por defecto cuando el menu es hijo de otro menu con el valor "context" en su atributo type.
    • toolbar: el menu representa una barra de herramientas que puede tener una lista no ordenada de comandos (li) que el usuario puede activar. En tal caso, los ítems en el menu son representados por un elemento li conteniendo a un elemento button. Alternativamente, el contenido del menu puede carecer de elementos li y estar compuesto por contenido en prosa que provea una descripción acerca de los comandos disponibles.

    Ejemplo

    <menu id="menucontextualedicion" type="context">
      <menuitem label="Cortar" onclick="cortar()"></menuitem>
      <menuitem label="Copiar" onclick="copiar()"></menuitem>
      <menuitem label="Pegar" onclick="pegar()"></menuitem>
    </menu>
    

    label

    Una línea de texto para ser mostrada por el menu padre como etiqueta de este submenú. Un comportamiento común sería mostrar los contenidos de este menu cuando su etiqueta, presente en el menu padre, sea activada.

    Este atributo sólo debe ser declarado en un menu que es hijo de otro menu que tiene el valor "context" en su atributo type.

    Las funciones del siguiente ejemplo ("cortar", "copiar", "pegar", etc) no están diseñadas para funcionar. Este ejemplo apunta únicamente a probar la funcionalidad provista por los navegadores para menús anidados.

    Ejemplo

    <p contextmenu="menucontextual4">Paranormal o fenómenos paranormales son términos usados para dar nombre a cierta clase de experiencias que se encuentran al margen del campo de las experiencias normales explicables científicamente.</p>
    <menu id="menucontextual4" type="context">
      <menuitem label="Cortar" onclick="cortar()"></menuitem>
      <menuitem label="Copiar" onclick="copiar()"></menuitem>
      <menuitem label="Pegar" onclick="pegar()"></menuitem>
      <menu label="Seleccionar">
        <menuitem label="Palabra" onclick="select('palabra')"></menuitem>
        <menuitem label="Oración" onclick="select('oracion')"></menuitem>
        <menuitem label="Párrafo" onclick="select('parrafo')"></menuitem>
        <menuitem label="Todo" onclick="select('todo')"></menuitem>
      </menu>
    </menu>
    

    Paranormal o fenómenos paranormales son términos usados para dar nombre a cierta clase de experiencias que se encuentran al margen del campo de las experiencias normales explicables científicamente.

    Atributos globales

    Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

    Eventos

    Eventos globales

    Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.