soy Kseso y esto EsCSS

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

avatar del Editor del 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