Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Una introducción a los elementos HTML5 “menu” y “menuitem”

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Set Relative URLs With the “base” Tag
How to Create Your Own HTML Elements With Web Components

Spanish (Español) translation by Christopher Hönninger (you can also view the original English article)

El día de hoy quiero presentar dos elementos HTML5: <menu> y <menuitem>, que son parte de la especificación de Interactive Elements. La web ha evolucionado a algo más que solamente documentos enlazados; páginas web hoy en día se asimilan mucho a aplicaciones. Por lo tanto, es un buen momento para empezar a hacer uso de funciones web interactivas.

Esto dos elementos casi no son mencionados o discutidos por desarrolladores web, probablemente debido a la falta de soporte de los principales buscadores. Al escribir este artículo, el único buscador que ha implementado ambos elementos es Firefox.

Menu vs. Nav

Cuando hablamos de menu es importante no confundirse con <nav>. La especificación hace un buen trabajo en diferenciar ambos elementos.

<nav> corresponde al HTML Navigation Element. Es el elemento que representa el bloque de navegación del sitio web. Generalmente contiene un set de enlaces que permite al usuario navegar o saltar entre secciones o a otras páginas del sitio web.

<menu>, por el otro lado, representa un set de órdenes de menú. La idea es similar a aplicaciones de escritorio o móviles. Aplicaciones de escritorio suelen usar menús de herramientas o de contexto para llevar a cabo todo tipo de tareas. Por ejemplo, el menú Blur en Photoshop, que ejecuta una tarea para difuminar la capa seleccionada.

Menú Blur en Photoshop

Esta es la diferencia principal entre ambos elementos; <nav> debe contener enlaces de navegación, mientras que <menu> debe ayudar al usuario a llevar ciertas tareas a cabo.

Usando el Elemento Menu

En pocas palabras, <menu> está diseñado para crear menús contextuales y de herramientas y pop-ups. Sin embargo, los últimos dos todavía no han sido implementados en ningún buscador, ni siquiera en Firefox. Por el momento es difícil saber cómo se van a implementar y ver en buscadores. También existe la posibilidad que la especificación de menú de herramientas y pop-up cambie en el futuro.

Por ahora vamos a concentrarnos en el menú contextual.

Menú Contextual

Un menú contextual aparece cuando hacemos clic derecho en una aplicación. Las opciones que aparecen dependen de dónde hemos apretado clic derecho, por eso el nombre contextual.

Menú contextual nativo en OS X y Ubuntu

Opción JavaScript

Es posible añadir menús contextuales a sitios web a través de JavaScript o un plugin de jQuery. El problema con este método es que generalmente requiere de mucho markup y, críticamente, elimina el menú contextual nativo del buscador – esto puede confundir al usuario si no se hace apropiadamente.

Menú contextual personalizado en Google Drive

Solución Nativa

Los elementos <menu> y <menuitem> incorporan nuevas opciones de menú como parte del menú contextual nativo del buscador. En el ejemplo inferior vamos a añadir una opción de menú contextual llamada “Hello World” a nuestro <body>.

Lo esencial del fragmento superior son los atributos – id, type y contextmenu – que definen el tipo de menú como contextual y el entorno en el cual debe aparecer.

En nuestro caso, debido a que añadimos el atributo contextmenu a body, el nuevo menú va a aparecer en cualquier parte del documento al hacer clic derecho.

Al asignar el atributo contextmenu a elementos específicos como <div>, <main>, <section>, etc. – y no body – puedes limitar el entorno en el cual debe aparecer nuestro nuevo menú contextual.

Si vemos este ejemplo en el buscador (por ahora únicamente en Firefox), encontraremos el menuitem que declaramos en la parte superior de la lista.

La nueva opción de menú, “Hello World”, aparece como parte del menú contextual nativo.

Añadiendo un Menú Secundario e Icono

Menús secundarios abarcan un grupo de opciones con funciones relacionadas o similares. El menú Image Rotation de Photoshop es un ejemplo perfecto de esto. Este menú contiene varias opciones secundarias que le permiten al usuario escoger el grado de rotación (90º y 180º) y la dirección.

Usando el elemento <menu>, añadir menús secundarios es tarea fácil e intuitiva. Crea otro elemento <menu> dentro del primero, con un atributo label para declarar el nombre del menú, así:

Al ejecutar este código en un buscador (nuevamente, por ahora solo en Firefox), encontraremos un nuevo menú con cuatro menús secundarios:

Iconos

Un nuevo atributo llamado icon permite agregar un icono junto al menú. Es importante señalar que este atributo únicamente puede ser añadido a <menuitem>. Indica la ruta de la imagen para cada icono, así:

Y como podrás ver a continuación, ahí está tu icono.

Cada menú secundario ahora tiene un icono ilustrativo. Iconos por Fugue icon.

Dándole una Función al Menú

Hasta ahora hemos creado algo que parece un menú contextual, pero que no funciona como tal. Los usuarios van a esperar que el menú haga algo; hacer clic sobre Copy debe copiar el texto o enlace, y hacer clic sobre New Folder debe crear un ordenador nuevo. Podemos hacer esto con JavaScript.

Nota: antes de continuar, recomiendo leer JavaScript Fundamentals por Jeremy McPeak; ideal para cualquier persona aprendiendo JavaScript.

Tomemos el ejemplo de “Image Rotation” anterior y creemos una función que rote la imagen seleccionada. Las funciones de CSS3 Transform y Transition pueden ejecutar una rotación en el buscador por nosotros; aquí el estilo para rotar la imagen 90 grados:

Con el estilo definido, ahora necesitamos una función que aplique dicho estilo a la imagen:

Agrega esta función al <menuitem> respectivo a través del atributo onclick, y declara el nombre de la clase CSS, rotate-90:

Para terminar, crea tres clases CSS más que roten la imagen 180 grados y que volteen la imagen horizontalmente y verticalmente. Luego incluye las funciones JavaScript a las opciones de menú correspondientes. Mira este ejemplo en acción aquí.

Conclusión

El elemento <menu> puede ser muy útil tanto en aplicaciones web como en sitios web regulares. Lamentablemente, el soporte sigue siendo muy limitado.

Ojalá Safari, Chrome, Opera e Internet Explorer se unan al club y también implementen los otros tipos de menús (popup y toolbar). Espero con ansias el desarrollo de este elemento durante el próximo año.

Referencias adicionales

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.