Cómo crear menús contextuales en HTML5

Una de las joyas ocultas dentro de las especificaciones de HTML5 son los menús contextuales. Esta característica de HTML 5 permite a los desarrolladores crear menús contextuales personalizados para bloques dados dentro de un menú simple con sus elementos menuitem. La información del menú se albergará dentro de la página, por lo que no hay necesidad de crear un plugin personalizado. Déjame que te enseñe como puedes implementar tus propios menús contextuales personalizados con la ayuda de HTML 5. Ya verás como te ahorras esos plugins javascript por lo sencillo que es de integrar estos menús y las ventajas que te ofrece el utilizarlo, como el menor consumo de recursos.

El HTML

Primero de todo, vamos a empezar definiendo un bloque de HTML y asignándole el ID de los nodos del menú que vamos a utilizar:

<section contextmenu="mymenu">
    <!--
        Para ser pulcros y limpios,
        Voy a poner el menú en el interior del elemento que vamos a utilizar
    -->
</section>

Con el bloque definido, ahora es el momento de crear los elementos adicionales del menú contextual para el bloque que hemos creado anteriormente:

<menu type="context" id="mymenu">
    <menuitem label="Refrescar pagina" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
    <menuitem label="Bajar a comentarios" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>
    <menu label="Compartir en..." icon="/images/share_icon.gif">
        <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
        <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    </menu>
</menu>

Los elementos del menú pueden tener como atributo label, icon u onclick para representar el diseño y las acciones que determinarán el comportamiento del elemento. Dichas acciones pueden tener funciones predefinidas o pueden llamar a un código javascript, al igual que puede hacer cualquier elemento. Múltiples elementos padres pueden utilizar el mismo menú, así que no hay necesidad de repetirlos una y otra y otra vez.

Mozilla Firefox es actualmente el único navegador que soporte esta API. No creo que la inserción de menús contextuales sea una necesidad crítica, pero saber que tenemos la capacidad de hacerlo es bastante agradable, y tengo la intención de añadirlo a esta página pronto.

Y este ha sido el artículo en el que trataba explicaros cómo crear menús contextuales en HTML5, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.