Menú Contextual en HTML5

14/Feb/2012 HTML5 , , 3 Comentarios

Una de las cosas que no está todavía soportada por los navegadores web respecto al HTML5 son los menús contextuales. A día de hoy solo Firefox 8 y superiores dan soporte al menú contextual en HTML5.

Pero, ¿qué es un menú contextual? Un menú contextual es aquel menú asociado a una zona de la página y el cual tenemos disponible mediante el botón derecho del ratón.

Lo primero de todo será saber cómo se define un menú contextual. Para ello vamos a necesitar el elemento menú.

  1. <menu id="colorMenu">...</menu>

Lo importante en el caso de estar creando un menú contextual es que el tipo del menú es "context". Otros valores son "toolbar" o "list".

Lo siguiente que haremos será definir los diferentes items o elementos que tendrá el menú. En este caso utilizamos el elemento menuitem para dar de alta cada uno de ellos.

  1. <menu type="context" id="colorMenu">
  2. <menuitem label="Rojo" id="rojo" icon="rojo.png"/></menuitem>
  3. <menuitem label="Verde" id="verde" icon="verde.png"/></menuitem>
  4. <menuitem label="Azul" id="azul" icon="azul.png"/></menuitem>
  5. </menu>

Vemos que cada menuitem lleva asociado un atributo label, que será el texto que aparezca en la opción del menú, un id y un icono, el cual definimos mediante el atributo icon. Ya solo nos quedará decidir dónde se va a lanzar el menú. Sobre que parte de la página se podrá ver este menú contextual en HTML5. Para ello utilizamos el atributo general contextmenu, al cual deberemos de pasar el ID del menú que acabamos de crear. Que queremos aplicar el menú sobre una sección de la página escribiremos:

  1. <section contextmenu="colorMenu" id="miseccion">
  2. </section>

Que lo queremos aplicar sobre un campo de input, pues escribirmos lo siguiente:

  1. <label for="color">Color:</label>
  2. <input id="color" type="text" contextmenu="colorMenu">
  3.  

Ya solo nos quedará pulsar con el botón derecho sobre la zona del menú contextual para ver el efecto.

Sobre los menús contextuales podemos manejar los eventos como sobre cualquier otro elemento de la página. Así podemos añadir el siguiente código en Javascript para controlar el click sobre las opciones del menú contextual.

  1. var campo = document.getElementById("color");
  2. var color = document.getElementById("colorMenu");
  3. color.addEventListener("click",function(ev){
  4. campo.value = ev.target.label;
  5. },true);

3 comentarios en “Menú Contextual en HTML5”

Víctor Cuervo

tutoriales completos

Al momento de escribir esto, utilizo firefox 46 y no me funciona.. :-/

Víctor Cuervo

Fredy

Gracias por compartir, aunque el código no se pueda descargar…

“404. That’s an error.

The requested URL /p/lineadecodigo/source/browse/trunk/lineadecodigo_web/WebContent/markup/HTML5/Basicos/contextmenu was not found on this server. That’s all we know.”

Víctor Cuervo

Jhonatan

He aquí una de las maravillas de HTML5 el Menú Contextual es una pena que por el momento funcione en firefox 8 y superiores, pero es a donde vamos lo que podremos experimentar en poco tiempo un gran avance. Cada día me gusta más HTML5.

Responder a Fredy Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*