Menú contextual personalizado con Html5: Atributo contextmenu

Cómo incluir opciones personalizadas en el menú contextual que aparece al click derecho del ratón.

Menú contextual personalizado con Html5: Atributo contextmenu

Por Kseso ✎ 5

Ejemplo de menú contextual con opciones personalizadas con el atributo html5 contextmenuEl atributo contextmenu es una de esas sorpresas de la especificación html5 que una vez soportada por los principales navegadores otorgarán un puntito más a los desarrolladores.

Con este atributo se consigue de forma sencilla y rápida incluir opciones al menú contextual que aparece al hacer click con el botón derecho del ratón. De este atributo dicen las especificaciones:

El atributo contextmenu provee un menú contextual al elemento.
El valor del atributo contextmenu debe ser el ID del elemento que incluye el menú y estar en el mismo subárbol del DOM.

Este menú se genera con independencia de que javascript está habilitado o no. Pero las opciones no son funcionales si no lo está. Y hoy por hoy sólo Firefox le da soporte al atributo contextmenu.

Vamos con un ejemplo en su uso. Recuerda que si usas Firefox puedes verlo en funcionamiento haciendo click derecho con el ratón en cualquier parte del contenido de este artículo.

Marcado Html

Lo primero es definir el elemento al que incluiremos el menú contextual, añadiendo el atributo contextmenu="mimenu". El valor del atributo "mimenu" lo utilizo como id del elemento al que le añado el menú contextual, que en mi caso va a ser un div id="mimenu" que encierra a todo este artículo, para que si utilizas Firefox veas el menú contextual haciendo click derecho en cualquier parte del post.

<div contextmenu="mimenu"> Aquí el contenido del artículo A continuación, en cuarquier parte incluimos el menú <menu id="mymenu" type="context"> Los items del menú aquí </menu> </div>

Una vez logrado el marcado general, sólo es cuestión de incluir aquellas opciones o items que queramos que muestre el menú contextual:

Creamos el menú <menu id="mimenu" type="context"> A continuación las opciones <menuitem icon="ruta-img.ext" onclick="window.location='#Text146';" label="Con Licencia BEERWARE"></menuitem> <menuitem icon="ruta-img.ext" onclick="window.location.reload();" label="Recargar Post"></menuitem> <menuitem icon="ruta-img.ext" onclick="window.location='#comments';" label="Ir a Comentarios"></menuitem> Creamos un submenú, con el tag <menu> <menu icon="ruta-img.ext" label="Compartir en..."> <menuitem onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);" icon="ruta-img.ext" label="Twitter"></menuitem> <menuitem onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);" icon="ruta-img.ext" label="Facebook"></menuitem> </menu> Cierre del submenú </menu>

Como puedes ver en el código de arriba, es posible crear submenús. Sólo es necesario añadir un nuevo elemento menu que contenga las opciones de segundo nivel.

Los items del menú peden tener los atributos label, icon, onclick para el diseño y las acciones. Las acciones pueden ser o bien funciones ya creadas o código javascript en línea.

Créditos y atribuciones

Artículo elaborado en base al publicado por @DavidWalsh en su blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 5

  1. Interesante! a esperar el soporte de los demás xD

    ResponderEliminar
  2. Muy chulo, pero como dice George, a esperar que llegue el futuro.

    ResponderEliminar
  3. Excelente
    yo me andaba preguntando para qué servía el elemento menu

    ResponderEliminar
  4. Te iba a enviar el siguiente comentario:

    Buen día:
    Nada más una sugerencia (la pongo aquí ya que en esta página es lo que pasa).
    ¿Podrías darle al elemento html un margen de ,mmm..., pongamos unos 2rem para evitar que (en chrome que es con lo que lo estoy viendo) los textos parezcan que se meten en los laterales de la pantalla?
    con 1 rem también valdría.

    .. pero ya vi que lo has corregido en otras páginas.
    Saudiños.

    ResponderEliminar
    Respuestas
    1. Gracias por el aviso, Manuel.
      Creo que ya está solucionado.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap