() translation by (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.
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.
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.
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>.
1 |
<body contextmenu="new-context-menu"> |
2 |
<menu id="new-context-menu" type="context"> |
3 |
<menuitem>Hello World</menuitem> |
4 |
</menu>
|
5 |
</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.
1 |
<body>
|
2 |
<div contextmenu="new-context-menu"> |
3 |
<!-- content -->
|
4 |
</div>
|
5 |
<menu id="new-context-menu" type="context"> |
6 |
<menuitem>Hello World</menuitem> |
7 |
</menu>
|
8 |
</body>
|
Si vemos este ejemplo en el buscador (por ahora únicamente en Firefox), encontraremos el menuitem que declaramos en la parte superior de la lista.
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í:
1 |
<menu id="demo-image" type="context"> |
2 |
<menu label="Image Rotation"> |
3 |
<menuitem>Rotate 90</menuitem> |
4 |
<menuitem>Rotate 180</menuitem> |
5 |
<menuitem>Flip Horizontally</menuitem> |
6 |
<menuitem>Flip Vertically</menuitem> |
7 |
</menu>
|
8 |
</menu>
|
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í:
1 |
<menu id="demo-image" type="context"> |
2 |
<menu label="Image Rotation"> |
3 |
<menuitem icon="img/arrow-return-090.png">Rotate 90</menuitem> |
4 |
<menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem> |
5 |
<menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem> |
6 |
<menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem> |
7 |
</menu>
|
8 |
</menu>
|
Y como podrás ver a continuación, ahí está tu icono.
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:
1 |
.rotate-90 { |
2 |
transform: rotate(90deg); |
3 |
}
|
Con el estilo definido, ahora necesitamos una función que aplique dicho estilo a la imagen:
1 |
function imageRotation(name) { |
2 |
document.getElementById('image').className = name; |
3 |
}
|
Agrega esta función al <menuitem> respectivo a través del atributo onclick, y declara el nombre de la clase CSS, rotate-90:
1 |
<menu id="demo-image" type="context"> |
2 |
<menu label="Image Rotation"> |
3 |
<menuitem onclick="imageRotation('rotate-90')" icon="img/arrow-return-090.png">Rotate 90</menuitem> |
4 |
<menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem> |
5 |
<menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem> |
6 |
<menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem> |
7 |
</menu>
|
8 |
</menu>
|
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!
