En este tutorial, aprenderás a crear un menú contextual personalizado utilizando HTML, CSS y JavaScript. Un menú contextual es un menú que aparece al hacer clic derecho en un elemento específico. Vamos a crear un ejemplo básico para entender cómo funciona.

Paso 1: Crear el archivo HTML

Primero, necesitamos crear una estructura HTML para nuestro menú contextual y el área donde se activará. Aquí hay un ejemplo básico:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" c>
    <title>Menú Contextual</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="context-menu" id="contextMenu">
        <ul>
            <li>Opción 1</li>
            <li>Opción 2</li>
            <li>Opción 3</li>
        </ul>
    </div>
    <div class="content">
        Haz clic derecho aquí para ver el menú contextual
    </div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Añadir Estilos con CSS

Ahora, agreguemos algunos estilos para nuestro menú contextual utilizando CSS. Queremos que nuestro menú se vea elegante y que aparezca en la posición correcta al hacer clic derecho.

/* styles.css */
.context-menu {
    display: none;
    position: absolute;
    background-color: #f0f0f0;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1000;
}
.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.context-menu li {
    padding: 10px;
    cursor: pointer;
}
.context-menu li:hover {
    background-color: #e0e0e0;
}

Paso 3: Añadir Funcionalidad con JavaScript

Finalmente, necesitamos usar JavaScript para hacer que el menú aparezca al hacer clic derecho y para ocultarlo cuando se hace clic en cualquier otra parte.

// script.js

// Esperamos que el DOM este listo
document.addEventListener('DOMContentLoaded', function() {
    // Cargamos los elementos necesarios en las variables
    const contextMenu = document.getElementById('contextMenu');
    const content = document.querySelector('.content');
    
    // Escuchamos el evento del "click derecho" (Menu Contextual)
    content.addEventListener('contextmenu', function(e) {
        // Evitamos que ocurra el evento normal del click derecho (Mostrar el menú nativo del navegador)
        e.preventDefault();
        // Mostramos el menu
        contextMenu.style.display = 'block';
        // Lo posicionamos en el lugar que se hizo el click
        contextMenu.style.left = `${e.pageX}px`;
        contextMenu.style.top = `${e.pageY}px`;
    });
    // Ocultamos el menú cuando se hace click "izquierdo / normal"
    document.addEventListener('click', function() {
        contextMenu.style.display = 'none';
    });
});

Ejemplo Funcional

Ejemplo funcional menú contextual con javascript puro

Conclusión

Este tutorial te ha mostrado cómo crear un menú contextual personalizado utilizando HTML, CSS y JavaScript, abordando los principios básicos de JavaScript y cómo manipular el DOM para lograr funcionalidades interactivas.

Entender estos conceptos es esencial para desarrollar una base sólida en programación web. A medida que avances, encontrarás que las librerías y frameworks externos te permiten realizar tareas complejas de manera más eficiente, pero es crucial que primero comprendas la 'magia' que ocurre detrás de escena.

Dominar los fundamentos te permitirá utilizar estas herramientas con mayor eficacia y adaptar soluciones a tus necesidades específicas, proporcionándote una comprensión más profunda y flexible del desarrollo web.